accp8.0轉換教材第7章JavaScript操作DOM對象理解與練習

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

一.單詞部分

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

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

⑨createElement創建節點元素    appendChild附加節點    insertBefore在。。之前添加

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樣式

三.練習部分（原文http://www.cnblogs.com/a782126844/需要資源或源碼的可私聊可扣扣）

上傳不了文件  只能上傳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 div=document.getElementById("ins");//這里我給它的div設置了一個id方便拿到
div.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(); //ri
var time=year+"-"+month+"-"+day;
titleH1.innerHTML=title;
titMu.innerHTML="<br><br>"+"板塊："+mu+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;發表時間："+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.制作帶關閉按鈕的廣告

<script src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	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);
	});
	});
	</script>

 

 四.總結部分

1.在HTML DOM中查找節點的標准方法是getElement系列方法，也可以使用parentNode，firstChild，nextSibling等...

2.在Core DOM中訪問和設置節點屬性值的標准方法是getAttribute()和setAttribute()

3.改變樣式的兩種方法style屬性和className屬性

 

 

歡迎提問，歡迎指錯，歡迎討論學習信息 有需要的私聊 發布評論即可 都能回復的

  原文在博客園http://www.cnblogs.com/a782126844/有需要可以聯系扣扣：2265682997