2

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

  • 在 nodeList 上，我可以使用索引来遍历列表
  • 在 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>

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

}

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

4

1 回答 1

3

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

检索元素节点

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

检索元素节点的方法：

  • HTMLElementdocument.getElementById()
  • HTMLCollectiondocument.getElementsByTagName()
  • nodeListdocument.getElementsByName()
  • nodeListdocument.getElementsByClassName()
  • HTMLElementdocument.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 - Element（元素）的复数形式 -returns nodeList
  • getElementByID - Element 的单一形式或名词 -returns HTMLElement
  • querySelectorAll - 选择“全部” -returns nodeList
  • querySelector - 选择 'single' -returns HTMLElement
  • linkID.parentElement - Element 的单一形式或名词 -returns HTMLElement

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

于 2013-10-01T10:18:49.997 回答