Detaillierte Erläuterung der js-Manipulation von DOM-Objektinstanzen

Programm-Debugging, Chrome-Entwicklertools, DOM-Operationen, Beziehungen zwischen Knoten, Knoteninformationen, Betriebsknoten, Abrufen von Elementen

1 erster untergeordneter Knoten

⑥lastChild letzter untergeordneter Knoten ⑦nextSibling nächstes Geschwister ⑧ previousSibling vorheriges Geschwister

⑨createElement Knotenelement erstellen appendChild Append-Knoten insertBefore. . Vorher hinzugefügt

Klonenknoten kopieren, Knoten entfernen, Knoten ersetzen

2. Vorschauteil

1. Chrome-Debugging-Tools und Warnung ()-Methode

2. Beschreiben Sie kurz die Klassifizierung von DOM und die Beziehung zwischen Knoten

DOM-CORE (Kern), HTML-DOM und CSS-DOM

haben Kinder und Eltern Beziehung Geschwisterbeziehung

3. Beschreiben Sie kurz, wie Sie über die Attribute des Knotens auf Knoten über die hierarchische Beziehung

zugreifen können:

parentNode, childNode, firstChild usw. .

4. Beschreiben Sie kurz den Unterschied zwischen Stilattribut und Klassenname beim Ändern von Stilen.

Stil greift über das Dokumentelement auf das Stilobjekt zu, auf das das Klassennamenattribut angewendet werden kann der Klassenstil des Elements

3. Übungsteil (der Originaltext benötigt Ressourcen oder Quellcode, Sie können ihn privat chatten)

Dateien können nicht hochgeladen werden, nur JS-Code kann hochgeladen werden

1. Besuchen Sie den Dangdang-Warenkorb-Seitenknoten

3. Posten Sie im Produktionsklassenforum

//点击结算的时候给下面添加详情
//结算function accounts(){var titleH1=document.createElement("p");var price0=document.getElementById("price0").innerHTML;var price1=document.getElementById("price1").innerHTML;var sum=document.getElementById("totalPrice").innerHTML;
titleH1="您本次购买的商品信息如下："+"<br>"+"白岩松：白说："+price0+"<br>岛上书店:"+price1+"<br>商品总计："+sum;var zon=titleH1;var p=document.getElementById("ins");//这里我给它的p设置了一个id方便拿到p.innerHTML=zon;}total();
2.操作当当网删除节点
//js文件
function del(){var flag=confirm("您确定要删除商品吗?");if(flag==true){var parent=document.getElementById("cartList"); var one=document.getElementById("price0").parentNode;one.parentNode.removeChild(one);total();alert("删除成功!");}}

4

 //页面就不发了 发js实现原理
// JavaScript Document
//发帖显示function sub(){var po=document.getElementById("post");po.style.display="block";
}//帖子提交function subTi(){var num=Math.floor(Math.random()*4+1); 　
//输出1～4之间的随机整数var po=document.getElementById("post");po.style.display="none";var img=document.createElement("img");var titleH1=document.createElement("h1");var titMu=document.createElement("span");var qy=document.getElementById("qq");var title=document.getElementById("title").value;var mu=document.getElementById("muk").value;var now = new Date();            var year = now.getFullYear();       //年           var month = now.getMonth() + 1;     //月           var day = now.getDate();  //rivar time=year+"-"+month+"-"+day;titleH1.innerHTML=title;titMu.innerHTML="<br><br>"+"板块："+mu+"     发表时间："+time;if(num==1){img.setAttribute("src","images/tou01.jpg");}else if(num==2){img.setAttribute("src","images/tou02.jpg");}else if(num==3){img.setAttribute("src","images/tou03.jpg");}else if(num==4){img.setAttribute("src","images/tou04.jpg");}var aa=document.getElementById("ull");//添加li　　　　var li = document.createElement("li");　　　　//设置 li 属性　　　　li.setAttribute("id", "newli");li.appendChild(img);　　　　li.appendChild(titleH1);  li.appendChild(titMu);　　 　aa.appendChild(li);//li.insertBefore(qy,li);}

4. Zusammenfassungsteil

1 Die Standardmethode zum Suchen von Knoten im HTML-DOM ist die getElement-Serienmethode. Sie können auch parentNode, firstChild, verwenden. nextSibling usw.

2. Zugriff und Einstellungen im Core DOM Die Standardmethoden für Knotenattributwerte sind getAttribute() und setAttribute()

3 style style-Attribut und className-Attribut

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