理解 javascript DOM 核心思想：nodeList vs HTMLElement 对象

Question

我一直在努力彻底理解 DOM。目前我正在遍历 DOM 树，我似乎发现了一些不一致的地方。

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

请看这个小提琴的例子：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>";

}

此外，在小提琴中，如果我删除 1 个包含“活动”类的 li。这仍然会返回一个 nodeList 而不是一个 HTMLElement：jsfiddle.net/AmhVk/5

Answer 1

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

---

检索元素节点

您可以通过其中一个选项检索元素节点。这将返回 HTMLElement 或 nodeList。

获取元素节点的方法：

• HTMLElementdocument.getElementById()
• HTMLCollectiondocument.getElementsByTagName()
• nodeListdocument.getElementsByName()
• nodeListdocument.getElementsByClassName()
• HTMLElementdocument.querySelector()
• nodeListdocument.querySelectorAll()

nodeList vs HTMLElement

• nodeList 可以包含 1 or more 元素
• HTMLElement 可以包含only 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 selector function (getElementsByClassName) 选择元素
• linkID 使用 single element selector function (getElementByID) 选择一个元素

DOM 语义

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

• getElementsByClassName - Element (Elements) 的复数形式 - returns nodeList
• getElementByID - 元素的单一形式或名词 - returns HTMLElement
• querySelectorAll - 选择“所有” - returns nodeList
• querySelector - 选择“单个” - returns HTMLElement
• linkID.parentElement - 元素的单一形式或名词 - returns HTMLElement

我会在需要时更新这个答案...