Question

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

在nodeList上，我可以使用索引来遍历列表
在HTMLElement上，我无法使用索引

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

所以问题是，为什么nodeList有一个可索引的列表，如element [0]，element 1而HTMLElement没有？

有人可以非常透彻地向我解释这个吗？ 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>

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

}

此外，在小提琴中，如果我删除了其中一个包含该类＆＃34;活跃的＆＃34;。这仍然会返回一个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 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 - 复数形式的元素（元素） - returns nodeList
getElementByID - 元素的单一形式或名词 - returns HTMLElement
querySelectorAll - 选择“全部” - returns nodeList
querySelector - 选择“单个” - returns HTMLElement
linkID.parentElement - 元素的单个表单或名词 - returns HTMLElement

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

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

1 个答案:

检索元素节点

检索元素节点的方法：

nodeList vs HTMLElement

实施例

DOM语义