Html页面Dom对象之Document

HTML页面的DOM(Document Object Model)对象是表示整个文档的根节点。通过DOM对象，可以访问和操纵HTML文档中的所有元素和内容。在HTML中，DOM对象是通过document对象进行引用的。本文将详细介绍document对象的属性、方法以及一些常见的应用示例。

一、document对象的属性

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

示例：document.title = "新的标题";

2. document.URL：获取文档的完整URL。

示例：var url = document.URL;

3. document.domain：获取或设置文档的域名。

示例：document.domain = "example.com";

4. document.documentElement：获取文档的根元素(``)。

示例：var root = document.documentElement;

5. document.body：获取或设置文档的主体部分(``)。

示例：var body = document.body;

6. document.head：获取文档的头部(``)。

示例：var head = document.head;

7. document.cookie：获取或设置文档的Cookie。

示例：var cookie = document.cookie;

8. document.forms：获取当前文档中的所有表单元素的集合。

示例：var forms = document.forms;

9. document.images：获取当前文档中的所有图片元素的集合。

示例：var images = document.images;

10. document.links：获取当前文档中的所有链接元素的集合。

示例：var links = document.links;

二、document对象的方法

1. document.getElementById()：根据元素的id属性获取元素的引用。

示例：var element = document.getElementById("myElement");

2. document.getElementsByClassName()：根据元素的类名获取元素的引用。

示例：var elements = document.getElementsByClassName("myClass");

3. document.getElementsByTagName()：根据元素的标签名获取元素的引用。

示例：var elements = document.getElementsByTagName("div");

4. document.createElement()：创建一个新的元素。

示例：var newElement = document.createElement("p");

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

示例：var textNode = document.createTextNode("Hello World!");

6. document.querySelector()：返回匹配指定选择器的第一个元素。

示例：var element = document.querySelector(".myClass");

7. document.querySelectorAll()：返回匹配指定选择器的所有元素的集合。

示例：var elements = document.querySelectorAll("div");

8. document.write()：将指定的文本插入到文档中。

示例：document.write("Hello World!");

三、document对象的应用示例

1. 获取页面元素的值并进行操作：

```

获取值

```

2. 动态创建元素并添加到页面中：

```

创建段落

```

3. 修改页面元素的样式：

```

这是一个段落

改变样式

```

上述示例仅是document对象的一些常见应用，实际上document对象还有很多其他的属性和方法，可根据具体需求进行查阅和使用。通过document对象，我们可以方便地访问和操作HTML文档中的元素和内容，实现丰富的交互效果和功能。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/