html元素子节点数数

element.childNodes怎么数个数

一开始接触到这个子节点个数的时候,每次调用length出现的数字总和我数的不一样。在网上查找了一圈解释都是一脸懵逼,只好自己自己动手试验了。

  • 第一回合
先写一个块元素
<div></div> 这个块元素有1个子节点,子节点类型为3(文本类型)。
这样
<div>dvdv</div>
这样
<div>dvdv
</div>、
还是这样
<div>
    dvdvdv
</div>
childNodes都只有1个文本类型的子节点。
  • 第二回合
现在开始仔细数
<div>dvdv<p>p1</p></div>这样的话在原来的div元素里又添加了一个p的元素节点所以childNodes.length是2

但是这样
<div>dvdv<p>p1</p>
</div>
在p元素的结束标签后面加上换行,div元素的childNodes.length就会多一个文本类型的子节点。

这样
<div>dvdv
    <p>p1</p>
</div>
和上面的是一样的。

  • 第三回合
<div>dvdv<p>p1</p><p>p2<span>span1</span></p></div>
子节点数为3 ----蒙了吧。(div元素有两个p1和p2并列的子元素节点和一个本身的文本节点,至于p2里的span元素,它不是和p1,p2并列的元素,所以不能算是div的子节点,可能是孙子节点。而且p1节点的末尾标签后面没有换行,p2节点的末尾标签后面也没有换行所以是---一个div本身的文本节点,和两个元素节点一共3个)。

****现在加上换行
<div>dvdv
    <p>p1</p><p>p2</p>
</div>
这样的话节点数就变为了4个啊,首先dvdv后面有个换行这个换行是不计数的,一般情况下换行会被计为一个文本节点,dvdv就是一个文本节点所以dvdv后面的换行是不作为文本节点计数的。比上个例子多出来的一个节点就是p2便签末尾的那个换行,记为文本节点。

****最后来个实战
<div>
    <p>p1</p>
    <p id = 'p2'>
        <span>---span---</span>
    </p>
</div>
来看看这个div块共有几个子节点
首先div本身有个文本节点(不管它会不会像上面的例子那样有显示的dvdv文本),接着p1一个元素节点,p1标签末尾的换行是又一个文本节点,还有id为p2的元素节点,以及p2末尾的换行又是一个文本节点,至此div的子节点已经数完了。一共5个子节点,至于p2内部的span那是div的孙子节点了不能算在div的子节点里的。
  • 如果标签的嵌套违反了嵌套规则,那么在计算子节点的时候可能怎么算都算不对的(:
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 14,357评论 0 33
  • 最近在学习javascript关于DOM的一些知识,在这里对DOM做一些总结。 1.DOM简介 DOM是W3C的标...
    风之郁少阅读 3,003评论 0 5
  • Element对象对应网页的HTML标签元素。每一个HTML标签元素,在DOM树上都会转化成一个Element节点...
    周花花啊阅读 4,760评论 0 0
  • 认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。D...
    jasmine_jing阅读 4,198评论 0 3
  • 我们那时大概是注定要遇见的,即使不在那儿遇见,也会在别的地方!没有什么理由,我就是这么觉得。
    一只倒霉兔阅读 1,432评论 0 0

友情链接更多精彩内容