理解JavaScriptDOM核心思想：nodeList与HtmleElement对象

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

• 在节点列表上，我可以使用索引在列表中进行迭代
• 在HTMLElement上，我不能使用索引

请参阅此小提琴以了解示例：

所以问题是，为什么nodeList有一个像元素[0]这样的可索引列表，而HtmleElement没有

有人能给我解释清楚吗？Thx

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

函数简单（）{
var li=document.queryselectoral（“.active”）；
var ul=li[0]。父节点；
var getULchild=ul.children[0]；
var ieps=document.getElementById（“ieps”）；
ieps.innerHTML+=“ul将返回=“+ul+”
”；
ieps.innerHTML+=“li将返回=“+li+”

”；
ieps.innerHTML++=“ul[0]将返回：“+ul[0]+”
”；
ieps.innerHTML+=“li[0]将返回：“+li[0]+”

”；
}

---

另外，在小提琴中，如果我去掉1个包含类“active”的li。这仍然会返回一个节点列表，而不是一个HTMLElement:

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

---

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

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

  只能包含一个

  元素

他们的工作方式不同。在节点列表中，必须使用带索引值的方括号[]才能访问列表节点列表[2]中的项目。而使用HtmleElement，您可以随时处理项目本身

例子

• linkClass

  使用

  nodeList选择器函数选择元素（getElementsByClassName）

• linkID

  使用

  单元素选择器函数选择元素

  （getElementByID）

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

• getElementsByClassName-元素的复数形式--

  返回节点列表

• getElementByID-元素的单个形式或名词-

  返回HtmleElement

• querySelectorAll-选择“全部”-

  返回节点列表

• querySelector-选择“单个”-

  返回HTMLElement

• linkID.parentElement-元素的单个形式或名词-

  返回HtmleElement

---

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

因为

NodeList

是一个数组（-like）类，包含

HTMLElement

s

HtmleElement

仅用于单个节点，而不是列表。

NodeList

是一个类似数组的对象，包含一定数量的节点。

HTMLElement

是元素本身；它是一个对象，其值为元素本身，不包含其他元素。尝试对其使用类似数组的索引就像尝试执行

document.queryselectoral（“.active”）[0][0]那么，我如何才能获得ul作为节点列表？同样，在小提琴中，如果我删除包含类“active”的li的1个。这仍然会返回一个节点列表，而不是单个HTMLElement。hello@kevinius，所以
nodeList
可以包含一个或多个元素，
HTMLElement
只能包含一个元素，那么
HTMLCollection
呢？你能解释一下吗？
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)