Detaillierte Erläuterung des Beispielcodes von Javascript DOM

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Javascript DOM und zugehörige Informationen zum Beispielcode vor. Freunde in Not können sich auf

Javascript DOM-Zusammenfassung

beziehen

Ich dachte immer, dass DOM (DocumentObjectModel) der einfachste Teil von JS ist. Es ist nicht zu leugnen, dass es tatsächlich sehr einfach ist, da der Denkmodus von DOM etwas festgelegt ist und Sie sich nur einige feste Methoden merken müssen, sodass DOM als Ausgangspunkt für alle JS bezeichnet werden kann (hier bezieht es sich auf den Client). js).

Als ich kürzlich einige Übungen machte, die für DOM nützlich waren, stellte ich fest, dass mein DOM-Wissen sehr fragmentiert war (ich dachte immer, ich hätte es gut verstanden). Viele Freunde denken das vielleicht DOM heißt einfach. Rufen Sie ein paar Methoden auf, oder ich verwende jQuery direkt, ohne die Details des DOM überhaupt berücksichtigen zu müssen. Ja, das stimmt. Die Kapselung von DOM durch jQuery ist beispiellos, aber genau wie beim Erwachsenwerden muss man laufen können, bevor man laufen kann. Daher denke ich, dass man ein detaillierteres Verständnis von DOM haben muss, deshalb habe ich Folgendes über DOM zusammengefasst Nutzungsmethoden.

In der W3C Zusammenfassung der DOM-Spezifikationen gibt es einige, die sehr häufig verwendet werden, und einige, die nicht sehr nützlich sind. Hier besprechen wir hauptsächlich einige häufig verwendete DOM-Operationen (im Zusammenhang mit DOM Die Grundkonzepte von werden hier nicht vorgestellt):

Knotenebene

Die sogenannte Knotenebene bezieht sich auf Das HTML-Dokument, und die Beziehung zwischen Knoten bildet eine Hierarchie (tatsächlich kann man sie sich als Baumstruktur vorstellen). Eine NODE-Schnittstelle ist in der DOM-Level-1-Spezifikation des W3C definiert. Diese Schnittstelle verfügt über einige Methoden, die sehr nützlich sind:

Node.ELEMENT_NODE; (Elementknoten)

Node.TEXT_NODE (Textknoten)

　 Node.DOCUMENT_NODE (Dokumentknoten)

Und jeder Knoten hat sein eigenes Knotentyp-Flag, das das NodeType-Attribut ist, z. B. nodeType des Elements node == ' 1'; nodeType of text node == '3'; nodeType of document node == '9';

　1. Document node

Der Dokumentknoten ist in ein Dokument Es wird durch das Dokumentobjekt dargestellt und seine grundlegenden Eigenschaften sind wie folgt:

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点)

Tipp eins (untergeordneter Knoten des Dokuments):

1.document.documentElement kann erhalten Das HTML-Objekt kann auch über Document.childNodes[0] und document.firstchild abgerufen werden. documentElement bietet jedoch einen schnelleren und direkteren Zugriff auf Elemente.

Tipp zwei (dokumentbezogene Informationen):

1. Holen Sie sich den Dokumenttitel: document.title;

2. Holen Sie sich die vollständige URL: document.URL;

　3. Holen Sie sich den Domainnamen (IP): document.domain;

　4. Holen Sie sich die URL der Seite: document.referrer;

Tipp drei (Dokumentsuchelement) :

1. Übergeben Sie die ID: document.getElementById("xxx"); Wenn mehrere identische IDs vorhanden sind, wird das erste Element mit dieser ID abgerufen.

　2. Durch tagName: document.getElementsByTagName("xxx"); Gibt die Sammlung von Elementen mit dem Tag-Namen „xxx“ zurück!

　3. Durch name: document.getElementByName();

Das Dokumentobjekt ist sehr einfach zu verstehen und auch die Kompatibilität ist relativ weit fortgeschritten.

2. Elementknoten

Der Elementknoten bietet Zugriff auf Element-Tag-Namen, Unterknoten und Attribute. Seine grundlegenden Eigenschaften sind wie folgt:

var ele = document.getElementById("element"); //通过document取到一个标签对象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的标签名 
console.log(ele.nodeValue); //永远返回null!

Tipp eins (HTML-Element):

　<p id="myp" class="bd" title="Body text" lang="en" dir="ltr"></p>
　　　　var p = document.getElementById("p");
　　　　1. console.log(p.id); // "myp"
　　　　2. console.log(p.className); // "bd"
　　　　3. console.log(p.title); // "Body text"
　　　　4. console.log(p.lang); // "en"
　　　　5. console.log(p.dir); // "ltr"

Tipp zwei (Attribute abrufen, festlegen und löschen):

　1.p.getAttribute("id"); // "myp"
　　　　2.p.setAttribuye("id","yourp"); // id已变动
　　　　3.p.removeAttribute("id"); //id已删除

Es ist zu beachten: In IE7 und niedrigeren Versionen gibt es einige abnormale Verhaltensweisen in den drei Methoden. Die Klassen- und Stilattribute werden durch set festgelegt, insbesondere wenn das

-Ereignis das <🎜 behandelt > Programm, es gibt kein Der Effekt ist der gleiche für get. Daher sollten in der allgemeinen Entwicklung die oben genannten drei Methoden vermieden werden und es wird empfohlen, Merkmale durch Attribute festzulegen. Tipp drei (untergeordneter Knoten des Elements):

Worauf ich mich konzentrieren möchte, ist hier der folgende Code:

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//很明显mL对象有三个元素节点，我们也知道用childNodes属性去找到节点数，然而陷阱随之而来 
 
console.log(mL.childNodes); // 7 
//?!怎么会有7个? 
 
//原因在于childNodes中不仅包含了元素节点，还有4个文本节点。因此需要过滤 
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ // 利用元素节点的特性 
     // .... 
   }   
}<br>//最好的方法可以这么做<br>//如果元素对象内部标签名是一样的<br>var items = ml.getElementsByTagName("li"); //能得到三个li节点对象 
　　

3. Text Knoten

Textknoten enthalten reinen Textinhalt, der wörtlich interpretiert werden kann. Reiner Text kann maskierte HTML-Zeichen, aber keine HTML-Codes enthalten. Die grundlegenden Eigenschaften von Textknoten sind wie folgt:

Tipp eins:

<p id="myp">123</p> 
 
var myp = document.getElementById("myp") //取到元素节点 
var tx = myp.childNodes[0] //前面也提过childNodes的特性，这次取到了文本节点 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本节点的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的 
 
//所以其父节点显然是个元素节点.

Zwei Methoden zum Erstellen von Textknoten: document.createTextNode(), document.createText();

Nach der Erstellung wird es nicht direkt in das Dokument eingebettet und muss referenziert werden.

Auf diese Weise erscheint am Ende des Texts ein Tag wie

123

Persönlich denke ich, dass DOM definitiv der Einstiegspunkt für das Erlernen von js ist, aber es dauert auch lange, es zu polieren. Ich habe das DOM nicht weniger als dreimal gelesen, es ist nur die DOM-Level-1-Spezifikation und es gibt jedes Mal etwas Neues. Wenn Sie DOM lernen, müssen Sie auf einige Fallstricke achten und mehr Zeit damit verbringen, darüber nachzudenken.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes von Javascript DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!