JavaScript 中的 DOM 操作
第 7 天：JavaScript 中的 DOM 操作
日期：2024 年 12 月 14 日
欢迎来到 JavaScript 学习之旅的第七天！今天的主题重点是 DOM 操作，这是 JavaScript 最令人兴奋的方面之一。通过 DOM 操作，您可以动态更新、添加或删除网页中的元素，使其具有交互性和用户友好性。在今天的课程结束时，您还将创建一个简单的待办事项列表项目，将您的知识付诸实践。
1.什么是 DOM？
文档对象模型 (DOM) 是 Web 文档的编程接口。它将 HTML 文档的结构表示为对象树，允许您使用 JavaScript 以编程方式访问和操作元素。
以下是 DOM 如何表示 HTML 的示例：
<html>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
上面的 DOM 树看起来像这样：
Document
└── html
└── body
├── h1
└── p
2.访问 DOM 元素
您可以使用多种方法访问 DOM 中的元素：
使用 getElementById
let title = document.getElementById("title");
console.log(title); // Logs the element with ID "title"
使用 getElementsByClassName
let items = document.getElementsByClassName("item");
console.log(items); // Logs all elements with class "item"
使用 querySelector 和 querySelectorAll
let firstItem = document.querySelector(".item"); // First element with class "item"
let allItems = document.querySelectorAll(".item"); // All elements with class "item"
3.修改 DOM 元素
更改内容
您可以使用以下方法更新元素内的文本或 HTML：
- innerText：更新可见文本。
- innerHTML：更新 HTML 内容。
let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting
改变风格
可以直接修改元素的CSS样式。
let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";
添加或删除课程
let box = document.getElementById("box");
box.classList.add("highlight"); // Adds a class
box.classList.remove("highlight"); // Removes a class
4.处理事件
事件可以让您的网页具有互动性。以下是一些常见的事件类型以及如何处理它们。
内联事件处理
在您的 HTML 中：
<button onclick="alert('Button Clicked!')">Click Me</button>
使用addEventListener
这种方法是首选，因为它将 JavaScript 与 HTML 分开。
let button = document.getElementById("btn");
button.addEventListener("click", function () {
alert("Button Clicked!");
});
常见事件
- click：单击元素时触发。
- mouseover：当鼠标悬停在元素上时触发。
- keyup：释放按键时触发。
示例：
<html>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
5.项目：待办事项列表
让我们将您所学到的内容结合到一个简单的待办事项列表应用程序中。
HTML 结构
Document
└── html
└── body
├── h1
└── p
如何运作
- 用户在输入字段中键入任务。
- 单击“添加任务”会创建一个新的
- 元素与任务。
- 每个任务都有一个“删除”按钮来删除它。
6.要点
- DOM Access：使用 getElementById 和 querySelector 等方法。
- DOM 修改：动态更改内容、样式和类。
- 事件处理：使用 addEventListener 使页面具有交互性。
- 练习项目：建立一个待办事项列表来巩固您的知识。
第 7 天的练习任务
- 将“标记为完成”功能添加到您的待办事项列表中。
- 创建一个购物清单应用程序，用户可以在其中输入商品及其数量。
- 在一个小项目中试验鼠标悬停和按键等事件类型。
后续步骤
明天，第 8 天，我们将探索错误处理和调试，学习如何处理 JavaScript 代码中的意外问题。到时候见！
以上是JavaScript 中的 DOM 操作的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
