了解javascript DOM核心思想:nodeList vs HTMLElement对象

Understanding javascript DOM core ideas: nodeList vs HTMLElement objects

本文关键字：nodeList vs HTMLElement 对象 javascript DOM 核心 了解      更新时间：2023-09-26

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

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

有关示例，请参阅此小提琴：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>";
}

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

所以我做了一些研究，现在我已经完全了解了 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 or more元素
  • HTMLElement可以包含only 1元素

他们与他们合作的方式不同。在 nodeList 中，您必须使用带有索引值的括号 [] 才能访问列表 nodeList[2] 中的项目。而使用HTML环境，你可以使用项目本身。

例

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
  • 查询选择器全部 - 选择"全部" - returns nodeList
  • 查询选择器 - 选择"单个" - returns HTMLElement
  • linkID.parentElement - 元素的单一形式或名词 - returns HTMLElement

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

相关文章：