总结：DOM 访问方法

我们可以用什么方法？

我们向你展示过如何使用下列方法找出网站上的一个或多个元素：

他们返回了什么？

有两种方法返回单个 元素 对象， getElementById 与 querySelector：

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";

方法 getElementsByClassName 与 getElementsByTagName返回单个 HTMLCollection 类似数组的对象。该集合是 "动态的"，这意味着如果有额外包含标签名活类名的元素被加入文档中时，集合会更新。

var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}

方法 querySelectorAll() 返回一个 NodeList，同样也类似数组。这个列表时 "静态的"，意味着就算有新的匹配元素被加入到页面中，列表也不会变化。最有可能的是，当使用这些方法时，你不会遇到两种返回数据类型之间的差异，但请记住这一点。

var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}

利用子查询访问

找到元素后, 可以使用我们刚才显示的方法对其进行子查询。例如：

// 找出该ID对应的元素
var salsMotto = document.getElementById("salsMotto");
// 找出元素中的spans：
var mottoWords = salsMotto.getElementsByTagName("span");
// 记录数量
console.log(mottoWords.length);

遍历 DOM

访问元素的另一种方法是 "遍历" DOM 树。每个元素都具有指向与之相关的元素的属性：

firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount

举例：

var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
   console.log(salsMotto.childNodes[i]);
}

这些属性在 Text 节点不可用，仅在 Element 节点上可用。要确保可以遍历元素，可以检查其 nodeType/nodeValue 属性。你可能不需要或不想使用DOM遍历，但它是您可以使用的另一种选择。

想加入讨论吗？

排序方式:

尚无帖子。

你会英语吗？单击此处查看更多可汗学院英文版的讨论.