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的子节点里的。
  • 如果标签的嵌套违反了嵌套规则,那么在计算子节点的时候可能怎么算都算不对的(:

推荐阅读更多精彩内容