嗯，大過年的上次更新應該還是在，大年30前一天，說好的一天更一篇，感覺食言了，雖然沒有更，但是，每天還是堅持在學習的，所以今天的任務就是把這幾天學的都發上來。 博客，我覺得不僅僅是交流知識的地方，我寧願把它寫成我的生活日記。有差的，歡迎拍磚。 好了，進入正題吧。 DOM操作，我覺得可以歸結成三個，一 ...
嗯，大過年的上次更新應該還是在，大年30前一天，說好的一天更一篇，感覺食言了，雖然沒有更，但是，每天還是堅持在學習的，所以今天的任務就是把這幾天學的都發上來。
博客，我覺得不僅僅是交流知識的地方，我寧願把它寫成我的生活日記。有差的，歡迎拍磚。
好了，進入正題吧。
DOM操作，我覺得可以歸結成三個，一個標簽節點，一個屬性節點，一個文本節點。
這裡的
li 就是標簽節點；
alt就是屬性節點；
第一個是文本節點（不是alt裡面的）；
接下來我將分別用兩個例子來解釋，這三個點。
我先把html放上來：
<body> <ul> <li alt="第一個">第一個</li> <li>第二個<br />換行了</li> <li>第三個</li> </ul> <!--<uL id="father"><li>第四個</li><li>第五個</li><li id="tt">第六個</li></uL> 這裡我把疊起來，跟下麵等會的操作是有區別的--> <uL id="father"> <li>第四個</li> <li>第五個</li> <li id="tt">第六個</li> </uL> <button id="dd">點擊獲取第六個內容</button> </body>
標簽節點：
window.onload = function(){
var a = document.getElementById("dd");/*這裡就是獲取標簽節點，獲取button按鈕，我這裡是通過Id，還有其他很多方式，註意一點其他的是類數組*/
a.onclick = function(){/*點擊事件*/
var d = document.getElementById("tt").childNodes[0].nodeValue;/*得到含有id=“tt”的標簽,然後他的位元組點，看html，只有“第六個”這幾個字，這就是文本節點，nodeValue這個就是其所含的內容*/
alert(d);/*輸出，註意我這裡文本節點稍微帶了一下*/
}
var por = document.getElementsByTagName("li")/*這是通過標簽選擇器，得到li標簽數組，賦值給por*/
alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*輸出，得到，por[]數組長度，第一個li標簽的名字，第二個li的文本節點的內容*/
屬性節點,文本節點:
/*得到節點*/
var first = document.getElementsByTagName("li")[0];/*標簽選擇器得到第一個li標簽*/ console.log(first.getAttribute("alt"));/*getAttribute（）方法就是得到目標對象的（裡面屬性）的值*/ /*創建節點*/ var Pcreate = document.createElement("p");/*創建一個p標簽*/ var Textcreate = document.createTextNode("我創建了文本節點");/*createTextNode創建文本節點，並賦予內容*/ var Attcreate = document.createAttribute("style");/*createAttribute創建屬性,創建的屬性是style*/ Attcreate.value = "color:red";/*賦予屬性值*/ Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把創建的屬性節點放入創建的p標簽里*/ Pcreate.appendChild(Textcreate);/*appendchild把創建的文本節點放入p標簽里*/ document.body.appendChild(Pcreate);/*然後把p標簽放入到body*/
