理解JavaScript DOM核心思想：nodeList与HTMLElement对象的区别

Question

我一直在努力全面了解DOM。目前，我正在逐步了解遍历DOM树，并且似乎发现了一些不一致之处。

• 在nodeList上，我可以使用索引来迭代列表
• 在HTMLElement上，我不能使用索引

请参见此fiddle示例：http://jsfiddle.net/AmhVk/4/

所以问题是，为什么nodeList有可索引的element[0]、element1，而HTMLElement没有呢？

能否有人向我详细解释一下？谢谢...

<ul id="jow">
    <li><a href="">Item</a></li>    
    <li><a href="">Item</a></li>
    <li class="active"><a href="">Item</a></li> 
    <li class="active"><a href="">Item</a></li> 
    <li><a href="">Item</a></li>
    <li><a href="">Item</a></li>
</ul>

<div id="ieps"></div>

function simple(){

    var li = document.querySelectorAll(".active");
    var ul = li[0].parentNode;
    var getULchild = ul.children[0];

    var ieps = document.getElementById("ieps");

    ieps.innerHTML += "ul will return = " + ul + "<br>";
    ieps.innerHTML += "li will return = " + li + "<br><br>";        

    ieps.innerHTML += "ul[0] will return: " + ul[0] + "<br>";
    ieps.innerHTML += "li[0] will return: " + li[0] + "<br><br>";

}

此外，在这个示例中，如果我移除一个包含类“active”的li元素，它仍然会返回一个节点列表而不是单个的HTMLElement：jsfiddle.net/AmhVk/5。

- kevinius

---

因为 NodeList 是一个类似于数组的 类，它持有 HTMLElement，而 HTMLElement 只是单个节点，而不是列表。 - Niccolò Campolungo

NodeList 是一种类似数组的对象，它包含一些节点。而 HTMLElement 则是元素本身；它是一个只包含自身元素且值为该元素的对象。在其上尝试使用类似数组的索引就像尝试执行 document.querySelectorAll(".active")[0][0]; 一样。 - Joe Simmons

那么，我怎样才能将ul作为一个节点列表获取呢？ - kevinius

此外，在这个fiddle中，如果我删除一个包含类“active”的li元素，它仍然会返回一个nodeList而不是单个的HTMLElement。http://jsfiddle.net/AmhVk/5/ - kevinius

Answer 1

我做了一些研究，现在完全理解了DOM在遍历文档树时返回的对象。由于在网上没有找到真正的答案，我将回答自己的问题，希望这也能帮助其他人。

---

检索元素节点

您可以通过以下1种选项之一检索元素节点。这将返回HTMLElement或nodeList。

检索元素节点的方法：

• HTMLElement document.getElementById()
• HTMLCollection document.getElementsByTagName()
• nodeList document.getElementsByName()
• nodeList document.getElementsByClassName()
• HTMLElement document.querySelector()
• nodeList document.querySelectorAll()

nodeList vs HTMLElement

• nodeList 可包含1个或多个元素
• HTMLElement 只能包含1个元素

它们在使用方式上有所不同。在nodeList中，您必须使用带有索引值的方括号[]来获取列表中的项目nodeList[2]。而对于HTMLElement，您已经使用项目本身。

示例

var linkClass = document.getElementsByClassName(".active");
var linkID = document.getElementById("id");

var parentFromLinkClass = linkClass[0].parentElement;
var parentFromLink = linkID.parentElement;

document.write(linkClass[0]); //returns the url of the link
document.write(linkID); //returns the url of the link

document.write(parentFromLinkClass); //HTMLLIElement (not a nodeList)
document.write(parentFromLink); //HTMLLIElement (not a nodeList)

• linkClass使用一个 nodeList选择器函数(getElementsByClassName)来选择元素。
• linkID使用一个 单个元素选择器函数(getElementByID)来选择元素。

DOM语义

DOM语义以非常微妙的方式告诉您它将返回哪种类型的对象。请记住，返回的对象类型取决于您最多可以选择的元素数量。

• getElementsByClassName - Element（Elements的复数形式）-返回nodeList
• getElementByID - Element的单数或名词形式-返回HTMLElement
• querySelectorAll - 选择“全部”-返回nodeList
• querySelector - 选择“单个”-返回HTMLElement
• linkID.parentElement - Element的单数或名词形式-返回HTMLElement

如果需要，我会更新这个答案......

- kevinius

---

你好 @kevinius，所以 nodeList 可以包含1个或多个元素，而 HTMLElement 只能包含1个元素，那么 HTMLCollection 呢？你能解释一下吗？ - tonywei

getElementsByClassName() 返回的是 HTMLCollection，而不是 NodeList。 - Edouard