Question

我正在玩HTML DOM，我注意到两个属性并没有明显的原因相互认同。考虑这个简单的HTML文件：

[Key]
public int FooId { get; set; }

我希望<html> <head> <title>DOM Example</title> </head> <body> <p>Hello World!</p> <p>Isn't this exciting?</p> <p>You're learning to use the DOM!</p> </body> <script type="text/javascript" src="script.js"></script> </html>和body相同，但.childNodes坚持给我一个文本节点。（以下是script.js的内容）

alt_body

有谁知道为什么这样做？

Answer 1

因为childNodes也会返回文字行节点

<html>
    <head>
        <title>DOM Example</title>
    </head>
    <body>
        <p>Hello World!</p>
        <p>Isn't this exciting?</p>
        <p>You're learning to use the DOM!</p>
    </body>
    <script type="text/javascript" src="script.js"></script>
</html>

0：将是<head> node
1：将empty text（被视为节点）
2：将<body>节点（此HTML中为lastChild）

在删除所有下面的换行符和空格后尝试。

<html><head><title>DOM Example</title></head><body><p>Hello World!</p><p>Isn't this exciting?</p><p>You're learning to use the DOM!</p></body><script type="text/javascript" src="script.js"></script></html>

然后结果将是您所期望的。

Answer 2

childNodes[1]不是最后一个孩子，因为有三个孩子：

[0]头元素
[1]文字节点，其中包含</head>和<body>之间的换行符。
[2]身体元素

如果您要移除换行符以及</head>和<body>之间的所有空格，您会发现childNodes[1] === lastChild：

<html>
<head>
<title>DOM Example</title>
</head><body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

HTML DOM childNodes

2 个答案: