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

Question

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

• 在节点列表上，我可以使用索引来迭代列表
• 在 HTMLElement 上我无法使用索引

请参阅此小提琴的示例：http ://jsfiddle.net/AmhVk/4/

那么问题来了，为什么nodeList有像element[0]、element 1这样的可索引列表，而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>

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

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

Answer 1

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

检索元素节点

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

检索元素节点的方法：

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

节点列表与 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 - 元素 (Elements) 的复数形式 -returns nodeList
• getElementByID - 元素的单一形式或名词 -returns HTMLElement
• querySelectorAll - 选择“全部”-returns nodeList
• querySelector - 选择 'single' -returns HTMLElement
• linkID.parentElement - 元素的单一形式或名词 -returns HTMLElement

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