Frage über document.getElementById

  • So ganz verstehe ich deine Frage nicht.

    Aber mit

    document.getElementById("myHeader");

    Rufst du eine id auf die in deinen Code das <p> Element ist

    <p id="myHeader"> Hello World </p>

    Da die Id nur einmalig ist ( darf nur einmalig sein in einen Validen Code ). im document, wird durch diesen Code.

    document.getElementById("myHeader").innerHTML="Have a nice Day";


    Der Inhalt in den <p> Element geändert.

    Wenn du deinen Code im Browser testest dann solte der Inhalt "Hello Word" sich ändern wenn man drauf klickt

  • Vielleicht wird der Sinn klarer, wenn man es mit document.querySelector() vergleicht: Hier kann man auch ein anderes Element als document verwenden und der Selector im Parameter wird dann nur innerhalb dieses Elementes gesucht. Z. B. so:

    Code
    const thediv = document.getElementById("mydiv1");
    const thespan = thediv.querySelector("#myspan1"); // das Element #myspan1 wird innerhalb von #mydiv1 gesucht

    Bei getElementById geht das nicht, weil es eine ID immer nur einmal im Dokument gibt, aber ich vermute, dass man es aus Gründen der Einheitlichkeit so belassen hat, dass das document davor gestellt werden muss.

  • Der Grund ist schlicht und ergreifend, dass JavaScript ( auch wenn es eine Scriptsprache ist ) rein objektorientiert aufgebaut ist. Objekte haben Eigenschaften und Methoden. getElementById() ist eine Methode, des document-Objekt, deshalb muss man das mit angeben, wenn man es nutzen will.


    EDIT: Ein Zusatz wäre da noch.

    Ich nahm fälschlicher Weise auch mal an, dass querySelector() so wie in #3 gezeigt auf jedes Element angewendet werden kann. Ganz so ist es aber leider nicht, wie ich dann irgendwann feststellen musste. Denn auch bei Anwendung auf ein beliebiges Element, greift querySelector() auf das komplette DOM zu. Erst mit Verwendung des Pseudoselektor :scope erreicht man das gewünschte Verhalten:

    JavaScript
    var _someElement = document.querySelector( '#someDivElement' );
    var _childElement = _someElement.querySelector( ':scope #someChild' );

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!