、 等。元素节点可以有子节点和属性。我们可以通过 document.createElement(tagName) 方法来创建一个元素节点。

3.属性节点

属性节点指 HTML 中元素的属性，如 id、class、style 等。属性节点与元素节点是一一对应的关系。我们可以通过 element.getAttribute(attributeName) 方法来获取元素的属性值。

4.文本节点

文本节点是指 HTML 中元素的文本内容。我们可以通过 document.createTextNode(data) 方法创建一个文本节点，通过 element.firstChild.nodeValue 属性来获取元素的文本内容。

5.注释节点

注释节点是指 HTML 中的注释内容。我们可以通过 document.createComment(data) 方法创建一个注释节点。

二、DOM 操作方法

DOM 操作方法主要包括以下几类：

1.选择器

选择器是指通过指定规则从 DOM 树中选取元素的方法。常用的选择器有：

(1)getElementById(id)：根据元素 id 获取元素节点。

(2)getElementsByTagName(tagName)：根据元素标签名获取所有的元素节点。

(3)getElementsByClassName(className)：根据元素 class 名称获取所有的元素节点。

(4)querySelector(selector)：根据 CSS 选择器语法获取符合条件的第一个元素节点。

(5)querySelectorAll(selector)：根据 CSS 选择器语法获取所有符合条件的元素节点。

2.节点操作

节点操作主要包括以下几类：

(1)创建节点：document.createElement(tagName)、document.createTextNode(data)、document.createComment(data)。

(2)插入节点：parentNode.appendChild(node)、parentNode.insertBefore(newNode, referenceNode)。

(3)删除节点：parentNode.removeChild(node)。

(4)替换节点：parentNode.replaceChild(newNode, oldNode)。

(5)克隆节点：node.cloneNode(boolean)。

3.属性操作

属性操作主要包括以下几类：

(1)获取属性：element.getAttribute(attributeName)、element.getAttributeNS(namespaceURI, localName)。

(2)设置属性：element.setAttribute(attributeName, attributeValue)、element.setAttributeNS(namespaceURI, qualifiedName, value)。

(3)删除属性：element.removeAttribute(attributeName)。

(4)属性判断：element.hasAttribute(attributeName)、element.hasAttributeNS(namespaceURI, localName)。

4.样式操作

样式操作主要包括以下几类：

(1)获取样式：element.style.property。

(2)设置样式：element.style.property = value。

(3)样式计算：getComputedStyle(element, [pseudoElement])。

5.事件操作

事件操作主要包括以下几类：

(1)绑定事件：element.addEventListener(type, listener[, options])。

(2)移除事件：element.removeEventListener(type, listener[, options])。

(3)事件触发：element.dispatchEvent(event)。

三、DOM 操作案例

下面，我们来看一个具体的 DOM 操作案例：在页面上动态添加一个元素节点。

HTML 代码如下：

```html

```

JS 代码如下：

```javascript

var container = document.getElementById('container');

var p = document.createElement('p');

var content = document.createTextNode('这是新增的段落');

p.appendChild(content);

container.appendChild(p);

```

运行结果如下：

```html

```

以上代码用到了 getElementById 和 createElement 方法，通过先获取到容器 div 的节点，然后创建一个 p 元素节点，并将文本节点添加到该元素节点中，最后将该元素节点添加到容器节点中，完成了向页面添加一个元素节点的操作。

总结：

DOM 是一种操作网页内容的标准 API，可以通过 DOM 操作实现网页内容的增删改查等功能。DOM 的树状结构由文档节点、元素节点、属性节点、文本节点和注释节点组成。DOM 操作方法主要分为选择器、节点操作、属性操作、样式操作和事件操作等。通过以上案例我们可以看出，DOM 操作不仅是 Web 应用程序的基础，而且是不可或缺的一部分。

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

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