(共556篇)
全部分类

检查节点
[ JS基础 ] 

检查节点

关于节点,还有三个函数属性:

属性 作用
node.isConnected 判断节点是否在当前页面中
parentNode.hasChildNodes() 判断节点是否有子节点
parentNode.contains(node) 判断节点是否是另一个节点的后代
node1.isEqualNode(node2) 判断两个节点是否完全相同

node.isConnected

新创建的元素在插入页面之前,它和当前文档之前是没有联系的,此时这个元素节点的isConnected属性值就是false

1
2
3
4
5
6
7
8
<h1>hello world</h1>
<script>
    var ele = document.createElement("input");
    console.log("新创建的元素:", ele.isConnected);

    var h1 = document.querySelector("h1");
    console.log("页面中已有元素:", h1.isConnected);
</script>

案例源码

parentNode.hasChildNodes()

这个方法用来判断当前节点是否包含有子节点,有则返回true,没有返回false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div>
    <a href="http://baidu.com">jump to baidu website</a>
    <i></i>
</div>
<script>
    console.log("body有没有子节点:", document.body.hasChildNodes());
    console.log(
        "i标签有没有子节点:",
        document.querySelector("i").hasChildNodes(),
    );
</script>

案例源码

parentNode.contains(node)

这个属性用来判断node节点是否是parentNode后代节点

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div>
    <a href="http://baidu.com">jump to baidu website</a>
    <i></i>
</div>
<script>
    var div = document.querySelector("div");
    var a = document.querySelector("a");
    console.log(document.body.contains(div));
    console.log(document.body.contains(a));
</script>

案例源码

node1.isEqualNode(node2)

这个方法用来判断 2 个节点是否相同,一般来说如果两个节点的节点类型、节点名、节点内容(后代节点)相同,该方法的返回值就是true

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div>
    <a href="http://baidu.com">jump to baidu website</a>
</div>
<div>
    <a href="http://sina.com">jump to sina website</a>
</div>
<div>
    <a href="http://baidu.com">jump to baidu website</a>
</div>
<script>
    var divs = document.querySelectorAll("div");
    console.log(divs[0].isEqualNode(divs[1]));
    console.log(divs[0].isEqualNode(divs[2]));
    console.log(divs[1].isEqualNode(divs[2]));
</script>

案例源码