Detailed explanation of js manipulation of DOM object instances-JS Tutorial-php.cn

Detailed explanation of js manipulation of DOM object instances

零下一度

Release： 2017-07-02 09:19:26

Original

2584 people have browsed it

Program debugging, chrome developer tools, DOM operations, relationships between nodes, node information, operating nodes, getting elements

1. Word part

①alert warning②prompt prompt③parentNode Parent node ④childNode child node ⑤firstChild first child node

⑥lastChild last child node ⑦nextSibling next sibling ⑧previousSibling previous sibling

⑨createElement Create node element appendChild additional node insertBefore. . Add before

cloneNode copy node removeNode delete node replaceNode replace node

2. Preview part

1. Common JavaScript program debugging

Chrome debugging tools and alert() method

2. Briefly describe the classification of DOM and the relationship between nodes

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

have children and parents Relationship sibling relationship

3. Briefly describe how to access nodes according to hierarchical relationships

Through the attributes of nodes:

parentNode, childNode, firstChild, etc...

4. Briefly describe the difference between the style attribute and className in changing the style.

style accesses the style object through the document element to which the style is applied. The classname attribute can set or return the class style of the element.

3. Exercise part (the original text needs resources or source code, you can chat privately and deduct it)

Cannot upload files, only js code can be uploaded

1. Visit Dangdang shopping cart page node

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

Copy after login

3. Post in the workshop forum

 //页面就不发了 发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);}

Copy after login

4. Create an advertisement with a close button

##

4. Summary part

1. The standard method to find nodes in HTML DOM is the getElement series of methods. You can also use parentNode, firstChild, nextSibling, etc.. .

2. The standard methods to access and set node attribute values in Core DOM are getAttribute() and setAttribute()

3. Two methods to change the style style attribute and className attribute

The above is the detailed content of Detailed explanation of js manipulation of DOM object instances. For more information, please follow other related articles on the PHP Chinese website!