在上一节中，我们介绍了 DOM 树的基本概念及其结构。在实际的网页开发中，DOM 操作是非常常见且重要的任务。通过 JavaScript 操作 DOM，我们可以实现动态更新网页内容、响应用户交互、控制页面布局等功能。在本节中，我们将深入探讨常见的 DOM 操作，包括如何查找、修改、删除和创建 DOM 元素。
查找元素
在操作 DOM 之前，我们首先需要找到想要操作的元素。JavaScript 提供了多种方法来查找 DOM 元素，每种方法都有其特定的应用场景。
通过ID查找元素
最常用的方法之一是通过元素的 ‘id‘ 属性来查找元素。每个 ‘id‘ 在整个文档中应该是唯一的，因此这种方法通常用于快速定位特定元素。
let element = document.getElementById("myElementId");通过类名查找元素
你可以使用 ‘getElementsByClassName‘ 方法查找具有特定类名的所有元素。这个方法返回一个类数组的 ‘HTMLCollection‘，你可以通过索引访问每个元素。
let elements = document.getElementsByClassName("myClassName");通过标签名查找元素
‘getElementsByTagName‘ 方法可以返回文档中具有指定标签名的所有元素，同样返回的是一个 ‘HTMLCollection‘。
let paragraphs = document.getElementsByTagName("p");使用CSS选择器查找元素
‘querySelector‘ 和 ‘querySelectorAll‘ 是更强大且灵活的方法，它们允许你使用 CSS 选择器语法来查找元素。‘querySelector‘ 返回匹配选择器的第一个元素，而 ‘querySelectorAll‘ 返回一个包含所有匹配元素的 ‘NodeList‘。
let firstParagraph = document.querySelector("p");
let allDivs = document.querySelectorAll("div");修改元素
一旦找到元素，我们可以通过 JavaScript 修改其内容、属性和样式。
修改内容
通过 ‘innerHTML‘ 属性，我们可以获取或设置元素的 HTML 内容。如果需要更改文本内容，可以使用 ‘textContent‘。
let element = document.getElementById("myElementId");
element.innerHTML = "<strong>New content</strong>";
element.textContent = "Just plain text";修改属性
‘setAttribute‘ 和 ‘getAttribute‘ 方法可以用来获取和设置元素的属性。例如，你可以更改一个链接的 ‘href‘ 属性。
let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");你也可以直接通过元素的属性来修改，例如：
link.href = "https://www.new-url.com";修改样式
使用 ‘style‘ 属性可以直接更改元素的内联样式。这种方法适合在特定情况下动态调整元素样式。
let element = document.getElementById("myElementId");
element.style.color = "red";
element.style.fontSize = "20px";删除元素
DOM 操作中，删除元素是一个常见的操作。通过 ‘removeChild‘ 或 ‘remove‘ 方法，你可以从 DOM 树中删除不再需要的元素。
使用‘removeChild‘
‘removeChild‘ 方法需要通过其父元素来删除指定的子元素。
let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");
parentElement.removeChild(childElement);使用‘remove‘
如果不需要保留对父元素的引用，你可以直接使用 ‘remove‘ 方法删除一个元素。
let element = document.getElementById("myElementId");
element.remove();创建元素
创建新的 DOM 元素是动态生成内容或布局的重要步骤。通过 ‘createElement‘ 方法，你可以创建一个新的 HTML 元素，然后使用 ‘appendChild‘ 或 ‘insertBefore‘ 方法将其添加到 DOM 树中。
创建并添加新元素
首先，使用 ‘createElement‘ 创建一个元素，然后通过 ‘appendChild‘ 将其添加到某个父元素中。
let newElement = document.createElement("div");
newElement.textContent = "This is a new div!";
document.body.appendChild(newElement);设置新元素的属性
创建元素后，你可以使用 ‘setAttribute‘ 或直接设置属性值来配置新元素的属性。
newElement.setAttribute("class", "new-class");
newElement.id = "newElementId";在特定位置插入新元素
使用 ‘insertBefore‘ 方法可以将新元素插入到特定位置。
let parentElement = document.getElementById("parent");
let newElement = document.createElement("p");
newElement.textContent = "Inserted paragraph";
let referenceElement = document.getElementById("referenceChild");
parentElement.insertBefore(newElement, referenceElement);在这个例子中，新创建的 ‘p‘ 元素被插入到 ‘referenceChild‘ 元素之前。
总结
掌握 DOM 操作是编写交互式网页应用的基础技能。通过查找、修改、删除和创建元素，开发者可以动态地操控网页内容，提升用户体验。随着你对这些操作的深入理解和实践，你将能够更灵活地使用 JavaScript 操控 DOM，构建更加复杂和动态的网页应用。无论是实现简单的交互效果，还是构建复杂的单页应用（SPA），DOM 操作都是不可或缺的一部分。熟练掌握这些操作，将使你在前端开发的道路上更加游刃有余。