js中取nodeList集合中第一个为text问题

最新推荐文章于 2021-03-20 22:54:39 发布

weixin_33979203

最新推荐文章于 2021-03-20 22:54:39 发布

阅读量1.4k

点赞数

文章标签： javascript python ViewUI

原文链接：https://juejin.im/post/59e8c4815188255f5b698a09

版权

今天看高程，就顺带敲了一下代码，但是结果与想象中是不一样的话不多说，看图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>the first node</p>
    </div>
</body>
</html>
<script>
    var parentDivNode = document.getElementsByTagName("div")[0]
    var p = document.createElement('p'); // 创建p标签
    // 第一种方法，在子元素的最后插入一个新的标签
    parentDivNode.appendChild(p).innerHTML = "插入的p标签，但是插入到了最后";
    // 访问nodeList中的节点 这里有两种方法，一种[] 一种item()
    var firstChild = parentDivNode.childNodes[0];
    var secondChild = parentDivNode.childNodes.item(1)
    var count = parentDivNode.childNodes.length;

</script>复制代码

本来按照我的想象，应该是两个"p"节点吧，但是，事实是这样的

这是在逗我吗，为什么不按套路出牌，经过查阅，原因如下：

在DOM中实际上有一个叫做textNode的元素，相应的还有document.createTextNode的JS方法，而在IE和Chrome浏览器中会将源代码中的换行符渲染成一个textNode，只是视觉上不可见。
然而，通过childNodes来获取子元素的时候，结果会包含这些textNode，所以会得到题主所见的情况。
而解决方法很简单，主要有两种：
第一，使用children代替childNodes
第二，遍历childNodes，根据nodeType过滤掉textNode。