„JavaScript DOM Programming Art' Lesenotizen DOM-Grundlagen_Javascript-Kenntnisse

DOM
         
DOM: Dokumentobjektmodell;

Knoten

Elementknoten: Die Atome von DOM sind Elementknoten. Elemente wie ,

,

. Elemente können andere Elemente enthalten. Das einzige Element, das nicht in einem anderen Element enthalten ist, ist das -Element
Textknoten: In XHTML-Dokumenten sind Textknoten immer innerhalb von Elementknoten enthalten.
Attributknoten: Der Attributknoten wird verwendet, um eine genauere Beschreibung des Elements zu geben. Beispielsweise hat fast jedes Element ein Titelattribut, und wir können dieses Attribut verwenden, um genau zu beschreiben, was im Element enthalten ist:
 

Vergiss nicht, dieses Zeug zu kaufen.

Im DOM ist title="a gentle reminder" ein Attributknoten.

CSS

Element abrufen
Es gibt drei Methoden zum Abrufen von Elementknoten: getElementById, getElementsByTagName und getElementsByClassName.

GetElementsByTagName lässt einen Platzhalter als Parameter zu, was bedeutet, dass jedes Element im Dokument einen Platz in dem von dieser Funktion zurückgegebenen Array hat. Das Platzhalterzeichen („*“) muss in Anführungszeichen gesetzt werden, um es von der Multiplikationsoperation zu unterscheiden.
Sie können getElementById und getElementsByTagName auch kombinieren. Wie unten gezeigt:
Code kopieren Der Code lautet wie folgt:
    var einkaufen = document.getElementById("purchase");
    var items = shopping.getElementsByTagName("*");


Auf diese Weise können Sie ermitteln, wie viele Elemente das Element mit dem ID-Attributwert „Kauf“ enthält.
Die getElementsByClassName-Methode wird nur von neueren Browsern unterstützt. Um dies zu kompensieren, müssen DOM-Skriptprogrammierer vorhandene DOM-Methoden verwenden, um ihren eigenen getElementsByClassName zu implementieren. In den meisten Fällen ähnelt ihr Implementierungsprozess ungefähr dem folgenden getElementsByClassName:
Code kopieren Der Code lautet wie folgt:
Funktion getElementsByClassName(node, classname){
If(node.getElementsByClassName){
             return node.getElementsByClassName(classname);
         }sonst{
        var results = new Array();
            var elems = node.getElementsByTagName("*");
for(var i=0;i If(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
            }
         }
         Ergebnisse zurückgeben;
}
}


Diese getElementsByClassName-Funktion akzeptiert zwei Parameter. Der erste Knoten stellt den Startpunkt des Suchelements im DOM-Baum dar und der zweite Klassenname ist der zu durchsuchende Klassenname.

Eigenschaften abrufen und festlegen

getAttribute ist eine Funktion mit nur einem Parameter – dem Namen des Attributs, das Sie abfragen möchten:
Code kopieren Der Code lautet wie folgt:
object.getAttribute(attribute)



setAttribute() ermöglicht es uns, den Wert des Attributknotens zu ändern. Wenn Sie nach dem Ändern des Dokuments über setAttribute den Quellcode des Dokuments über die Option „Quelle anzeigen“ anzeigen, werden die Attributwerte vor der Änderung weiterhin angezeigt. Mit anderen Worten, die von setAttribute vorgenommenen Änderungen werden nicht geändert sich im Quellcode des Dokuments selbst widerspiegeln. Dieses Phänomen der „Inkonsistenz zwischen Erscheinungsbild und Innerem“ ist auf den Arbeitsmodus des DOM zurückzuführen: Der statische Inhalt des Dokuments wird zuerst geladen und dann dynamisch aktualisiert. Die dynamische Aktualisierung hat keinen Einfluss auf den statischen Inhalt des Dokuments. Das ist die wahre Stärke des DOM: Seiteninhalte aktualisieren, ohne die Seite im Browser zu aktualisieren.