JavaScript中Document全局对象用法（附代码自行演示）

JavaScript中Document全局对象用法（附代码自行演示）

在JavaScript中，document对象是浏览器提供的一个全局对象，它代表了当前网页的整个HTML文档。

document对象提供丰富的属性和方法，允许开发者与HTML文档的内容进行交互，包括查找、创建、修改、删除元素以及处理文档结构和样式等。

以下个人总结document对象的一些常见用法，文末附相关检索内容，供深入研究使用，篇幅略大耐心品阅，文中有问题的地方希望大家指正补充：

1. 获取元素

注：let、const 声明和 var 声明用法是一样的，不同点在于 let、var 声明的是变量， const 声明的是常量。 var 存在变量提升， let、const 不存在变量提升。

1.1 getElementById(id)

通过元素的ID属性获取元素，返回匹配ID的第一个元素（如果有多个元素具有相同的ID，此方法仅返回第一个）。

const element = document.getElementById("myElement");

1.2 getElementsByClassName(className)

返回一个包含所有匹配指定类名的元素的NodeList集合。

const elements = document.getElementsByClassName("myClass");

1.3 getElementsByTagName(tagName)

返回一个包含所有指定标签名的元素的NodeList集合。

const paragraphs = document.getElementsByTagName("p");

1.4 querySelector(selector)

使用CSS选择器获取文档中匹配的第一个元素。

Javascript

const firstHeading = document