Html页面Dom对象之Document

HTML文档对象模型（DOM）是指HTML文档的逻辑结构表示。它定义了访问和操作HTML文档的方法和属性。文档对象是DOM的最顶层对象，代表整个HTML文档。

## 1. Document对象的属性和方法

### 常用属性：

- `document.title`：获取或设置文档的标题。

- `document.head`：获取文档的头部（``）元素。

- `document.body`：获取文档的主体（``）元素。

- `document.documentElement`：获取文档的根元素（``）。

### 常用方法：

- `document.getElementById(id)`：根据元素的id属性获取元素对象。

- `document.getElementsByTagName(tagName)`：根据元素的标签名获取元素对象的集合。

- `document.getElementsByClassName(className)`：根据元素的类名获取元素对象的集合。

- `document.querySelector(selector)`：根据CSS选择器获取元素对象。

- `document.querySelectorAll(selector)`：根据CSS选择器获取元素对象的集合。

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

- `document.createTextNode(data)`：创建一个包含指定文本的文本节点。

- `document.appendChild(node)`：将一个节点添加到文档中。

## 2. Document对象的应用

### 设置标题

```

document.title = "新标题";

```

### 获取元素对象

```

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

var elements = document.getElementsByTagName("div");

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

var element = document.querySelector("#myElement");

var elements = document.querySelectorAll("div.myClass");

```

### 创建和插入元素

```

var newElement = document.createElement("div");

var newText = document.createTextNode("新元素");

newElement.appendChild(newText);

document.body.appendChild(newElement);

```

### 修改元素样式

```

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

element.style.color = "red";

element.style.backgroundColor = "yellow";

```

## 3. Document对象的案例说明

### 案例1：动态创建列表

```html

```

上述代码通过JavaScript在页面中动态创建了一个包含5个列表项的无序列表。

### 案例2：动态修改样式

```html

点击修改样式

```

上述代码通过JavaScript为按钮元素添加了一个`highlight`类名，从而实现了点击按钮后变为红色和加粗显示。

## 结论

Document对象提供了丰富的方法和属性，用于操作和访问HTML文档的各个部分。开发者可以根据需要使用这些方法和属性来实现各种功能，比如动态创建元素、修改样式、获取元素等。通过灵活运用Document对象，可以使HTML页面具有更丰富的交互性和用户体验。

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

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