suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung häufig verwendeter DOM-Methoden in js

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

高洛峰
高洛峰Original
2017-02-06 09:16:061538Durchsuche

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>

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 (9f908e92c515b942ecb875772ae2d4e1 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 [ 39ae2a42268023ea5ca018cf390b60c5, b39175b47eb4f25ca688689d3f990331] zurückgibt Name.

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

contentTag[ aus 1] Ausgabe7f29bff5ebaec2b2412c08e2a48f6eff

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 [ b39175b47eb4f25ca688689d3f990331 Ein Array von Elementobjekten, auch wenn nur eines vorhanden ist.

3. contentClass[0] Ausgabe7f29bff5ebaec2b2412c08e2a48f6eff

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, e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 Es gibt ein Zeilenumbruchzeichen 0c6dc11e160d3b678d68754cc175188a 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 39ae2a42268023ea5ca018cf390b60c5 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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-objektorientierte GrundlagenNächster Artikel：JavaScript-objektorientierte Grundlagen

In Verbindung stehende Artikel

Mehr sehen