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

Question

I want to access html element by node relationship likes parentNode,fastChild,nextSibling etc.But my following code not work properly. 我想按节点关系访问html元素，例如parentNode，fastChild，nextSibling等。但是我的以下代码无法正常工作。 My Code looks like : 我的代码如下所示：

<!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 in alert box looks like : 警报框中的输出看起来像：

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

But for the div,the parentNode,fastChild,childNodes[1],lastChild,previousSibling and nextSibling should be body,h2,p,marquee,p and p.So why output is looks like above? 但是对于div，parentNode，fastChild，childNodes [1]，lastChild，previousSibling和nextSibling应该是body，h2，p，marquee，p和p。那么为什么输出看起来像上面的？

Answer 1

The whitespace before/after the various elements is turned into text nodes. 各种元素之前/之后的空白将变成文本节点。 You can see the results you want if you remove all spaces: 如果删除所有空格，则可以看到所需的结果：

<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>

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

The MDN Node.firstChild docs explain this in more detail. MDN Node.firstChild文档对此进行了更详细的说明。

Note that the equivalent jQuery methods will ignore the text nodes and give you the children, next nodes, etc. that you want. 请注意，等效的jQuery方法将忽略文本节点，并为您提供所需的子节点，下一个节点等。

You can also loop over child nodes, skipping text nodes until you find something else: 您还可以循环遍历子节点，跳过文本节点，直到找到其他内容：

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

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

Answer 2

您可以使用firstElementChild绕过该空白（或者，如果您正在做的不只是出于学习目的，请使用现有的js库，而自己处理DOM并不是一种愉快的体验）

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-08-09 17:02:05

解决方案2
0

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-08-09 17:02:05

解决方案2 0

解决方案1
0 已采纳 2014-08-09 17:02:05

解决方案2
0