列表的直接子元素

Question

一个简单的问题...获取列表的直接子元素的javascript语句是什么？我尝试了：

document.getElementById(id).getElementsByTagName('li');

这会给我所有子节点。

- racky

Answer 1

循环遍历：

document.getElementById(id).children

并获取那些是li元素的（我认为它们都应该是，根据规范）

---

如果被支持的话，我认为document.querySelectorAll('#id>li')也同样可以工作。参见： http://www.w3.org/TR/selectors-api/

- Bill Barry

---

嗯，看起来children不是DOM标准的一部分，只是Gecko和其他渲染引擎的一部分...即使您必须检查列表中的每个元素，childNodes可能是更好的答案。 - Bill Barry

那么 document.getElementById(id).childNodes; 这个代码会只获取直接子元素吗？ - racky

是的，注意如果您安装了Firebug，您可以使用类似于document.getElementsByTagName（“ul”）[0]的监视器在此网站上查看这两个列表。 - Bill Barry

适用于我的 querySelectorAll 的正确形式是 document.getElementById('id').querySelectorAll("li")。 - Zach Saucier

应该得到相同的结果，我不确定哪个更快，也没有测试过，但在火狐和谷歌浏览器中进行了快速测试，看起来它们都给出了相同的结果：http://jsfiddle.net/9GgCE/，而且根据 MDN 的说法，querySelectorAll 在 Document 和 Element 类中都可用：https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll - Bill Barry

Answer 2

Node.childNodes or Element.children

var listItems = [];

var children = elem.childNodes;
for(var i = 0; i < children.length; i++) {
    if(children[i].nodeName == "LI") {
        listItems.push(children[i]);
    }
}

- Anurag

---

请注意，childNodes 包含所有节点，但仅限元素。 - Gumbo

感谢@Gumbo - 我稍后会在答案中澄清这一点。对于小列表，我们通过nodeName进行测试不会有影响，但对于大列表可能是低效的。 - Anurag

最好使用 children[i].nodeType === Node.ELEMENT_NODE 来确保它确实是一个元素节点。 - Gumbo

“LI”不应作为任何其他类型节点的nodeName返回。由于“nodeName”是在“Node”上定义的，因此它应该作为所有节点（包括文本和其他节点）的属性可用。 - Anurag

Answer 3

相同的代码更快、更好。

var listItems = [];
var children = element.childNodes;
for(var i = 0, l=children.length; i<l; ++i) {
    var child = children[i];
    if(child.nodeType === 1 && child.tagName === "LI") {
        listItems.push(child);
    }
}

- xavierm02