節點和節點操作

節點:

一般的,節點擁有nodetype(節點型別). nodename(節點名稱)和nodevalue(節點值)這三個基本屬性.

頁面中所有元素都是節點

元素節點 nodetype 為1

屬性節點 nodetype 為2

文字節點 nodetype 為3 (文字節點包括文字. 空格. 換行等)

利用dom樹可以把節點劃分為不同的層級關係,常見的是父子兄層級關係

1.父級節點 node.parentnode

返回的是最近的乙個父節點; 如果沒有父節點則返回 null

2.子節點

(1)parentnode.childnodes (標準)

parentnode.childnodes 返回包含指定節點的子節點的集合,該集合為即時更新的集合.

注意: 返回值裡面包含了所有的子節點, 包括元素節點, 文字節點等.

如果只想獲取裡面的元素節點,則需專門處理,不提倡使用childnodes.

var ul=document.queryselector('ul');

console.log(ul.childnodes);

console.log(ul.childnodes[0].nodetype)// 返回節點型別,值為3 因為ul的子節點還有空格,它的nodetype是3

console.log(ul.childnodes[1].nodetype)// 返回節點型別,值為1 ul的子節點li是元素節點, 它的nodetype是1

for (var i=0; i< ul.childnodes.length; i++)

}(2) node.children 獲取所有的子元素節點 也是實際開發常用的. 得到的是乙個偽陣列

var ul=document.queryselector('ul');

var li= ul.children;

console.log(li[0]); // 列印第乙個ul的第乙個子元素

**例項:

//兄弟節點    (不常用)

var div = document.queryselector('div')
//nextsibling 下乙個兄弟節點 包括文字節點和元素節點 
console.log(div.nextsibling);
console.log(div.previoussibling)
console.log(div.nextelementsibling);
console.log(div.previouselementsibling);
//這個方法依舊存在相容性問題
//解決辦法: 需要自己封裝乙個相容性函式

ul .n**

.n** li

a:hover

.n** ul

.n** ul li

@我<

@我<

@我<

i++)

查詢節點 操作節點 刪除節點

insertbefore 在指定的已有子節點之前插入新的子節點 ul.insertbefore linew,li2 replacechild 該方法用新節點替換某個子節點 兩個引數 replacechild 要插入的節點，被替換的節點 返回被替換的節點 document.body.newnode v...

DOM簡介和節點操作

nodetype值 節點型別 1元素節點，例如和 3文字節點 8注釋節點 9document 節點 10dtd 節點 方法功能 相容性document.getelementbyid 通過id得到元素 ie6document.getelementsbytagname 通過標籤名得到元素陣列 ie6do...

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...