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

Question

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

• 当我选择多个元素
时，会返回 nodeList
• 当我只选择1个元素
时，会返回 HTMLElement

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

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

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

}

Answer 1

更正：

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

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

querySelectorAll旨在返回未定义数量的元素，因此返回nodeList。

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