掌握 JavaScript 和 DOM 操作

介绍

在本实验中，你将通过 Alex 的视角走进 Web 开发的世界。Alex 是一位初出茅庐的 Web 开发者，他的任务是创建一个动态的个人财务追踪器。目标是构建一个用户友好的应用程序，让用户能够输入和追踪他们的日常支出和收入。目标很明确：开发一个既直观又引人入胜的界面，确保用户能够轻松无忧地管理财务。这个项目不仅旨在简化个人财务管理，还将向你介绍 JavaScript 和 DOM 操作的基本概念。

我们将通过 5 个实验室来完成 EconoMe 项目。

知识点：

变量声明（let, const）
DOM操作基础（获取元素、修改元素内容）
事件监听（addEventListener）

JavaScript 基础

JavaScript 是一种简单、面向对象、事件驱动的语言，它从服务器下载到客户端，由浏览器执行。

它可以与 HTML 和 Web 一起使用，并且更广泛地应用于服务器、个人电脑、笔记本电脑、平板电脑和智能手机。

其特点包括：

通常用于编写客户端脚本。
主要用于在HTML页面中添加交互行为。
它是一种解释型语言，按照解释的方式执行。

那么，我们如何在 HTML 中包含 JavaScript？

包含方法与CSS类似，可以通过三种方式完成：

直接在 HTML 标签中，适用于特别短的 JavaScript 代码。
使用<script>标签，JavaScript代码可以嵌入到HTML文档的正文<head>和正文中。<body>
使用外部JavaScript文件，将JavaScript脚本代码写入带有后缀的文件中.js，并通过设置标签src的属性来包含它<script>。

比如我们按F12，可以看到这个页面包含了很多外部的JavaScript文件；点击事件监听器，我们可以观察到页面内部有很多种类型的事件。

现在，让我们添加<script>标签来~/project/index.html包含该script.js文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EconoMe</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- Add the script tag to index.html -->
    <script src="./script.js"></script>
  </head>
  <body></body>
</html>

接下来我们来学习如何在JavaScript中定义变量！

什么是变量

变量可以看作是存储信息的容器。在编程中，我们使用变量来存储数据值。JavaScript 是一种动态类型语言，这意味着你不需要声明变量的类型。变量的类型会在程序执行过程中自动确定。

声明变量

在 JavaScript 中，可以使用var、let、或const关键字来声明变量：

var：在 ES6 之前，var是声明变量的主要方式，并且具有函数作用域。
let：在 ES6 中引入，let允许您声明块范围的局部变量。
const：也是在 ES6 中引入的，用于声明一个一旦声明就无法更改的常量。

例如：

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

变量的类型

在 JavaScript 中，有几种不同的数据类型：

字符串：文本数据，如"Hello, World!"。
数字：整数或浮点数，如42或3.14。
布尔值：true或false。
对象：可以存储多个值或复杂的数据结构。
null和undefined：分别代表“无值”和“未定义值”的特殊类型。

使用变量

一旦声明了变量，就可以在程序中使用它们：

console.log(name); // Outputs: Alice
console.log("Age: " + age); // Outputs: Age: 30
console.log(city + " is a beautiful city"); // Outputs: London is a beautiful city

静态方法console.log()向控制台输出一条消息。

DOM 操作

DOM（Document Object Model ）是一种跨平台、独立于语言的接口，它将 HTML 和 XML 文档视为树结构，其中每个节点都是文档的一部分，例如元素、属性和文本内容。

访问 DOM 元素

要操作网页内容，首先需要访问 DOM 树中的元素。您可以使用各种方法来访问元素，例如通过其 ID、类名或标签名：

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

~/project/script.js在EconoMe项目的文件中添加如下代码：

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

修改元素内容

一旦获得了元素的引用，就可以修改其内容。innerHTML和textContent属性通常用于此目的。

例如，要将插入<p>New HTML content</p>到 div 元素中id=content并将替换为 span 元素中的“新文本内容”中的“Hello” id=info，您可以使用以下 JavaScript 代码：

添加和删除元素

您可以使用 JavaScript 动态添加或删除页面上的元素。

例如：

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

在 HTML 文档中，该document.createElement()方法创建 HTML 元素。
该document.body.appendChild()方法将新元素添加到元素的末尾<body>。
该document.body.removeChild()方法从元素中移除元素<body>。

事件处理

事件监听器允许您响应用户操作。

addEventListener("event", function () {});

例如点击、悬停或按键：

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

学习了基本的DOM操作之后，可以在~/project/script.jsEconoMe项目的文件中增加如下代码：

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

JavaScript 中的该DOMContentLoaded事件在初始 HTML 文档完全加载并解析后触发，无需等待样式表、图片和子框架完成加载。这使得它成为一个重要的事件，用于在 DOM 准备就绪后立即运行 JavaScript 代码，确保脚本能够与完全解析的 HTML 元素进行交互。

本实验目前不需要预览效果。我们将在后续步骤中完成代码后再进行预览。

概括

在本实验中，您与 Alex 一起踏上了构建个人财务追踪器基础组件的旅程。您已搭建好项目环境，并使用 JavaScript 操作 DOM 来显示初始财务状态，为动态 Web 应用程序奠定了基础。关键在于理解 JavaScript 如何与 HTML 元素交互以动态更改网页内容，为后续步骤中更多交互功能奠定基础。

这种实践方法不仅巩固了您对 JavaScript 和 DOM 操作的理解，而且还模拟了真实的 Web 开发场景，为您未来更复杂的项目做好准备。

🚀 立即练习：JavaScript 和 DOM 基础知识

想要了解更多？

🌳 学习最新的JavaScript 技能树
📖 阅读更多JavaScript 教程
💬 加入我们的Discord或发推文给我们@WeAreLabEx

鏂囩珷鏉ユ簮锛�https://dev.to/labex/mastering-javascript-and-dom-manipulation-3e3e

掌握 JavaScript 和 DOM 操作

掌握 JavaScript 和 DOM 操作

介绍

JavaScript 基础

什么是变量

声明变量

变量的类型

使用变量

DOM 操作

访问 DOM 元素

修改元素内容

添加和删​​除元素

事件处理

概括

想要了解更多？

添加和删除元素