節點操作

1 節點操作

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);

案例：

​權限選擇

2 節點層級

重點講父子屬性，兄弟屬性畫圖講解

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

3注意

childNodes和children的區別，childNodes獲取的是子節點，children獲取的是子元素

nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素

nextElementSibling和previousElementSibling有兼容性問題，IE9以後才支持

4總結

4.1節點操作，方法

appendChild()

insertBefore()

removeChild()

replaceChild()

4.2節點層次，屬性

parentNode

childNodes

children

nextSibling/previousSibling

firstChild/lastChild