javascript - 关于js中的childNodes[]
本文介绍了javascript - 关于js中的childNodes[]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在学习DOM对象操作HTML时，看到removeChild是用于删除节点，想删除第一个p元素，childNodes[0]竟然没反应，要childNodes[1]才能删除第一个P元素，然后我在前面加了没有标签包裹的文字，再用childNodes[0]却又能删去了？意思是[0]只能用于删除没有标签的文本内容吗？还是怎样。。。求解。。
还有childNodes[3]也是没删去一个。。又是为啥。。
代码如下
<body>
<div id="div">
这句话用于测试的
<p id="pid">div的p1元素</p>
<p>div的p2元素</p>
</div>
<script>
function addNode(){
var div=document.getElementById("div");
var node=document.getElementById("pid");
var newnode=document.createElement("p");
newnode.innerHTML="动态添加p元素";
div.insertBefore(newnode,node);//参数分别是要插入的新节点和它的相对位置
}
addNode();
// 删除节点
function removeNode(){
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[3]);
//从1开始的childNodes[0]没反应
}
removeNode();
</script>
</body>
下面是结果显示。。
div.childNodes[0]的结果
动态添加p元素
div的p1元素
div的p2元素
div.childNodes[1]的结果
这句话用于测试的
div的p1元素
div的p2元素
div.childNodes[3]的结果
这句话用于测试的
动态添加p元素
div的p1元素
div的p2元素
div.childNodes[4]的结果
这句话用于测试的
动态添加p元素
div的p1元素
解决方案
是这样的：childNodes是包括一个元素的所有直接子节点。
比如：
<div id="div">
这句话用于测试的
<p id="pid">div的p1元素</p>
<p>div的p2元素</p>
</div>childNodes(0) 其实就是这句话用于测试的这个文本节点（注意：文本节点也包括不可见字符，例如回车和换行）。
如果想获取所有元素节点，可以使用children，比如获取第一个元素节点children[0]，就能取到`<p id="pid">div的p1元素</p>
`
这篇关于javascript - 关于js中的childNodes[]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
