Html页面Dom对象之Document

HTML页面的DOM对象之Document 是用来访问和操作HTML页面的根节点。它是Web页面的入口，通过它可以获取页面中的各种元素，以及对它们进行增删改查等操作。

一、Document对象的常用属性：

1. document.body：获取页面的body元素。

2. document.documentElement：获取页面的根元素（一般是标签）。

3. document.title：获取或设置页面的标题。

4. document.URL：获取页面的URL地址。

5. document.head：获取页面的头部标签。

二、Document对象的常用方法：

1. getElementById(id)：根据元素的id属性获取页面上的元素。

2. getElementsByTagName(tagName)：根据元素的标签名获取页面上的元素。

3. getElementsByClassName(className)：根据元素的类名获取页面上的元素。

4. querySelector(selector)：使用CSS选择器语法获取页面上的元素。

5. querySelectorAll(selector)：使用CSS选择器语法获取页面上的所有符合条件的元素。

6. createElement(tagName)：创建一个新的元素节点。

7. createTextNode(text)：创建一个包含指定文本内容的文本节点。

8. appendChild(node)：向页面中的指定节点插入一个子节点。

9. removeChild(node)：从页面中移除指定的子节点。

10. replaceChild(newNode, oldNode)：用一个新节点替换页面上的指定节点。

11. cloneNode(deep)：克隆一个节点，deep参数表示是否同时克隆其子节点。

12. getElementById(id).value：获取或设置表单元素的值。

三、Document对象的应用案例：

1. 获取页面的标题：可以使用document.title属性获取当前页面的标题，例如：

```

console.log(document.title); // 输出页面的标题

```

2. 获取页面中的元素：可以使用getElementById、getElementsByTagName或getElementsByClassName等方法获取页面上的元素，例如：

```

let element = document.getElementById("id"); // 根据id获取元素

let elements = document.getElementsByTagName("tag"); // 根据标签名获取元素

let elements = document.getElementsByClassName("class"); // 根据类名获取元素

```

3. 修改页面的元素：可以使用元素的属性和方法对页面上的元素进行修改，例如：

```

let element = document.getElementById("id");

element.innerHTML = "新的内容"; // 修改元素的内容

let newElement = document.createElement("div"); // 创建一个新的元素节点

element.appendChild(newElement); // 向页面中的指定节点插入新节点

```

4. 使用CSS选择器获取元素：可以使用querySelector和querySelectorAll方法使用CSS选择器语法获取页面上的元素，例如：

```

let element = document.querySelector("#id"); // 使用id选择器获取元素

let elements = document.querySelectorAll(".className"); // 使用类名选择器获取元素

```

5. 表单操作：可以使用getElementById方法获取表单元素，然后使用value属性获取或设置其值，例如：

```

let input = document.getElementById("inputId"); // 获取输入框元素

let value = input.value; // 获取输入框的值

input.value = "新的值"; // 设置输入框的值

```

以上是Document对象的一些常用属性和方法，以及应用案例。通过使用这些属性和方法，可以方便地对HTML页面进行操作和修改，实现各种功能需求。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！