传统DOM支持哪些文档方法？-猿码集

传统DOM支持哪些文档方法？

DOM是指文档对象模型，是指对HTML、XML等文档进行访问、操作和更新的一种方法。传统DOM模型主要是指DOM Level 1和2，这些DOM版本对文档提供了多种方法，下面我们就来详细了解一下。

1. 获取元素节点方法

在DOM中，元素节点指的是HTML或XML文档中的元素标签，如div、p、ul等。获取元素节点的方法如下：


// 通过id获取元素节点
document.getElementById('elementId');
// 通过标签名获取元素节点
document.getElementsByTagName('tagName');
// 通过类名获取元素节点
document.getElementsByClassName('className');

其中，通过id获取元素节点是最常用的方法，也是最快捷的方法。而getElementsByTagName和getElementsByClassName方法返回的都是一个节点列表，需要遍历获取相应的元素节点。

2. 获取和设置元素节点属性

对于元素节点，我们经常需要获取或设置它的属性，比如获取图片的src属性，设置按钮的disabled属性等。这些操作可以通过以下方法实现：


// 获取元素属性
element.getAttribute('attributeName')
// 设置元素属性
element.setAttribute('attributeName', 'attributeValue');

其中，getAttribute方法可以获取任何属性的值，而setAttribute方法可以设置任何属性的值。

3. 获取和设置元素节点文本

对于文本节点，我们经常需要获取或设置它的文本，比如获取特定节点的文本内容，设置段落的文本等。这些操作可以通过以下方法实现：

// 获取元素文本 element.innerHTML // 设置元素文本 element.innerHTML = 'newText';

其中，innerHTML属性可以获取节点包含的HTML文本，并且可以用来设置节点的HTML内容。

4. 创建元素节点和文本节点

在DOM中，我们可以动态地创建元素和文本节点，并且可以对它们进行各种操作。创建元素和文本节点的方法如下：


// 创建元素节点
document.createElement('elementName');
// 创建文本节点
document.createTextNode('text');

其中，createElement方法可以创建一个指定名称的元素节点，而createTextNode方法可以创建一个包含指定文本的文本节点。

5. 插入和删除节点

对于DOM树中的节点，我们可以动态地插入和删除节点，包括从现有节点移动节点、加入新的节点等。插入和删除节点的方法如下：


// 插入节点
parentNode.appendChild(newNode); // 将newNode插入到parentNode最后一个子节点的位置
parentNode.insertBefore(newNode, referenceNode); // 将newNode插入到referenceNode之前的位置
// 删除节点
parentNode.removeChild(node); // 删除parentNode的子节点node

其中，appendChild方法将一个节点添加到父节点的末尾，insertBefore方法则将一个节点插入到指定节点的前面，而removeChild方法则将一个节点从它的父节点中删除。

6. 事件处理

DOM允许我们对文档中的事件进行响应处理，比如单击、双击、鼠标移动等。事件处理方法如下：


// 添加事件处理程序
element.onclick = function() { // do something };
// 移除事件处理程序
element.removeEventListener('click', func);

其中，onclick是一个事件类型，我们可以通过为其添加事件处理函数处理相应事件。removeEventListener方法用来移除事件处理器。

总结

以上就是传统DOM中支持的一些文档方法，这些方法可以让我们对文档进行增、删、查、改等操作，非常方便。同时，DOM也支持更多的方法和接口，以满足对文档的不同操作需求。

传统DOM支持哪些文档方法？