前后端编程技术心得

暗黑模式

DOM 操作：深入解析与实战指南 ​

引言 ​

DOM（文档对象模型）是 Web 开发中的一个关键概念，它为编程语言提供了访问和操作网页内容的接口。在本文中，我们将探讨如何在 JavaScript 中使用 DOM 来实现各种常见操作。

DOM 的基础结构 ​

DOM 将一个 HTML 文档表示为一个树形结构，其中每一个节点都是文档中的一个部分（比如一个元素或一个文本）。

html
<!DOCTYPE html>
<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

在这个例子中，html, head, title, body, h1 都是 DOM 树的节点。

选择元素（Selecting Elements） ​

在 JavaScript 中，有多种方式可以选择 DOM 元素。

通过 ID 选择 ​

javascript
const titleElement = document.getElementById("myTitle");

通过类名选择 ​

javascript
const paragraphs = document.getElementsByClassName("myClass");

通过标签名选择 ​

javascript
const headings = document.getElementsByTagName("h1");

使用 CSS 选择器 ​

javascript
const mainDiv = document.querySelector(".main");

修改元素（Manipulating Elements） ​

改变文本内容 ​

javascript
const heading = document.querySelector("h1");
heading.textContent = "New Title";

改变 HTML 内容 ​

javascript
const div = document.querySelector("div");
div.innerHTML = "<p>New Paragraph</p>";

设置属性 ​

javascript
const link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");

添加和移除样式 ​

javascript
const box = document.querySelector(".box");
box.classList.add("newClass");
box.classList.remove("oldClass");

创建与删除节点（Creating and Deleting Nodes） ​

创建新元素 ​

javascript
const newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph.";

将元素添加到 DOM 树 ​

javascript
const parentDiv = document.querySelector(".parent");
parentDiv.appendChild(newPara);

删除元素 ​

javascript
const paraToDelete = document.querySelector(".deleteMe");
paraToDelete.parentNode.removeChild(paraToDelete);

事件处理（Event Handling） ​

在 JavaScript 中，你可以为 DOM 元素添加事件监听器。

javascript
const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  alert("Button Clicked!");
});

总结 ​

DOM 操作是前端开发中非常重要的一部分，掌握它对于构建动态和交互式的网站是至关重要的。本文提供了关于如何选择、修改、创建和删除 DOM 元素，以及如何处理事件的基础知识。

这些基础知识将为你进一步学习和实现更复杂的 DOM 操作打下坚实的基础。

在下一篇文章中，我们将探讨更多高级和实用的 DOM 操作技巧。敬请期待！