下面是关于 Document 对象的常用方法的详细讲解：
Document 对象表示当前页面的文档。它是 window 对象的一个属性。可以通过 window.document 或者 document 来访问这个对象。
以下是常用的 Document 对象方法：
方法名：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>
方法名：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>
方法名：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 是最常用的几个方法。在实际开发中，你可能会频繁使用这几个方法来获取、操作页面元素。
本文链接：http://task.lmcjl.com/news/9156.html