HTML页面的DOM对象中最重要的是document对象。本文将介绍document对象的详细信息，包括它的属性、方法、用法和实例。

一、document对象的属性

1. document.compatMode

该属性用于指示页面使用的渲染模式，可以取两个值："CSS1Compat"和"BackCompat"。前者指示页面使用了标准模式渲染，而后者指示页面使用了怪异模式渲染。

2. document.documentURI

该属性用于获取页面的URL地址。

3. document.domain

该属性用于获取或设置当前页面的域名，但是只有当当前域名与该属性的值匹配时才能设置该属性。

4. document.title

该属性用于获取或设置当前页面的标题。

5. document.URL

该属性用于获取当前页面的URL地址。

6. document.referrer

该属性用于获取当前页面的来源页面的URL地址。

7. document.head

该属性用于获取当前页面的头元素。

8. document.body

该属性用于获取当前页面的主体元素。

二、document对象的方法

1. document.getElementById()

该方法用于根据元素的ID属性获取该元素的DOM对象。

2. document.getElementsByName()

该方法用于根据元素的name属性获取一组元素的DOM对象，返回一个NodeList对象。

3. document.getElementsByTagName()

该方法用于根据元素的标签名获取一组元素的DOM对象，返回一个NodeList对象。

4. document.createElement()

该方法用于创建一个新的HTML元素。

5. document.createTextNode()

该方法用于创建一个包含指定文本的文本节点。

6. document.createAttribute()

该方法用于创建一个新的属性节点。

7. document.createEvent()

该方法用于创建一个新的事件对象。

三、document对象的用法

1. 修改页面元素的样式。

```js

document.getElementById("myDiv").style.color = "red";

```

2. 在页面中添加新元素。

```js

var para = document.createElement("p");

var node = document.createTextNode("这是一个新段落。");

para.appendChild(node);

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

element.appendChild(para);

```

3. 改变页面中元素的内容。

```js

document.getElementById("myP").innerHTML = "新段落文本。";

```

4. 在页面中添加新的HTML代码。

```js

document.getElementById("myDiv").innerHTML = "

新标题

```

四、document对象的实例

案例1： 更改页面背景颜色

```html

更改背景颜色

```

案例2： 添加新元素

```html

添加新段落

```

总结：

以上就是关于document对象的详细介绍，包括它的属性、方法、用法和实例。document对象是HTML页面中最重要的DOM对象之一，它提供了许多API供开发人员操作DOM元素，实现动态效果。开发人员可以根据项目需求选择不同的方法和属性，更好地操作HTML页面中的DOM元素，提高交互性和用户体验。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/