代码之家  ›  专栏  ›  技术社区  ›  Babiker

尝试访问DOM节点,获取错误的节点值和长度

  •  2
  • Babiker  · 技术社区  · 15 年前

    我有以下HTML:

    <ul id="nav">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
    

    在尝试移动元素时,

    nav.childNodes.length 是9, 九个节点是什么?

    nav.childNodes[0].nodeType 是3,但是 .nodeValue 是空的。




    编辑:

    完成以下操作后工作正常:

    <ul id="nav"><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li><li><a href="#">Four</a></li></ul>
    

    为什么空白区域被算作节点?

    2 回复  |  直到 15 年前
        1
  •  3
  •   Pointy    15 年前

    <li> 节点。5±4=9。

        2
  •  1
  •   Peter Ajtai    15 年前

    当心 在IE中,您的状态不是真的。在IE中,您的代码显示4个子节点。这是因为IE不将空白计算为节点,而Mozilla、Chrome和Safari将其计算在内。

    就像pointy所说的,空白是除ie之外的所有节点,所以ul后面的空白,4 li是5个空白节点+4个li=9个节点。

    如果只需要li节点:

    document.getElementById("nav").getElementsByTagName("li").length
    

    上面的答案是4。它在所有浏览器中的工作原理都是一样的。

    如果必须使用所有子节点,只需忽略类型3节点(文本和空格),并将注意力集中在类型1节点(元素节点)。