JavaScript 和 HTML DOM 参考 - JavaScript

JavaScript 是一种轻量级的编程语言，用于 Web 应用程序的开发。 它是一种解释性语言，这意味着代码可在一行一行地执行，无需在运行之前进行编译。 JavaScript 被广泛用于网页开发中，用于实现动态效果、增强用户交互性和与服务器进行通信等。

本参考指南提供有关 JavaScript 和 HTML DOM 的基本知识和技术，旨在帮助开发人员快速了解并使用这些技术。

JavaScript 基础知识

变量和数据类型

JavaScript 可以处理各种数据类型，包括字符串、数字、布尔值、数组、对象和空值等。 变量是存储数据的容器。 使用关键字 var 来声明变量，这是 JavaScript 中最常用的变量声明方式。

// 声明一个名为 name 的字符串变量
var name = "John";
// 声明一个名为 age 的数字变量
var age = 25;
// 声明一个名为 isMale 的布尔变量
var isMale = true;
// 声明一个名为 hobbies 的数组变量
var hobbies = ["reading", "swimming", "traveling"];
// 声明一个名为 person 的对象变量，包括 name 和 age 属性
var person = { name: "John", age: 25 };

// 声明一个空值变量
var emptyVariable;

运算符和控制结构

JavaScript 支持各种运算符，包括算术运算符、比较运算符和逻辑运算符等。 运算符用于操作一些值或变量，以生成新的值。

控制结构是根据逻辑条件对代码进行操作的一种机制。 控制结构包括条件语句、循环语句和函数等。

// 使用 if-else 语句执行条件判断
if (age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are a child");
}

// 使用 for 循环迭代数组
for (var i = 0; i < hobbies.length; i++) {
  console.log(hobbies[i]);
}

// 声明一个名为 addNumbers 的函数，接受两个数字并返回它们的总和
function addNumbers(num1, num2) {
  return num1 + num2;
}
// 调用 addNumbers 函数并将结果分配给变量 sum
var sum = addNumbers(10, 5);
console.log(sum); // 输出 15

HTML DOM

HTML DOM（文档对象模型）是一种用于在编程中访问和操作 HTML 文档的标准对象集合。 通过使用 JavaScript，我们可以使用 HTML DOM 完成以下操作：

• 查找 HTML 元素并更改其内容、属性和样式
• 添加新 HTML 元素和属性
• 从 HTML 中删除元素和属性
• 响应事件，如单击、鼠标移动等

查找 HTML 元素

使用 HTML DOM，我们可以通过多种方式查找 HTML 元素，包括 ID、类名、标记名称和选择器等。

// 通过 ID 查找元素并更改其内容
document.getElementById("myHeading").innerHTML = "Hello World";

// 通过类名查找元素并更改其样式
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "red";
}

// 通过标记名称查找元素并更改其属性
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
  links[i].href = "https://example.com";
}

// 使用选择器查找元素并更改其内容
document.querySelector("#myDiv p:first-child").innerHTML = "Hello World";

添加和删除 HTML 元素

使用 HTML DOM，我们可以添加和删除 HTML 元素及其属性。

// 添加一个新的 <div> 元素
var newDiv = document.createElement("div");
newDiv.id = "newDiv";
newDiv.innerHTML = "This is a new DIV element.";
document.body.appendChild(newDiv);

// 删除一个 <ul> 元素和其子元素
var oldList = document.getElementById("myList");
oldList.parentNode.removeChild(oldList);

响应事件

使用 HTML DOM 和 JavaScript，我们可以为 HTML 元素添加事件处理程序，并响应特定事件，如单击、鼠标移动等。

// 添加一个单击事件处理程序
document.getElementById("myButton").addEventListener("click", function () {
  alert("Button clicked!");
});

// 更改背景颜色以响应鼠标移动事件
document.addEventListener("mousemove", function (event) {
  document.body.style.backgroundColor =
    "rgb(" + event.clientX + "," + event.clientY + ",100)";
});

以上是 JavaScript 和 HTML DOM 的一些基本知识和技术。 希望您可以通过学习本参考指南，更好地理解和使用这些技术。