DOM子元素详解

<div id="wrap">
    <div>1</div>
    <div>2</div>
    <div></div>
</div>

<script>
        var node = document.getElementById("wrap");
        console.log(`children :`, node.children);
        console.log(`childNodes :`, node.childNodes);
        console.log(`firstChild :`, node.firstChild);
        console.log(`lastChild :`, node.lastChild);
        console.log(`children[0].nextSibling :`, node.children[0].nextSibling);
        console.log(`children[0].previousSibling :`, node.children[0].previousSibling);
    </script>

1、children

    children属性返回节点的所有子节点，只接受标签节点，文本节点不接受

    

2、childNodes

childNodes属性返回节点的的所有子节点，包括元素节点间的空格、回车、等文本内容

由浏览器中显示childNodes获取的第一个节点为父级div与子级div之间的换行符

3、firstChild

firstChild属性获取第一个子节点，包括文本节点，即childNodes[0]

4、lastChild

lastChild属性获取最后一个子节点，包括文本节点

5、nextSibling

nextSibling属性获取当前节点的下一个兄弟节点，包括文本节点

6、previousSibling

previousSibling属性获取当前节点的前一个兄弟节点，包括文本节点