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脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
前端开发中如何实现类似 VSCode 的面板拖拽调整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中，如何实现类似于VSCode...
