逐层解剖文档对象模型 DOM 节点操作（上）

什么是 DOM 节点

DOM 节点是 DOM 文档中的基本单位，它可以是元素、属性、文本、注释、文档片段等。每个节点都有自己的类型、名称、值和子节点。

DOM 节点操作

DOM 节点操作是指对 DOM 节点进行增、删、改、查等操作，以便动态修改网页内容。常见的 DOM 节点操作包括：

• 创建节点：使用 document.createElement() 方法创建新的 DOM 节点。
• 添加节点：使用 parentNode.appendChild() 方法将子节点添加到父节点中。
• 删除节点：使用 parentNode.removeChild() 方法从父节点中删除子节点。
• 替换节点：使用 parentNode.replaceChild() 方法用新节点替换现有节点。
• 移动节点：使用 parentNode.insertBefore() 方法将子节点移动到另一个子节点之前。
• 获取节点：使用 document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName() 等方法获取 DOM 节点。
• 设置节点属性：使用 node.setAttribute() 方法设置节点的属性值。
• 获取节点属性：使用 node.getAttribute() 方法获取节点的属性值。
• 节点遍历：使用 node.firstChild、node.lastChild、node.nextSibling、node.previousSibling 等属性遍历 DOM 节点。

DOM 节点操作示例

以下是一些 DOM 节点操作的示例：

• 创建一个新的 div 元素并将其添加到 body 元素中：

var newDiv = document.createElement('div');
document.body.appendChild(newDiv);

• 删除 body 元素中的第一个子节点：

document.body.removeChild(document.body.firstChild);

• 将 body 元素中的第一个子节点移动到最后一个子节点之前：

document.body.insertBefore(document.body.firstChild, document.body.lastChild);

• 获取具有 id="myDiv" 的 div 元素：

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

• 设置具有 id="myDiv" 的 div 元素的 style 属性：

myDiv.setAttribute('style', 'color: red;');

• 获取具有 id="myDiv" 的 div 元素的 style 属性值：

var styleValue = myDiv.getAttribute('style');

结语

DOM 节点操作是前端开发的基础知识，掌握了 DOM 节点操作，可以轻松实现网页内容的动态修改，从而打造出更加交互性、动态性的网页。