Detaillierte Einführung in DOM in JavaScript (Codebeispiel)

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) über DOM in JavaScript. Ich hoffe, dass er für Sie hilfreich ist. helfen.

1. DOM: Dokumentobjektmodell (Dokument). Stellen Sie sich die gesamte HTML-Seite als einen umgedrehten Baum vor. HTML ist der Wurzelknoten des Baums, und Kopf und Körper sind die untergeordneten Knoten des Baums. Das DOM-Modell erfordert, dass jedes Tag-Paar in HTML als Knotenobjekt behandelt wird, um zu funktionieren

2. Die Rolle von DOM:

JavaScript kann den Inhalt der Seite ändern. Alle HTML-Elemente

JavaScript kann alle HTML-Attribute auf der Seite ändern.
JavaScript kann alle CSS-Stile auf der Seite ändern.
JavaScript kann auf alle Ereignisse reagieren auf der Seite

3.DOM-Suche nach Elementknotenobjekten auf der Seite:

3.1: Suche nach einem Elementknotenobjekt auf der Seite anhand der ID
z. B.:

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2: Suche nach Tag-Namen. Die Sammlung oder das Array von Elementknoten auf der Seite
z. B.:

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合，输出每个对象的内容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3: Suchen Sie die Sammlung oder das Array von Elementknoten auf der Seite über den Klassennamen
zB:

var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合，输出每个对象的内容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4: Suchen Sie über das Namensattribut die Elementknotensammlung oder das Array
zB:

var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合，输出每个对象的value属性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4. Der Inhalt des DOM-Operationsknotenobjekts (Textinhalt in der Beschriftung). , Unterbezeichnung, Unterbezeichnungstext...):
4.1: Knoteninhalt abrufen: Knotenobjekt.innerHTML
z. B.:

alert(ob1.innerHTML);

4.2: Knoteninhalt ändern: Knotenobjekt.innerHTML= "neuer Wert";

zB:

ob1.innerHTML="哈哈";

4.3: Knoteninhalt löschen:
zB:

ob1.innerHTML="";

5.DOM verwaltet den Textinhalt des Knotens Objekte (Text in Beschriftungen und Text in Unterbeschriftungen...):
5.1: Holen Sie sich den Knotentextinhalt (Text in der Beschriftung und Text in der Unterbeschriftung): node object.innerText
z. B.:

alert(ob1.innerText);

5.2: Ändern Sie den Inhalt des Knotentextes (alle Inhalte in der Beschriftung sind „Ändern“): node object.innerText = „new value“; z. B.:

ob1.innerText="呵呵";

6.DOM-Operationsknoten Objektattribute:

6.1: Knotenobjektattribute abrufen: Knotenobjekt.Attributname
z. B.:

 alert(ob2.src);

6.2: Knotenobjektattribute ändern: Knotenobjekt.Attributname="Wert"; >zB:

 ob2.src="img/img-2.jpg";

6.3: Knotenobjektattribute löschen: node Object.removeAttribute("Attribute name");

zB:

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7. DOM-Operationsknotenobjektstil:

7.1: Legen Sie den Stil des Knotenobjekts fest: Node object.style.Style name=" Stilwert";

z. B.:

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2: Rufen Sie den Stil des Knotenobjekts ab: node object.style .Stilname

zB:

alert(ob1.style.color);

8.1: onload: Seitenladeereignis.

8.2: onclick: Mausklickereignis.

8.3: onchange: Ereignis ändern.
8.4: onblur: Cursor verlässt Ereignis.
8.5: onfocus: Cursor-Ereignis abrufen.
8.6: onmouseover: Mouse-Passing-Ereignis.
8.7: onmouseout: Maus verlässt Ereignis.

9.DOM-Operationsknotenobjekt
9.1: Knotenobjekt erstellen:

9.1.1: Etikettenknotenobjekt erstellen: document.createElement("label name");

z. B.:

//创建节点对象
var node1=document.createElement("p");

eg:

//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好<span>中国</span>";

9.1.2: Erstellen Sie ein Textobjekt: document.createTextNode("text content");

eg:

//创建文本对象
var node1text=document.createTextNode("这是一个段落");

9.2: Fügen Sie einen Knoten hinzu Objekt: Knoten object.appendChild (untergeordneter Knoten);
z. B.:

//将节点对象添加body中
document.getElementById("d1").appendChild(node1);

//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";

9.3: Knotenobjekt löschen: übergeordneter Knoten object.removeChild (untergeordnetes Knotenobjekt);
z. B.:

//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象，只有谷歌，火狐
childNode.remove();

9.4: Kopieren Sie das Knotenobjekt: node object.cloneNode(true);
zB:

//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制，false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5: Ersetzen Sie den untergeordneten Knoten im Element: parent node object.replaceChild(newnode,oldnode);

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in DOM in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!