正文

js文档节点关系

IP云
IP云V管理员/7 阅读
08/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这一节简单介绍一下文档节点方面的相关内容：

一：获得节点关系的属性

1、获得该元素父节点的引用:obj.parentNode；

<div class="content">
<p class="img1"><img src="img/lingzhiling.jpg" /></p>
<p class="img2"><img src="img/yufeihong.jpg" /></p>
</div>
<script type="text/javascript">
var content = document.getElementsByClassName('content')[0];
var img1 = document.getElementsByClassName('img1')[0];
var img2 = document.getElementsByClassName('img2')[0];
// 获得父节点的引用
img1.onclick = function() {
this.innerHTML = this.parentNode.className;
}
</script>

2、获得该对象的子节点的集合obj.childNodes;

注意：元素中的空格被视为文本，而文本被视为节点

提示：您可以使用 length 属性来确定子节点的数量，以NodeList为对象，然后您就能够遍历所有的子节点并提取您需要的信息。

<div class="content">
<p class="img1"><img src="img/lingzhiling.jpg" /></p>
<p class="img2"><img src="img/yufeihong.jpg" /></p>
</div>
<script type="text/javascript">
var content = document.getElementsByClassName('content')[0];
var img1 = document.getElementsByClassName('img1')[0];
var img2 = document.getElementsByClassName('img2')[0];
// 获得子节点的集合
var childs = content.childNodes; // 元素中的空格被视为文本，而文本被视为节点。
</script>

3、返回该对象的第一个子节点的引用：obj.firstChild;

注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。以Node为对象

<div class="content">
<p class="img1"><img src="img/lingzhiling.jpg" /></p>
<p class="img2"><img src="img/yufeihong.jpg" /></p>
</div>
<script type="text/javascript">
var content = document.getElementsByClassName('content')[0];
var img1 = document.getElementsByClassName('img1')[0];
var img2 = document.getElementsByClassName('img2')[0];
/*获得第一个子节点的引用*/
img2.onclick = function(){
console.log(content.firstChild.nextElementSibling);
this.innerHTML = document.firstChild.nodeName;
}
</script>

4、返回列表中最后一个子节点；obj.lastChild

注释：lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。

5、获得下一个兄弟节点的引用：obj.nextSibling

注释：元素中的空格被视作文本，而文本被视作文本节点。请尝试在两个 <p> 元素之间添加空格，结果将是 "undefined"。如果没有 nextSibling 节点，则返回值为 null。

<div class="content">
<p class="img1"><img src="img/lingzhiling.jpg" /></p><p class="img2"><img src="img/yufeihong.jpg" /></p><p class="text1">第一个</p><p class="text2">第二个</p>
</div>
<script type="text/javascript">
var content = document.getElementsByClassName('content')[0];
var img1 = document.getElementsByClassName('img1')[0];
var img2 = document.getElementsByClassName('img2')[0];
/*获得下一个兄弟节点的引用*/
img1.onclick = function(){
img1.innerHTML = img1.nextSibling.className;
}
</script>

6、获得上一个兄弟节点的引用：obj.previousSibling ；