两个节点之间的关系以及如何在节点之间任意移动

两个节点间的关系

包含与被包含关系

　　父级属性：parentNode, parentElement.

　　子级属性：childNodes, children, childElementCount, firstChild, lastChild, firstElementChild, lastElementChild

同辈

　　兄弟节点：nextSibling, previousSibiling, nextElementSibling, previousElementSibling

关系方法：

Node.contains()

返回一个布尔值，来表示传入的节点是否为调用节点的后代，或者是Node节点本身。

IE和Safari不支持document.contains()方法，只支持元素节点的contains()方法

Node.compareDocumentPosition(othernode)

比较当前节点与其他节点的位置关系，返回结果如下：

0	同一节点
1	没有关系，两个节点不在同一文档中
2	othernode 在 node 之前
4	othernode 在 node 之后
8	othernode 包含 node
16	othernode 被 node 包含
32	没有关系，或是两个节点是同一元素的两个属性

注释：返回值可以是值的组合。例如，返回 20 意味着在 othernode 在 node 内部（16），并且 othernode 在 node 之后（4）。

<div id="box">
    <div id="inner"></div>
</div>
<script>
    var box = document.getElementById('box')
    var inner = document.getElementById('inner')
    console.log(box.compareDocumentPosition(inner))
    //inner被box包含（16），inner在box后面（4） ，16+4=20
    console.log(inner.compareDocumentPosition(box))
    //box包含inner(8),box在inner之前（2），8+2=10
</script>

 

Node.hasChildNodes()

返回一个布尔值，表明当前节点是否含有子节点

<div id="box">
    <div id="inner"></div>
</div>
<script>
    console.log(box.hasChildNodes())    //true
    console.log(inner.hasChildNodes())  //false
</script>

三种可以判断当前节点是否含有子节点的方法：

　　node.hasChildNodes()

　　node.firstChild !== null

　　node.ChildNodes.length > 0

Node.isSameNode()和Node.isEqualNode()

same,指的是两个节点是同一个节点

equal,指的是两个节点类型/属性/子节点都一样。

<div id="box">
    <p class="inner">123</p>
    <p class="inner">123</p>
    <p class="inner" id="inner"></p>
</div>
<script>
    var inners = document.getElementsByTagName('p')
    var inner = document.getElementById('inner')
    console.log(inners[0].isEqualNode(inners[1]))   //true  两个节点完全相同
    console.log(inners[0].isEqualNode(inners[2]))   //false 属性不同。
    console.log(inners[0].isSameNode(inners[1]))    //false 不是同一个节点
    console.log(inners[2].isSameNode(inner))        //true  同一个节点
</script>

注意：isSameNode()已在DOM Level4中被废弃。可使用node1 === node2来代替

属性对比

parentNode与parentElement

parentNode返回指定元素在DOM树上的父节点，可能是一个元素节点、一个文档节点、或者是个文档碎片节点。

parentElement返回指定元素的父元素节点，如果没有父节点，或者父节点不是一个DOM元素，则返回null。（在IE浏览器中，只有元素节点才有该属性。其他浏览器则是所有类型的节点都有该属性）

    <div id="box"></div>
    <script>
        var box = document.getElementById('box')

        console.log(box.parentNode)                             //body
        console.log(document.body.parentNode)                   //html
        console.log(document.documentElement.parentNode)        //document
        console.log(document.parentNode)                        //null

        console.log(box.parentElement)                          //body
        console.log(document.body.parentElement)                //html
        console.log(document.documentElement.parentElement)     //null html元素没有父元素节点
        console.log(document.parentNode)                        //null
    </script>

childNodes/children/childElementCount

childNodes返回子节点集合，只读的NodeList对象

children返回子元素集合，只读的HTMLCollection对象

<div id="box">
    <div>
        123
    </div>
</div>
<script>
    var box = document.getElementById('box')
    console.log(box.childNodes)
    console.log(box.children)
</script>

 

childElementCount返回给定元素的子元素数，等于children.length

 元素的移动

添加元素节点：appendChild()

插入元素节点：insertBefore()

移除元素节点：removeChild()

复制元素节点：cloneNode()

转载于:https://www.cnblogs.com/lianglanlan/p/9842943.html