how2j.cn

关键字 简介 示例代码
节点关系图
示例代码
parentNode
父节点关系
示例代码
previousSibling
nextSibling
同胞节点关系
示例代码
childNodes
子节点关系
示例代码
childNodes
children
childNodes和children的区别
示例代码
示例 1 : 节点关系图   
示例 2 : 父节点关系   
示例 3 : 同胞节点关系   
示例 4 : 子节点关系   
示例 5 : childNodes和children的区别   

示例 1 :

节点关系图

假设html代码如实例中,那么各个元素节点的关系如下:
d1 d2 d3 的parentNode是parentDiv
parentDiv的firstNode是 d1
parentDiv的lastNode是d3
d2的previousSibling是d1
d2的nextSibling是d3
parentDiv的children是 d1 d2 d3
运行效果
节点关系图
<div id="parentDiv"> <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三个div</div> </div>
<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

父节点关系

通过parentNode获取父节点。
本例中从id=d1的div开始递归获取其父节点,分别获取如下父节点
DIV[id=parentDiv] -> body->html->document
运行效果
<html> <body> <script> var node = null; function showParent(){ if(null==node) node = document.getElementById("d1"); if(document == node) alert("已是根节点:document"); else{ alert(node.parentNode); node = node.parentNode; } } </script> <div id="parentDiv"> 父Div的内容 <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三个div</div></div> <button onclick="showParent()">不断递归d1的父节点</button> </body> </html>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

同胞节点关系

分别通过 previousSiblingnextSibling属性获取前一个,以及后一个同胞节点。
在本例中,首先获取d2元素节点
通过previousSibling获取前一个节点d1.
注意 d1和d2标签是紧挨着的,所以d2前一个节点是d1。
通过nextSibling 获取后一个节点#text.
注意 d2和d3不是紧挨着 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.
运行效果
<script> function showPre(){ var d2 = document.getElementById("d2"); alert(d2.previousSibling.innerHTML); } function showNext(){ var d2 = document.getElementById("d2"); alert(d2.nextSibling.nodeName); } </script> <div id="parentDiv"> 父Div的内容 <div id="d1">第一个div</div><div id="d2">第二个div</div> <div id="d3">第三个div</div></div> <button onclick="showPre()">获取d2的前一个同胞</button> <button onclick="showNext()">获取d2的后一个同胞</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

子节点关系

子节点关系有:
firstChild 第一个子节点
lastChild 最后一个子节点
childNodes 所有子节点
注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行,那么firstChild第一个子节点将会是文本节点,不会是第一个元素节点
注:lastChild 和firstChild同理。 在本例中故意让第3个元素的结束标签与div的结束标签紧挨着,所以最后一个子节点就是第三个标签
注: 子元素个数一共是6个。 因为parentDiv的子节点是 文本节点接着一个元素节点,重复3次。 所以一共是6个。
运行效果
<script> function showfirst(){ var div = document.getElementById("parentDiv"); alert(div.firstChild.nodeName); } function showlast(){ var div = document.getElementById("parentDiv"); alert(div.lastChild.nodeName); } function showall(){ var div = document.getElementById("parentDiv"); alert(div.childNodes.length); } </script> <div id="parentDiv"> 父Div的内容 <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三个div</div></div> <button onclick="showfirst()">第一个子节点</button> <button onclick="showlast()">最后一个子节点</button> <button onclick="showall()">所有子节点数量</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

childNodes和children的区别

childNodeschildren都可以获取一个元素节点的子节点。
childNodes 会包含文本节点
children 会排除文本节点
运行效果
<div id="parentDiv"> <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三个div</div></div> <button onclick="showNumber1()">通过childNodes获取子节点总数</button> <button onclick="showNumber2()">通过children()获取子节点总数</button> <script> function showNumber1(){ alert(document.getElementById("parentDiv").childNodes.length); } function showNumber2(){ alert(document.getElementById("parentDiv").children.length); } </script>
<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div></div>

<button onclick="showNumber1()">通过childNodes获取子节点总数</button>

<button onclick="showNumber2()">通过children()获取子节点总数</button>

<script>

function showNumber1(){
  alert(document.getElementById("parentDiv").childNodes.length);
}

function showNumber2(){
  alert(document.getElementById("parentDiv").children.length);
}

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-05-04 是否应该加一句showParent();
72小时黑夜



示例2 父节点关系 示例代码中是否应该加一句showParent();

							

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-04-14 将同胞节点关系例题中的d1和d2中间也加入回车,再获取d2的previousSibling结果为undefined
ticktack
难道只有nextSibling才会得到#text而previousSibling得不到吗,同样都是回车键啊








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-09-25 元素识别
2017-09-12 为什么这里的节点数是7个?
2017-08-25 我有点混淆这里子节点的概念了。。。
2016-07-01




提问之前请登陆
关于 前端基础-HTML DOM-节点关系 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图