javascript DOM中的childNode问题

最新推荐文章于 2023-08-04 08:47:36 发布

ljh_shuai

最新推荐文章于 2023-08-04 08:47:36 发布

阅读量2.9k

点赞数 2

文章标签： javascript dom childnodes

本文链接：https://blog.csdn.net/huster1446/article/details/53468027

版权

javascript DOM中的childNode问题

childNodes到底怎么计算？如何准确找到想要的那个childNode？

这里的节点个数说的是实际浏览器解析的结果
在看书时觉得childNodes就那么回事，可是真正用起来发现根本不知道如何准确找到想要的那个childNode。firstChild和lastChild也经常不知道是哪个。
首先说一下childNodes属性，返回子节点列表，这里子节点不包括子子节点，firstChild是列表第一项，lastChild是最后一项。
childNodes返回直接子节点，同时如果子节点之前或之后有空白（回车符，换行符，空格，制表符等）则也会计算在内。
另外就是< script>也是一个节点。
body中子节点之后的空白不计算在内（以下实例说明）
通过实例来说明：
test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

test.js：

var childNodes = document.body.childNodes;
alert(childNodes.length);

运行结果:

这里body里有一个回车换行和< script >，如果检查nodeType会发现分别是3,1。即空白是文本节点，script是元素节点。
去掉空格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body><script type="text/javascript" src="test.js"></script>
</body>
</html>

结果：

只有一个元素节点
去掉换行但是不去掉空格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>  <script type="text/javascript" src="test.js"></script>
</body>
</html>

结果：

仍是2个childNode，这说明影响计算的是空白（不仅包括空格也包括换行）
另外就是该节点子节点中的空格不会影响该节点的父节点的childNodes个数，这应该很好理解。
例如下面body中共有4个childNode（应该可以理解）这里插入3个链接是怕你计算子子节点（并不是重要的事说3遍）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>  
    <p>
        <a href="http://blog.csdn.net/huster1446"></a>
        <a href="http://blog.csdn.net/huster1446"></a>
        <a href="http://blog.csdn.net/huster1446"></a>
    </p>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

在< p >中三个链接对body的子节点数并没有影响
现在你可以测验一下自己，p中有多少个childNodes？
你可能说6个，那你就naive了，还记得开头所说的之后的子节点之后的空白吗，在body里不会计算在内，但是其他元素则会认为子节点之后的空格也是子节点，实际结果见下图:

7个，nodeType分别是3,1,3,1,3,1,3你也可以去掉空白试试。

最后说一下，这里所说的都是我自己总结的，实际情况可能跟浏览器也有关系，我用的浏览器是chrome和IE。

ljh_shuai

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript DOM中的childNode问题

javascript DOM中的childNode问题childNodes到底怎么计算？如何准确找到想要的那个childNode？在看书时觉得childNodes就那么回事，可是真正用起来发现根本不知道如何准确找到想要的那个childNode。firstChild和lastChild也经常不知道是哪个。首先说一下childNodes属性，返回子节点列表，这里子节点不包括子子节点，firstChi
复制链接

扫一扫