alt="">花野真衣li>
alt="">鈴木千夏li>
alt="">井上合香li>
alt="">酒井美黛li>
ul>
//頁面中最重要的三個節點型別: 元素,屬性,文字,
//分別對應的整數是1,2,3
//主要涉及四個: childnodes, nodetype,nodename,nodevalue
//每個節點都有乙個childnodes屬性,它是乙個nodelist陣列物件,儲存著該節點下面的甩的子節點
var list = document.getelementsbytagname('ul')[0]
//list就是乙個節點,檢視一下它的childnodes屬性
console.log(list.haschildnodes()) //查詢該節點下面是否有子節點
console.log(list.childnodes.length) //檢視有多少個節點
console.log(list.childnodes)
//你會發現他把回車換行符也當成了乙個節點
//每個節點物件還有乙個nodetype屬性,可以檢視節點的型別
console.log(list.childnodes[0].nodetype) //3: 文字節點
console.log(list.childnodes[1].nodetype) //1: 元素節點
//使用childnodes上的乙個方法item(index)也可以獲取到子節點
console.log(list.childnodes.item(1).nodetype) //1: 元素節點
//通常我們只對元素節點感興趣,所以需要對節點做乙個判斷
var childs = list.childnodes
var element = //建立乙個空的陣列容器,用來接收新資料
for (var i=0; i< childs.length; i++)
}console.log(element) //現在就把所有的元素節點擊了出來
//因為選擇父節點下面的元素節點很重要也很常用,所以提供乙個快捷方法
console.log(element[0].nodename) //返回大寫字母的標籤名/元素物件名
var h3 = document.getelementsbytagname('h3')[0]
console.log(h3.firstchild.nodetype)
//檢視節點的值,只有文字節點也可以檢視nodevalue
console.log(h3.firstchild.nodevalue) //我喜歡的明星
//之前還學習建立乙個節點
var li = document.createelement('li')
li.innerhtml = '我愛php中文網'
//li的第乙個子節點才是img
element[0].childnodes[0].setattribute('class','item')
element[0].firstchild.setattribute('class','item')
//最後乙個列表的第乙個子節點img，設定樣式
element[element.length-1].firstchild.setattribute('class','item')
//全部設定,用迴圈來實現
for (var i=0; i'class','item')
//將li元素的文字設定為紅色,選擇當前li的第乙個子節點的父元素
element[i].firstchild.parentnode.setattribute('class','red')
element[i].setattribute('class','red') //這樣寫是一樣的，上面是故意繞你學新東西
}script>
DOM節點型別說明
全球資訊網聯盟 w3c 定義html dom 標準節點有以下幾種 型別 值 說明 element node 1 元素節點 attribute node 2 屬性節點 text node 3 文字節點 cdata section node 4 cdata 區段 entity reference nod...
DOM節點型別說明
全球資訊網聯盟 w3c 定義html dom 標準節點有以下幾種 element node 1 元素節點 attribute node 2 屬性節點 text node 3 文字節點 cdata section node 4 cdata 區段 entity reference node 5 實體引用...
DOM節點型別說明
全球資訊網聯盟 w3c 定義html dom 標準節點有以下幾種 型別 值 說明 element node 1 元素節點 attribute node 2 屬性節點 text node 3 文字節點 cdata section node 4 cdata 區段 entity reference nod...