Dom操作-判断Node节点之间的位置关系

位置关系有哪些

　　在Dom里，A节点与B节点关系，通常具有如下关系：

　　1、A是否包含B

　　2、A是否在B的前面

　　3、A与B是否同属一个文档中

 

包含关系的判断

　　普通的Node节点

　　　　使用 ParentNode.contains(childNode) 即可以判断 两者是否包含关系。

　　 Iframe的节点

　　　　如果A在普通文档中，而B处在A文档中Iframe中， 则会返回false。

　　　　如下HTML结构

<div id="container">
         <img id="img1" src="1.png" alt="1.png">
　　　　　 <img id="img2" src="2.png" alt="2.png">

        <iframe name="Hero" src="../Etag.html" width="100%" height="100px"></iframe>
</div>

　　　 JS

let frameDoc = window.frames['Hero'].document;
let txtName = document.getElementById('txtName');
let container = document.getElementById('container');
console.log(container.contains(txtName))

　　　　虽然Iframe在 container 中，但是，里面的元素却不被包含在 container 中。

 

位置关系判定

　　 节点位置的判定，只需要使用函数 compareDocumentPosition,即 MainNode.compareDocumentPosition(OtherNode)。

　　  此函数返回的是整数值。

　　  HTML还是上面的代码。

　　     let img1 = document.getElementById('img1');
        let img2 = document.getElementById('img2');
        let container = document.getElementById('container');

        let result = img1.compareDocumentPosition(img2);
        if(result === 4 ){
            console.log('img1 在 img2 前面');
        }else if(result === 2){
            console.log('img1 在 img2 后面')
        }

        let coResult = img1.compareDocumentPosition(container);
        
        if(coResult === 20){
            console.log('container 是 img1 的容器');
        }else if(coResult === 10) {
            console.log('container 不是 img1 的容器');
        }

　　结果来看：

　　　　4、2  与 20、10 分别是 兄与父 之间的关系值。

　　　　如果使用 compareDocumentPosition()函数返回0，则表示 是 节点与自己比较而获得。

　　在MDN上，建议使用 Node节点属性值，但是，在Chrome 与 FireFox 试验，不相符合。

 

　　此外，元素的属性也是节点，因此，仍然可以用此函数来进行比较。

　　但是，此时返回的值不是上述任何一个了。

        let imgSrc = img1.getAttributeNode('src');
        let imgAlt = img1.getAttributeNode('alt');
        console.log(imgAlt.compareDocumentPosition(imgSrc));   

　　此时返回的值是 4+32 = 36。

　   其中32 是 Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 的值，而 4 是因为 src与alt 是兄弟关系，且在 alt 的前面。