以一个网页作为例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="bb">
<div class="box1"></div>
<div class="box">
<p title="hhhh">第1</p>
<p dataId="2">第2</p>
<p>第3</p>
<p>第4</p>
</div>
<div class="box2"></div>
</div>
<script type="text/javascript"> var pp = document.getElementsByClassName("box")[0];
</script>
</body>
</html>
输出pp:
分别输出parentNode和parentElement:
区别:
在获取根部document节点是,parentElement找的是元素,因此报错 null ,而parentNode获取的是节点,返回的是 #document
拓展:
查找两个节点的最近的一个共同父节点,可以包括节点自身
(oNode1 和 oNode2 在同一文档中,且不会为相同的节点)
- (父节点的父节点也算父节点,意思是父节点不止一个)
function commonParentNode(oNode1, oNode2) {
while(true){
if(oNode1.contains(oNode2))
return oNode1
oNode1 = oNode1.parentNode
}
}
不断循环oNode1的父节点,若其包含oNode2,则该节点为最近父节点