在JS中获取元素子节点时候,使用childNode()遇到了一些问题,找了一些资料总结如下。
首先,用于测试先规定好HTML:
<div>
<p>
<span></span>
<span></span>
<span></span>
</p>
<div></div>
</div>
1 childNode
var node = document.getElementsByTagName("div")[0].childNodes;
document.write(node[0].nodeName+"<br/>");
document.write(node[1].nodeName);
打印出来内容的第一个是 #text,原本以为获取的是第一个子节点p,然而得出的是 #text,可以查一下文本节点的 nodeName 是 #text,空白符 / 回车符都属于文本节点,<div>和<p>之间有一个回车,所以使用childNode方法想获取第一个子节点就有问题了。
2 firstChild
该方法本质上和childNode一样,它只是在父节点<div>基础上直接获取它的第一个子节点,在没有改变HTML结构的情况下,得出的结果还是 #text。
var node = document.getElementsByTagName("div")[0];
document.write(node.firstChild.nodeName);
3 firstElementChild
为了解决获取第一个子节点时会被空白符 / 回车符干扰的问题,使用firstElementChild可以有效获取到父元素的第一个子元素节点,是元素节点哦,空白符 / 回车符都是文本节点。
var node = document.getElementsByTagName("div")[0];
document.write(node.firstElementChild.nodeName);
得出的结果有效的获取到了原本想要的 p。
4 children
然而firstElementChild使用中会有兼容问题,在IE6 7 8中是没有这个方法,因此呢,出现了children方法,它可以兼容所有浏览器。但是,需要注意的一点,children返回的结果是一个数组。
var node = document.getElementsByTagName("div")[0];
document.write(node.children[0].nodeName);
得出的结果也有效的获取到了原本想要的 p,在改变children[1],可以获取到DIV。
关注我吧
关注「前端一起学」公众号 ,看着项目进阶学习,让我们一起学前端,一起进步。