DOM操作

DOM操作是指使用JavaScript对网页中的HTML标签进行增删改查等操作的技术。DOM（Document Object Model）是一种用来表示和操作HTML、XML文档的标准。下面将介绍常用的DOM操作方法。

1. 获取元素

通过 getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll等方法可以获取网页中的元素节点，返回的是一个对象或对象数组。

例如：

// 通过 ID 获取节点
var element = document.getElementById("example");

// 通过 class 名称获取节点
var elements = document.getElementsByClassName("example");

// 通过标签名获取节点
var elements = document.getElementsByTagName("p");

// 通过选择器获取节点
var element = document.querySelector("#example");
var elements = document.querySelectorAll(".example");

1. 更改元素属性

通过修改元素的属性可以更改元素的样式、文本内容、链接等信息。常用的属性有innerHTML、innerText、src、href、className等。

例如：

// 获取元素并修改属性
var element = document.getElementById("example");
element.innerHTML = "修改后的文本";
element.style.color = "red";
element.href = "https://www.example.com/";

1. 创建和插入节点

使用createElement方法可以创建一个元素节点，使用appendChild、insertBefore或者replaceChild方法可以将新节点插入到DOM树中。

例如：

// 创建元素节点
var newElement = document.createElement("p");
newElement.innerHTML = "新的段落";

// 将新节点插入到已有节点之后
var parent = document.getElementById("parent");
parent.appendChild(newElement);

// 将新节点插入到已有节点之前
var sibling = document.getElementById("sibling");
parent.insertBefore(newElement, sibling);

// 替换已有节点
var oldElement = document.getElementById("old");
parent.replaceChild(newElement, oldElement);

1. 删除节点

使用removeChild方法可以删除一个元素节点。

例如：

var element = document.getElementById("example");
element.parentNode.removeChild(element);

1. 事件监听

通过addEventListener或attachEvent方法可以为元素添加事件监听器，实现交互效果。

例如：

var button = document.getElementById("button");
button.addEventListener("click", function() {
    alert("按钮被点击");
});

以上是DOM操作的常用方法，掌握这些方法可以实现更加丰富的网页交互效果。