JS document对象简单用法完整示例

让我们来详细讲解“JS document对象简单用法完整示例”的攻略。文本将被分为几个部分：介绍什么是document对象、document对象的一些属性和方法、示例说明。

什么是document对象？

document 对象是指代整个文档的根节点，所有的HTML元素都是文档的后代，可以通过该对象来操作 HTML 页面。

document对象的属性和方法

document 对象有许多属性和方法，有些是只读的，有些可以修改。

常用属性：

• document.title：获取或设置页面的标题。
• document.URL：获取当前文档的 URL 地址。
• document.domain：获取或设置文档的域名。
• document.body：获取文档的 body 元素。

常用方法：

• document.createElement(tagName)：创建 HTML 元素。
• document.getElementById(id)：根据元素的 id 属性获取元素。
• document.getElementsByClassName(className)：根据元素的 class 属性获取一组元素。
• document.querySelector(selector)：根据 CSS 选择器获取一个元素。
• document.querySelectorAll(selector)：根据 CSS 选择器获取一组元素。

示例说明

示例一：获取页面中某个元素并修改其内容

// 获取 ID 为 demo 的元素
var demo = document.getElementById("demo");
// 修改元素的内容
demo.innerHTML = "Hello World!";

上面的代码获取了 ID 为 demo 的元素，并将其内容修改为 Hello World!。

示例二：创建一个新的元素并插入到页面中

// 创建一个新的 p 元素
var newParagraph = document.createElement("p");
// 添加一些文本
newParagraph.innerHTML = "这是一个新的段落。";
// 获取 ID 为 demo 的元素
var demo = document.getElementById("demo");
// 将新元素添加到 demo 元素中
demo.appendChild(newParagraph);

上面的代码创建了一个新的 p 元素，并将其内容设置为 这是一个新的段落。。然后，它获取了 ID 为 demo 的元素，并将新元素添加到该元素中。