javascript - 理解javascript DOM核心思想: nodeList vs HTMLElement objects

Question

我一直在努力非常透彻地理解 DOM。目前我正在遍历 DOM 树，我似乎发现了一些不一致之处。

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

有关示例，请参阅此 fiddle :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>

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

}

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

Answer 1

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

---

检索元素节点

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

获取元素节点的方法:

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

nodeList 与 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 - 元素 (Elements) 的复数形式 - 返回 nodeList
• getElementByID - 元素的单一形式或名词 - 返回 HTMLElement
• querySelectorAll - 选择“全部” - 返回 nodeList
• querySelector - 选择“单个”- 返回 HTMLElement
• linkID.parentElement - 元素的单一形式或名词 - 返回 HTMLElement

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