Tutorial zu DOM-Grundlagen: Verwenden von DOM_Basic Knowledge

Nachdem Sie das Framework und die Knoten von DOM (Text Object Model) verstanden haben, ist es am wichtigsten, diese Knoten zum Verarbeiten von HTML-Webseiten zu verwenden

Für einen DOM-Knoten gibt es eine Reihe von Eigenschaften und Methoden, die verwendet werden können. Zu den häufig verwendeten gehört die folgende Tabelle.

Perfekt: http://www.w3school.com.cn/xmldom/dom_element.asp

1. Zugriffsknoten

BOM bietet einige Grenzmethoden für den Zugriff auf Knoten. Die am häufigsten verwendeten sind getElementsByTagName() und getElementById()

Code kopieren Der Code lautet wie folgt:

Client-Sprache

• HTML


• JavaScript


• CSS

Serverseitige Sprache

• ASP.NET


• JSP


• PHP

document.getElementById()

Code kopieren Der Code lautet wie folgt:

PHP

Code kopieren Der Code lautet wie folgt:

//id erhält className

2. Knotentyp erkennen

Der Knotentyp kann über den Knotentyp ermittelt werden. Dieser Parameter gibt 12 ganzzahlige Werte zurück.

Ausdrucksformat wie document.nodeType

Was wirklich nützlich ist, sind die drei Arten von Modellknoten, die im DOM (1)-Modell erwähnt werden

Elementknoten, Textknoten und Attributknoten

1. Der Rückgabewert des Elementknotens ist 1

2. Der Rückgabewert des Attributknotens ist 2

3. Der Textknoten gibt den Wert 3 zurück

Code kopieren Der Code lautet wie folgt:

CSS

Rückgabe: nodeType: 1

Dadurch können bestimmte Knoten einzeln bearbeitet werden, was bei der Suche nach Knoten sehr praktisch ist. Ich werde später darüber sprechen.

3. Nutzen Sie die Beziehung zwischen Vater, Sohn und Bruder, um Knoten zu finden

Wenn Sie im ersten Abschnitt auf den Knoten zugreifen, verwenden Sie das Attribut childNodes des Knotens, um auf den im Elementknoten enthaltenen Textknoten zuzugreifen.

In diesem Abschnitt wird die Eltern-Kind-Bruder-Beziehung von Knoten verwendet, um Knoten zu finden

*Verwenden Sie die Attribute hasChildNodes und childNodes, um alle in diesem Knoten enthaltenen Knoten abzurufen

Code kopieren Der Code lautet wie folgt:

• Süß-saure Schweinerippchen


• Rundes gedämpftes Schweinefleisch mit Fadennudeln


• Kimchi-Fisch


• Kastaniengebratenes Hähnchen


• Ma Po Tofu

4.DOM ruft den übergeordneten Knoten des Knotens ab

Code kopieren Der Code lautet wie folgt:

• Süß-saure Schweinerippchen


• Rundes gedämpftes Schweinefleisch mit Fadennudeln


• Kimchi-Fisch


• gebratenes Hähnchen mit Kastanie


• Ma Po Tofu

//ul zurückgeben

Unter Verwendung des übergeordneten Knotens wurde der übergeordnete Knoten des angegebenen Knotens erfolgreich abgerufen

5. Verwenden Sie das parentNode-Attribut

Code kopieren Der Code lautet wie folgt:

• Süß-saure Schweinerippchen


• Rundes gedämpftes Schweinefleisch mit Fadennudeln


• Kimchi-Fisch


• gebratenes Hähnchen mit Kastanie


• Ma Po Tofu

//Output
//tageName:DIV
claaName:colorful
typeOf:object

Beginnen Sie mit einem untergeordneten Knoten und durchsuchen Sie den übergeordneten Knoten aufwärts, bis der Klassenname des Knotens „bunt“ ist

6.doms brüderliche Beziehung

Code kopieren Der Code lautet wie folgt:

• Süß-saure Schweinerippchen


• Rundes gedämpftes Schweinefleisch mit Fadennudeln


• Kimchi-Fisch


• gebratenes Hähnchen mit Kastanie


• Ma Po Tofu

                                                                                                                                                                                                                             

Die Verwendung der Attribute nextsibling und previousSibling für den Zugriff auf Geschwisterknoten sieht gut aus.

Aber nur anwendbar auf IE-Browser

Um eine gute Kompatibilität bei der Verwendung des Codes zu gewährleisten, muss nodeType zur Beurteilung verwendet werden

Die Kompatibilitätsverarbeitung läuft wie folgt ab:

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

7. Knotenattribute festlegen

Code kopieren

Der Code lautet wie folgt:

        window.onload = function(){

// Holen Sie sich das Bild           var imgDataBe = document.getElementsByTagName("img")[0];
//Holen Sie sich das Titelattribut des Bildes
              imgDataBe.setAttribute("src","02.gif");
             imgDataBe.setAttribute("title","人情波");
             document.write(imgDataBe.getAttribute("title"));
              document.write(imgDataBe.getAttribute("alt"));
              document.write(imgDataBe.getAttribute("node-data"));
             document.write(imgDataBe.getAttribute("node_data"));
}

Knotenattribute mit der Methode setAttribute() festlegen

Code kopieren Der Code lautet wie folgt: