js操作DOM物件實例詳解

程式調試，chrome開發人員工具，DOM操作，節點和節點間的關係，節點信息，操作節點，獲取元素

一.單字部分

①alert警告②prompt提示③parentNode父節點④childNode子節點⑤firstChild第一個子節點

⑥lastChild最後一個子節點⑦nextSibling下一個同級⑧previousSibling上一個同級

 vert 。先前新增

cloneNode複製節點   removeNode 刪除節點   replaceNode取代節點

二.預習部分

##1.常見的JavaScript程式偵錯

#Chrome偵錯工具和alert()方法

2.簡述DOM的分類與節點間關係

DOM-CORE(核心)，HTML-DOM 和CSS-DOM

有子父關係同級關係

3.簡述如何以層次關係存取節點

透過節點的屬性：

parentNode，childNode，firstChild等......

4.簡述style屬性和className在改變樣式有什麼區別

style透過應用程式樣式的文檔元素存取style對象，classname屬性可設定或傳回元素的class樣式

三.練習部分（原文需要資源或原始碼的可私聊可扣扣）

上傳不了檔案 只能上傳js程式碼了 

1.存取當購物車頁面節點

//点击结算的时候给下面添加详情
//结算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.製作課工場論壇發文

 //页面就不发了 发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.製作關閉按鈕的廣告

9fb5693c28ff13a587317a4ba5395da22cacc6d41bbb37262a98f745aa00fbf0 ##  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); });

acf82329412a1eb3ac997c63869bd617
	# ##

 

});

 

2cacc6d41bbb37262a98f745aa00fbf0

#################################################################################### ####### ###### 四.總結部分######1.在HTML DOM中找出節點的標準方法是getElement系列方法，也可以使用parentNode，firstChild，nextSibling等.. .######2.在Core DOM中存取和設定節點屬性值的標準方法是getAttribute()和setAttribute()######3.改變樣式的兩種方法style屬性和className屬性 # ##

以上是js操作DOM物件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！