Question

我想按节点关系访问html元素，如parentNode，fastChild，nextSibling等。但是我的以下代码无法正常工作。我的代码看起来像：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <p>This is first para</p>

        <div id="mydiv">
            <h2 align="center">This is the Header</h1>
            <p align="justify">This is the Paragraph</p>
            <marquee scrolldelay="10">This is maquee</marquee>
        </div>

        <p>This is last para</p>

        <script type="text/javascript">
            var mydiv = document.getElementById("mydiv");
            alert(mydiv.parentNode + "\n" +
                  mydiv.firstChild + "\n" +
                  mydiv.childNodes[1] + "\n" +
                  mydiv.lastChild + "\n" +
                  mydiv.previousSibling + "\n" +
                  mydiv.nextSibling);
        </script>
    </body>
</html>

警告框中的OUTPUT如下所示：

[object HTMLBodyElement]
[object Text]
[object HTMLHeadingElement]
[object Text]
[object Text]
[object Text]

但对于div，parentNode，fastChild，childNodes [1]，lastChild，previousSibling和nextSibling应该是body，h2，p，marquee，p和p.So为什么输出如上所示？

Answer 1

将各种元素之前/之后的空格转换为文本节点。如果删除所有空格，您可以看到所需的结果：

<p>This is first para</p><div id="mydiv"><h2 align="center">This is the Header</h1><p align="justify">This is the Paragraph</p><marquee scrolldelay="10">This is maquee</marquee></div><p>This is last para</p>

示例：http://codepen.io/paulroub/pen/hpIow

MDN Node.firstChild文档更详细地解释了这一点。

请注意，等效的jQuery方法将忽略文本节点，并为您提供所需的子节点，下一个节点等。

您还可以遍历子节点，跳过文本节点，直到找到其他内容：

for ( var i = 0; i < mydiv.childNodes.length; ++i )
{
  if (mydiv.childNodes[i].nodeType != Node.TEXT_NODE)
  {
    firstNon = mydiv.childNodes[i];
    break;
  }
}

示例：http://codepen.io/paulroub/pen/chLCo

Answer 2

你可以使用firstElementChild绕过那个空格（或者只使用现有的js库，如果你做的不仅仅是为了学习目的，自己处理DOM并不是一个非常愉快的体验）

如何在javascript中使用html DOM的节点关系访问html元素

2 个答案: