Question

根据http://www.w3schools.com/js/js_htmldom_navigation.asp教程，元素属性也是节点。在下面的示例中，脚本仅显示元素节点。

<!DOCTYPE html>
<html>
<body>

<a href="#">link</a>
<p id="demo"></p>

<script>
var n = document.body.childNodes;
var s = "";
for (var i = 0; i < n.length; i++)
  s += n[i].nodeName + "<br>";
document.getElementById("demo").innerHTML = s;
</script>
some text

</body>
</html>

结果（节点名称）是：

#text
A
#text
P
#text
SCRIPT

我猜#text是换行符的节点名称等（但我不知道为什么SCRIPT后的文本没有显示为#text）。

为什么它没有显示href属性？即使我试图查看锚元素的所有子节点，它也只显示内部的文本节点。

Answer 1

tl; dr：是的，它们是节点，但它们的处理方式不同。

来自DOM spec：

Attr个对象继承Node接口，但由于它们实际上不是它们描述的元素的子节点，因此DOM不认为它们是文档树的一部分。因此，Node属性parentNode，previousSibling和nextSibling对null个对象具有Attr值。 DOM认为属性是元素的属性，而不是与它们关联的元素具有单独的标识;这应该使得实现诸如与给定类型的所有元素相关联的默认属性之类的特征更有效。此外，Attr个节点可能不是DocumentFragment的直接子节点。但是，它们可以与Element中包含的DocumentFragment个节点相关联。简而言之，DOM的用户和实现者需要意识到Attr个节点与继承Node接口的其他对象有一些共同点，但它们也非常不同。

正如文中所说，属性节点不被视为元素的子节点，因此它们不包含在childNodes中。要获取元素的属性，您可以访问element.attributes。

Answer 2

元素属性不是节点。

如果你check MDN about .childNodes（这是w3schools的一个更好的来源），你会读到：

Node.childNodes只读属性返回给定元素的子节点的实时集合。

在DOM3 spec可以阅读：

Attr对象继承Node接口，但由于它们实际上不是它们描述的元素的子节点，因此DOM不认为它们是文档树的一部分。

关于您的其他问题，您在<script>标记之后看不到文本的原因是因为尚未准备好加载DOM。如果你把代码放在</body>附近，那么一切都会在那里。

元素属性是否是节点？

2 个答案: