-1

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

  • 当我选择超过 1 个元素时返回一个nodeList
  • 当我只选择 1 个元素时返回一个HTMLElement

所以问题是，为什么这段代码会返回一个nodeList，即使我只选择了 1 li。

参见这个小提琴的例子：http: //jsfiddle.net/AmhVk/5

有人可以非常彻底地向我解释一下吗？谢谢...

<ul id="jow">
    <li><a href="">Item</a></li>    
    <li><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>";

}
4

1 回答 1

2

更正：

  • 当您调用可能选择超过 1 个元素的函数时，将返回一个nodeList
  • 调用最多可以选择 1 个元素的函数时返回一个HTMLElement

这样您就不必在每次调用时测试返回值的类型。

querySelectorAll旨在返回未定义数量的元素，因此它返回一个nodeList.

相反，在使用时返回 nodeList 通常没有意义getElementById（因为一个元素最多可能具有给定的 id），这就是它直接返回一个元素（或 null）的原因。

于 2013-10-01T06:51:39.473 回答