|
|
|
示例 2 : 父节点关系 示例 3 : 同胞节点关系 示例 4 : 子节点关系 示例 5 : childNodes和children的区别
假设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>
通过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>
分别通过 previousSibling和nextSibling属性获取前一个，以及后一个同胞节点。
在本例中，首先获取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>
子节点关系有:
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>
childNodes和children都可以获取一个元素节点的子节点。
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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-07-27
关于 childNodes 子节点的理解
2 个答案
虚心求学 跳转到问题位置 答案时间：2024-07-27
简言之，html 这个标签很特殊，只会先找到两个子节点 即 head 和body。
无论你在html标签内写多少个元素、多少个文本、换行，最后html也只有两个子节点（head 和 body），
就算你 一个都不写 html 也会默认加上两个子节点（head 和 body）。
比如你这样写：
<html id="parent"></html>
html 似乎 不包含任何子元素，不包含任何子节点，但实际上 测试结果仍然是 html 有两个子节点，head 和body。
就是这么顽强，哈哈。
测试代码见下面。
虚心求学 跳转到问题位置 答案时间：2024-07-27 很有意思的是，对于 html 标签，处理子节点的方式不一样。
<html id="parentDiv">
<head>
<title>DOM lesson</title>
</head>
<body>
<h1>DOM lesson</h1>
<p>Hello world!</p>
</body>
</html>
html 的子节点只有两个，分别是head和body，直接忽略了所有的文本节点，包括换行和空格。
更有意思的是，把html改成div，结果又不一样
于是下面的代码：
<div id="parentDiv">
<head>
<title>DOM lesson</title>
</head>
<body>
<h1>DOM lesson</h1>
<p>Hello world!</p>
</body>
</div>
结果：
id = parentDiv 的 div容器，共有 7 个子节点。从先到后依次是：
节点1：#Text
节点2：title
节点3：#Text
节点4：h1
节点5：#Text
节点6：p
节点7：#Text
也就是说，直接把 head 标签 和 body 标签 直接忽略了，既不是子元素节点也不是子文本节点。
原因：
由于div 内 声明 html 和 body 是错误的，包含的关系弄反了，
div 正常来说应该是 包含在 body 中，而body 又包含在 html 中。
因此对于这个错误的标签直接忽略，既不认为是元素，也不认为是文本，
相当于 这两个 html 和 body 直接被抠掉了。
和删去 <html></html> <body></body> 这两个标签的结果是等价的。
也就是说代码：
<div id="parentDiv"><head><title>DOM lesson</title></head><body><h1>DOM lesson</h1><p>Hello world!</p></body></div>
上面的代码是都在一行上，没有换行（这里虽然显示会自动换行）。
结果：
id = parentDiv 的 div容器，共有 3 个子节点，全是元素节点，不含文本节点。从先到后依次是：
节点1：title
节点2：h1
节点3：p
可以用我下面的代码检验一下。
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-08-27
什么是文本节点
2019-11-06
上面例子
2019-06-09
父节点关系 递归应该修改
2018-11-16
第二个示例为什么点击很多次才是根节点？谁给分析一下？
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
