Explication détaillée de la manipulation js des instances d'objets DOM

Débogage du programme, outils de développement Chrome, opérations DOM, relations entre les nœuds, informations sur les nœuds, nœuds d'exploitation, obtention d'éléments

1 partie Word

①avertissement d'alerte②invite③parentNode Nœud parent ④childNode nœud enfant ⑤firstChild. premier nœud enfant

⑥lastChild dernier nœud enfant ⑦nextSibling prochain frère ⑧previousSibling frère précédent

⑨createElement Créer un élément de nœud appendChild ajouter un nœud insertBefore. . Ajouté avant

cloneNode copy node removeNode delete node replaceNode replace node

2 Partie d'aperçu

1 Débogage du programme JavaScript commun

Outils de débogage Chrome et alerte. () méthode

2. Décrivez brièvement la classification du DOM et la relation entre les nœuds

DOM-CORE (core), HTML-DOM et CSS-DOM

ont des enfants. et parents Relation relation fraternelle

3. Décrivez brièvement comment accéder aux nœuds par relation hiérarchique

via les attributs du nœud :

parentNode, childNode, firstChild, etc. .

4. Décrivez brièvement la différence entre l'attribut style et className dans la modification des styles

style accède à l'objet style via l'élément de document auquel l'attribut classname peut définir ou renvoyer. le style de classe de l'élément

3. Partie exercice (le texte original a besoin de ressources ou de code source, vous pouvez discuter en privé et le déduire)

Impossible de télécharger des fichiers, seul le code js peut être téléchargé

1. Visitez le nœud de la page du panier d'achat de Dangdang

//点击结算的时候给下面添加详情
//结算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("删除成功!");}}

3. Postez sur le forum de la classe de production

 //页面就不发了 发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.

4. Partie récapitulative

1 La méthode standard pour trouver des nœuds dans le DOM HTML est la méthode de la série getElement, vous pouvez également utiliser parentNode, firstChild, nextSibling, etc...

2. Accès et paramètres dans Core DOM Les méthodes standard des valeurs d'attribut de nœud sont getAttribute() et setAttribute()

3. attribut style style et attribut className

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!