Html页面Dom对象之Document

Document对象是JavaScript中操作HTML页面的重要对象之一，它是整个文档的根节点。在HTML中，Document对象代表整个HTML文档，它可以通过JavaScript来修改、读取和操作HTML页面中的元素和内容。本文将详细介绍Document对象的属性、方法、使用方法及案例说明。

一、Document对象的属性

1. doctype：返回文档类型声明的节点。

2. documentElement：返回文档的根节点。

3. documentMode：返回当前文档的文档模式。

4. designMode：指定文档的设计模式，有off(关闭)和on(打开)两个值。

5. URL：返回当前文档的URL。

6. domain：返回当前文档的域名。

7. title：返回当前文档的标题。

8. cookie：设置或返回与当前文档关联的cookie。

9. charset：设置或返回当前文档的字符集。

二、Document对象的方法

1. getElementById(id)：返回带有指定ID的元素。

2. getElementsByTagName(tagName)：返回指定标签名的元素集合。

3. getElementsByClassName(className)：返回带有指定class名的元素集合。

4. createElement(tagName)：创建指定名称的元素节点。

5. createTextNode(text)：创建指定文本节点。

6. getElementById(id).innerHTML：读取或设置元素的HTML内容。

7. getElementById(id).innerText：读取或设置元素的纯文本内容。

8. getElementById(id).setAttribute(attribute, value)：设置元素的属性和值。

9. getElementById(id).getAttribute(attribute)：获取元素的属性的值。

10. getElementById(id).appendChild(element)：将指定节点添加到元素的子节点列表的末尾。

11. getElementById(id).removeChild(element)：删除指定节点。

12. getElementById(id).replaceChild(newElement, oldElement)：用一个新子节点替换指定的子节点。

13. createElementNS(namespaceURI, qualifiedName)：根据指定的名称和命名空间URI创建一个元素节点。

14. createAttribute(attributeName)：创建指定名称的属性节点。

三、Document对象的使用方法

1. 获取文档元素

使用getElementById()方法可以获取文档中的任何元素。例如：

```html

```

在该例子中，文档中的一个div元素被获取到，然后它的内容被弹出显示。

2. 创建文档元素

使用createElement()方法可以创建一个新的元素，例如：

```html

```

在该例子中，一个新的p元素被创建，然后一个文本节点被创建并添加到p元素中，最后p元素被添加到文档中的指定元素中。

3. 修改文档元素

使用setAttribute()方法可以设置元素的属性，例如：

```html

```

在该例子中，一个新的img元素被创建，并设置其src属性为"image.jpg"，最后将该元素添加到了文档的一个指定位置。

四、Document对象的案例说明

1. 动态创建表格

```html

```

该案例中，首先定义了一个data数组，其中存放着表格中要显示的内容，然后通过循环创建了一张表格，并根据数据内容为其添加了行和列。

2. 修改文档标题

```html

点击修改标题

```

在该案例中，通过点击按钮来调用changeTitle()函数，该函数则通过document对象来修改了该文档的标题。

3. 删除指定元素

```html

删除第二个段落

```

在该案例中，通过调用removeElement()函数来删除指定id的div元素中的第二个p元素。使用parentNode.removeChild()方法能够实现在DOM树中删除指定元素。

总结：

Document对象是JavaScript操作HTML页面的重要对象之一，它可以通过JavaScript来修改、读取和操作HTML页面中的元素和内容。本文介绍了Document对象的属性、方法、使用方法及案例说明，可以帮助开发人员更好地了解和使用Document对象，从而更好地开发和掌控自己的项目。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/