js節(jié)點(diǎn)和描述節(jié)點(diǎn)之間的關(guān)系及應(yīng)用
節(jié)點(diǎn) : Node(頁面中所有東西都是節(jié)點(diǎn))
節(jié)點(diǎn)集合： NodeList （getElementsByName / querySelectorAll獲取的都是節(jié)點(diǎn)集合）
- 元素節(jié)點(diǎn)（元素標(biāo)簽）
- nodeType： 1
- nodeName： 大寫的標(biāo)簽名
- nodeValue: null
- 文本節(jié)點(diǎn)
- nodeType： 3
- nodeName： ’#Text’
- nodeValue: 文本內(nèi)容
- 注釋節(jié)點(diǎn)
- nodeType：8
- nodeName： ’#comment’
- nodeValue: 注釋內(nèi)容
- 文檔節(jié)點(diǎn)
- nodeType： 9
- nodeName： ’#document’
- nodeValue: null
- ……
描述這些節(jié)點(diǎn)之間的關(guān)系屬性
- parent：獲取父級節(jié)點(diǎn)
- childNodes ： 獲取所有子節(jié)點(diǎn)
- firstChild:獲取第一個(gè)子節(jié)點(diǎn)
- lastChild：獲取最后一個(gè)子節(jié)點(diǎn)
- children： 獲取所有的元素子節(jié)點(diǎn)（子元素標(biāo)簽）
- firstElementChild/lastElementChild:獲取第一個(gè)/最后一個(gè)元素子節(jié)點(diǎn)（不兼容ie678）
- previousSibling:獲取上一個(gè)兄弟節(jié)點(diǎn)
- previousElementSibling/nextElementSibling:獲取上/下一個(gè)兄弟元素節(jié)點(diǎn)（不兼容ie678）
節(jié)點(diǎn)的應(yīng)用
<ul id="box">
<li>git,npm操作</li>
<li>面相對象和原型</li>
<li>閉包作用域樱报，堆棧內(nèi)存處理</li>
<li>es6從入門到放棄</li>
<li>Dom事件</li>
</ul>
<script>
let box=document.getElementById("box")//<li>git,npm操作</li>
console.log(box.firstElementChild);//
console.log(box.firstElementChild.nextElementSibling)//<li>面相對象和原型</li>
</script>
封裝元素子節(jié)點(diǎn)children
//封裝元素子節(jié)點(diǎn)children
function children(content){
//現(xiàn)獲取所有子節(jié)點(diǎn)
let res=[],
nodeList=content.childNodes;
//循環(huán)所有子節(jié)點(diǎn)
for (let i = 0; i < array.length; i++) {
var item=NodeList;
item.nodeType===1?res.push(item):null
}
return res;
封裝獲取上一個(gè)兄弟元素節(jié)點(diǎn)
//獲取上一個(gè)兄弟元素節(jié)點(diǎn)
function prev(content){
//先找上一個(gè)兄弟節(jié)點(diǎn)
var pre=content.previousSibling;
while(pre.nodeType !== 1){
pre=pre.previousSibling;
}
return pre
}
