Html页面Dom对象之Document

文档对象模型（DOM，Document Object Model）是W3C（World Wide Web Consortium）组织推荐的一种用于表示HTML和XML文档的标准编程接口。文档对象模型呈现了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构和展示方式。文档对象模型分为三个部分：核心DOM，XMLDOM，HTMLDOM，其中HTMLDOM是DOM中最常用到的一种。而文档对象模型的核心就是Document对象，本文将对Document对象进行详细介绍，并介绍其常用的属性和方法，最后给出一些实例说明。

一、Document对象介绍

HTML文档根据W3C标准，Document对象表示整个文档（HTML页面）。Document对象是HTML页面的最高层次的核心对象，它是文档的根节点。Document对象是JS操作DOM的入口，我们通常是通过Document对象来获取某个节点，或是将某个节点添加到文档中。

Document对象的几个最重要的方法和属性：

属性

- document.charset 字符集

- document.documentElement 整个页面的文档元素

- document.body 页面内容的主体部分

- document.head 页面头部信息

- document.URL 文档地址

- document.referrer 跳转来源地址

- document.title 页面标题

- document.domains 文档域

方法

- document.getElementById() 获得某个ID的元素

- document.getElementsByName() 获得按照NAME属性的集合

- document.getElementsByTagName() 获得全部指定的元素类型

- document.createElement() 创建一个元素

- document.createTextNode() 创建一个文本节点

- document.write() 把内容输出到页面上

二、Document对象常用属性的具体介绍

1、document.charset 字符集属性

该属性用于读取或设置文档的字符集。如果没有定义该属性，则属性默认值为‘UTF-8’。

2、document.documentElement 文档元素属性

该属性返回文档的第一个元素，即文档元素。

3、document.body 页面主体属性

该属性返回文档中的``元素。``元素包含文档的全局内容，也称为文档内容的主体部分。``元素只在每个HTML文档中出现一次。

4、document.head 页面头部属性

该属性返回文档第一个head元素。该元素包含文档信息的头部内容，包括文档标题、元数据和其他头部标签的信息。

5、document.URL 文档地址属性

该属性返回文档的URL。如果设置了base元素，则返回的值为相对于该元素的URL。

6、document.referrer 来源地址属性

该属性返回的是从当前页面跳转过来的页面的URL。该属性用于跟踪页面来源和计算广告分成。

7、document.title 页面标题属性

该属性返回或设置文档标题。文档标题在浏览器中的标题栏、书签和搜索结果中显示。

8、document.domains 文档域属性

该属性用于设置文档的域名。当文档包含从其他域名加载的资源（如图片、脚本等）时，可能会遇到跨域问题。通过使用该属性设置文档域名，可以避免这些问题。

三、Document对象常用方法的具体介绍

1、document.getElementById()方法

该方法用于获取指定id的元素节点。id是元素的属性，相当于元素的唯一标识符。使用该方法返回的是一个DOM对象。

2、document.getElementsByName()方法

该方法用于获取指定name属性值的元素节点集合。使用该方法返回的是HTMLCollection对象，可以通过循环遍历的方式获取其中的元素节点。

3、document.getElementsByClassName()方法

该方法用于获取指定类名的元素节点集合。使用该方法返回的是HTMLCollection对象，可以通过循环遍历的方式获取其中的元素节点。

4、document.getElementsByTagName()方法

该方法用于获取指定标签名的元素节点集合。使用该方法返回的是HTMLCollection对象，可以通过循环遍历的方式获取其中的元素节点。

5、document.createElement()方法

该方法用于创建一个元素节点。可以根据需要指定元素的标签名、ID、类名、文本内容等属性，通过该方法创建出的元素节点是还没有添加到DOM节点中的。

6、document.createTextNode()方法

该方法用于创建一个文本节点。可以将创建好的文本节点添加到已经存在的元素节点下，为元素添加内容。

7、document.write()方法

该方法用于在HTML文档流中插入指定内容。使用该方法可以将指定的字符串作为HTML内容写入到文档的当前位置，实现页面的动态刷新和更新。

四、Document对象案例实例说明

1、获取文档元素

使用document.documentElement获取文档元素，并输出其标签名和属性。

```js

var docEle = document.documentElement;

console.log(docEle.tagName);

console.log(docEle.attributes);

```

2、获取文档中的元素

使用getElementById()方法获取文档中指定id的元素。

```js

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

```

3、创建元素节点

使用createElement()方法创建一个新的div元素，并将其添加到body元素中。

```js

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

document.body.appendChild(myDiv);

```

4、创建文本节点

使用createTextNode()方法创建一个新的文本节点，并将其添加到已有的元素节点中。

```js

var myText = document.createTextNode("Hello World");

document.getElementById("myElement").appendChild(myText);

```

5、输出内容到页面

使用write()方法向HTML页面输出内容。在使用该方法输出内容后，页面会根据代码生成新的HTML元素，可以看到页面的动态更新。

```js

document.write("Hello World!");

```

以上就是Document对象的介绍，包括其常用属性和方法以及使用实例。掌握Document对象的使用，可以使我们更好的操作DOM，实现更丰富、生动的页面交互效果。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/