Document 对象的常用方法

下面是关于 Document 对象的常用方法的详细讲解：

Document 对象

Document 对象表示当前页面的文档。它是 window 对象的一个属性。可以通过 window.document 或者 document 来访问这个对象。

常用方法

以下是常用的 Document 对象方法：

1. getElementById

方法名：getElementById
参数：一个字符串，表示需要获取元素的 id 值
返回值：表示获取到的元素对象，如果没有找到对应 id 的元素，则返回 null

该方法用于通过元素的唯一标识符 id 来获取元素对象。示例如下：

<!-- HTML页面 -->
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script>
// 获取id为nav的ul元素
var nav = document.getElementById("nav");
console.log(nav); // 输出ul元素对象
</script>

2. getElementsByTagName

方法名：getElementsByTagName
参数：一个字符串，表示需要获取元素的标签名
返回值：表示获取到的元素对象的集合（NodeList 类型）

该方法用于获取指定标签名的元素对象集合。示例如下：

<!-- HTML页面 -->
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script>
// 获取所有a元素，并遍历输出其href属性值
var alist = document.getElementsByTagName("a");
for (var i = 0; i < alist.length; i++) {
  console.log(alist[i].href);
}
</script>

3. querySelector

方法名：querySelector
参数：一个字符串，表示需要获取元素的选择器字符串
返回值：表示获取到的第一个符合选择器的元素对象，如果没有找到符合选择器的元素，则返回 null

该方法用于通过 CSS 选择器字符串来获取元素对象。示例如下：

<!-- HTML页面 -->
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script>
// 获取id为nav的元素下第一个li元素下的第一个a元素
var a = document.querySelector("#nav li:first-child a");
console.log(a); // 输出a元素对象
</script>

总结

以上是 Document 对象的常用方法，其中 getElementById、getElementsByTagName 和 querySelector 是最常用的几个方法。在实际开发中，你可能会频繁使用这几个方法来获取、操作页面元素。