Detaillierte Erläuterung häufig verwendeter DOM-Methoden in js-js-Tutorial-php.cn

Detaillierte Erläuterung häufig verwendeter DOM-Methoden in js

高洛峰

Freigeben： 2017-02-06 09:16:06

Original

1574 Leute haben es durchsucht

Einführung mehrerer gängiger Methoden von js DOM

Elementknoten abrufen getElementById getElementsByTagName getElementsByClassName

Schreiben Sie zunächst eine einfache Webseite zum Testen:

/*
　　test.html
*/
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
</head>
<body>
 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p>
 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p>
</body>
</html>

Nach dem Login kopieren

1. getElementById

1. Definieren Sie zunächst die Variable var contentId = document.getElementById("contentId");

2. Geben Sie dann das Objekt contentId aus und geben Sie das Elementobjekt mit der ID contentId (

Siehe das Bild unten:

js常用DOM方法详解

2. getElementsByTagName

1. Definieren Sie zuerst die Variable var contentTag = document.getElementsByTagName("p");

2. Dann gebe ich contentTag aus, das insgesamt HTMLCollection [ , ] zurückgibt Name.

3. Fahren Sie mit contentTag[0] fort und geben Sie

contentTag[ aus 1] Ausgabe

js常用DOM方法详解

Daraus können wir sehen getElementsByTagName Was zurückgegeben wird, ist ein Array!

3. getElementsByClassName

1. var contentClass = document.getElementsByClassName("contentClass");

2. contentClass-Ausgabe HTMLCollection [ Ein Array von Elementobjekten, auch wenn nur eines vorhanden ist.

3. contentClass[0] Ausgabe

js常用DOM方法详解

Wir verwenden auch häufig die Methoden getAttribute, setAttribute, ChildNodes, nodeType, nodeValue, firstChild und lastChild, um einige Informationen zu erhalten.

4. Verwenden Sie getAttribute und setAttribute, um Attribute abzurufen bzw. festzulegen:

js常用DOM方法详解

Nach dem Ändern des Stilattributs:

js常用DOM方法详解

5. Dann sind dies die ChildNOdes:

js常用DOM方法详解

Das heißt,

Es gibt ein Zeilenumbruchzeichen
und der Browser behandelt es bei der Suche nach untergeordneten Knoten als Textknoten. Aus der Abbildung ist auch ersichtlich, dass childNodes ebenfalls ein Array zurückgibt.

Was ist, wenn es ist?

js常用DOM方法详解

Es gibt 12 Arten von NodeType-Werten, und es gibt drei häufig verwendete: 1 steht für einen Elementknoten, 2 steht für einen Attributknoten und 3 steht für einen Textknoten.

nodeValue kann nicht nur den Wert des Textknotens abrufen, sondern auch den Wert des Textknotens ändern.

js常用DOM方法详解

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann Chinesische Website!

Ausführlichere Erläuterungen zu häufig verwendeten DOM-Methoden in js finden Sie auf der chinesischen PHP-Website!