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

bf72dbaa32d2bb45ca3e6b511796dfeb2cacc6d41bbb37262a98f745aa00fbf0
	223099138ae13f1f83dd7e1a6ac88faf
	function adv_close(){
	var fl=document.getElementById("float");
	var fl1=document.getElementById("close");
	fl.style.display="none";
	fl1.style.display="none";
	};
	//js太麻烦。。。。。。。
	//还是jq简单
	$(function($){
	//随滚动条滚动
	$(window).scroll(function(){
	var st = $(this).scrollTop()+50;
	$("#float").css("top",st);
	$("#close").css("top",st);
	});
	});
	2cacc6d41bbb37262a98f745aa00fbf0

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!