DOM-BOM-EVENT（3）

3.Node常用属性

childNodes 获取所有子节点

<div id="wrap">
    <div>1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
    <div>5555</div>
</div>
<script>
    var oWrap = document.getElementById("wrap")
    // 打印wrap下面的所有子节点，返回一个集合，包含文本节点
    console.log(oWrap.childNodes)
    // 获取集合中的某一个
    console.log(oWrap.childNodes[1])
</script>

children 获取所有子节点中的元素节点

var oWrap = document.getElementById("wrap")
// 打印wrap下面的所有元素节点
console.log(oWrap.children)
// 获取集合中的某一个
console.log(oWrap.children[1])

firstChild 获取第一个子节点

var oWrap = document.getElementById("wrap")
//返回第一个子节点
console.log(oWrap.firstChild)

lastChild 获取最后一个子节点

var oWrap = document.getElementById("wrap")
//返回最后一个子节点
console.log(oWrap.lastChild)

parentNode 获取父节点

var oWrap = document.getElementById("wrap")
//返回父节点
console.log(oWrap.parentNode)

previousSibling 获取上一个兄弟节点

var oWrap = document.getElementById("wrap")
// 获取第二个节点
var nowNode = oWrap.children[1]
//返回上一个兄弟节点
console.log(nowNode.previousSibling)

nextSibling 获取下一个兄弟节点

var oWrap = document.getElementById("wrap")
// 获取第二个节点
var nowNode = oWrap.children[1]
//返回上一个兄弟节点
console.log(nowNode.nextSibling)

参考文档

Node - Web API 接口| MDN - Mozilla ParentNode.children - Web APIs | MDN

螺钉课堂视频课程地址：http://edu.nodeing.com