JavaScript基础：了解核心概念和技能-阿里云开发者社区

前言

JavaScript是一种非常强大的编程语言，被广泛应用于现代Web开发。它能够为网页带来交互性、实时性和动态性，让用户和开发人员的体验更加丰富和高效。但是，如果您是初学者，JavaScript可能会让您感到困惑或者不知所措。本篇博客将帮助您快速入门JavaScript，了解核心概念和技能，并提供一些实用示例。

JavaScript简介

JavaScript的历史和现状

JavaScript 是一种高级动态语言，常用于创建交互式网页、动画、游戏等网页应用程序，同时也被用于服务器端开发、桌面应用程序等领域。JavaScript的历史可以追溯到1995年，当时由 Netscape 公司的 Brendan Eich 开发出了这种语言。最初，JavaScript用于网页上的简单脚本，但现在已经发展成了一种广泛使用的编程语言。

随着互联网技术的飞速发展，JavaScript 的应用范围也越来越广泛。在 Web 开发中，JavaScript 已经成为必不可少的一部分，因为它可以增强网页的交互性和动态性。同时，JavaScript 也逐渐被应用于服务器端开发中，如 Node.js 等技术。

目前，JavaScript 的标准由国际标准化组织(ECMA)发布，其最新版本是 ECMAScript 2021。除了 ECMAScript 标准，还有许多第三方库和框架，如 React、Angular、Vue 等，使得 JavaScript 的应用范围更加广泛。

JavaScript代码的组成和规范

变量声明：使用 var、let 或 const 关键字来声明变量。
控制语句：使用 if、else、switch、for、while、do-while 等控制语句来实现条件判断和循环。
函数定义：使用 function 关键字定义函数。
表达式和操作符：使用加减乘除、赋值、比较、逻辑等操作符以及各种表达式来完成计算和逻辑运算。
对象和数组：使用对象和数组来存储和操作数据。

在编写 JavaScript 代码时，需要遵循以下规范：

使用驼峰命名法：变量名、函数名、对象属性名等都要使用驼峰命名法。

变量、函数的命名必须要有意义（推荐英文驼峰式拼接写法）
变量的名称一般用名词
函数的名称一般用动词

缩进和空格：使用空格或制表符来缩进代码，使代码结构清晰易读。
语句结束符：每一条语句结束后要加上分号，以避免出现意外错误。
注释：在代码中加上注释，说明代码的作用和用法，便于他人阅读和理解。
格式化代码：使用代码格式化工具来自动化地调整代码的格式，提高代码的可读性和可维护性。

数据类型

数字、字符串、布尔值、null和undefined

关于数字

JavaScript中有两种类型的数字：整数和浮点数
可以使用数字进行算术运算，比如加减乘除和取模(取余数)
JavaScript中有一些内置的数学函数，比如Math.ceil、Math.floor和Math.round，用于对数字进行舍入操作
可以使用运算符进行比较（==、!=、<、>、<=、>=）以及逻辑运算（&&、||、！）

关于字符串

字符串是一个包含零个或多个字符的文本序列
使用单引号、双引号或反引号来定义字符串
可以使用字符串连接运算符（+）将两个或多个字符串连接成一个字符串
可以使用.length属性获取字符串的长度
可以使用.charAt和.charCodeAt方法获取字符串中的字符
可以使用字符串的各种函数来进行操作，比如slice、substring、replace、trim等等

关于布尔值

布尔值只有两个值，true和false
布尔值通常用于条件语句和循环语句中，来控制程序的执行流程
可以使用比较运算符（==、!=、<、>、<=、>=）和逻辑运算符（&&、||、！）来得到布尔值

null和undefined

null表示“没有值”，代表一个变量或表达式的值为空
undefined表示“未定义”，通常用于表示变量没有被初始化或者不存在
null和undefined在比较时是相等的（==），但是它们的类型和值都不同
JavaScript中的null和undefined都属于“假值”，即在布尔上下文中会被认为是false

变量的声明和赋值

在JavaScript中，变量是用来存储数据的容器。变量可以在声明时给定一个初始值，或者在后面的赋值中指定值。

变量的声明可以使用关键字 var, let, const。其中，var 是早期的一种声明方法，let 和 const 是ES6引入的新语法。

变量的赋值可以使用 = 赋值操作符。可以将一个值赋给变量，如：

var name = "张三";
let age = 20;
const PI = 3.14;

其中 name 是使用 var 声明的变量，age 使用 let 声明， PI 使用 const 声明。

值可以是任何数据类型，包括数字、字符串、布尔值、空值、undefined 等等。例如：

let x = "hello";
let y = 123;
let z = true;
let a;
let b = null;
let c = undefined;

变量的名称也需要遵循一些规则。变量名可以由字母、数字和下划线组成，但不能以数字开头。变量名也应该具有描述性，以便于其他人读懂代码。

总之，理解和掌握JavaScript中变量的声明和赋值是非常重要的，它是编写JavaScript程序的基础。

字符串和数字的操作

字符串操作：

字符串的定义：字符串是由一系列字符组成的数据类型，可以使用单引号、双引号或反引号来定义字符串变量。
字符串的连接：可以使用“+”操作符将两个字符串连接起来，也可以使用concat()方法实现。
获取字符串的长度：可以使用length属性获取字符串的长度。
字符串的截取和提取：可以使用slice()、substring()和substr()方法来截取和提取字符串中的字符或子串。
字符串的查找和替换：可以使用indexOf()、lastIndexOf()和replace()方法来查找和替换字符串中的特定字符或子串。
字符串的转换和比较：可以使用toUpperCase()、toLowerCase()、toString()等方法来进行字符串的大小写转换和类型转换，可以使用或=等比较运算符来比较两个字符串是否相等。

数字操作：

数字的定义：数字是用来表示数值的数据类型，可以是整数或浮点数。
数字的表示方式：可以使用十进制、二进制、八进制和十六进制等不同的进制表示数字。
数字的四则运算：可以使用加、减、乘、除等四则运算符来对数字进行运算。
数字的取整和舍入：可以使用Math.floor()、Math.ceil()和Math.round()等方法来对数字进行取整和舍入。
数字的转换和比较：可以使用parseInt()、parseFloat()、toString()等方法来进行数字的类型转换和字符串转换，可以使用比较运算符如>、<、==、>=、<=等来比较两个数字的大小关系。

字符串转义符

常用知识点

检测获取字符串的长度 length
字符串的拼接 + ，只要有字符串和其他类型相拼接，最终的结果是字符串
+号总结口诀：数值相加，字符相连
布尔值和数字型相加的时候，true的值为1，false的值为0
promt 的到的用户输入值是字符串类型
还可以通过控制台输出的颜色判断类型
字面量是在源码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

运算符和表达式

算术、比较和逻辑运算符

JavaScript是一门基于对象的脚本语言，常用于Web开发中。其中，算术、比较和逻辑运算符是JavaScript的基本运算符之一，以下详细介绍：

算术运算符：

JavaScript中的算术运算符包括加法（+）、减法（-）、乘法（*）、除法（/）和取余（%）。其中，加法运算符可以用于数字相加和字符串连接两种情况。例如：

console.log(2+3); // 5
console.log("Hello"+" "+"World"); // "Hello World"

比较运算符：

JavaScript中的比较运算符可以用于比较两个值的大小关系，并返回布尔值（true或false）。常见的比较运算符包括大于（>）、小于（<）、等于（==）、不等于（!=）、大于等于（>=）和小于等于（<=）。例如：

console.log(2 > 3); // false
console.log(2 == "2"); // true

需要注意的是，当使用双等号（）时，JavaScript会先尝试将两个操作数转换为相同的类型，再进行比较。而当使用三等号（=）时，JavaScript会直接比较两个操作数的值和类型是否相等。

逻辑运算符：

JavaScript中的逻辑运算符用于组合多个条件，并返回布尔值（true或false）。常见的逻辑运算符包括逻辑与（&&）、逻辑或（||）和逻辑非（!）。例如：

console.log((2 > 1) && (3 > 2)); // true
console.log((2 > 1) || (3 < 2)); // true
console.log(!(2 > 1)); // false

需要注意的是，逻辑运算符的运算顺序与优先级可以通过使用括号来修改。例如，(a && b) || (c && d)表示先计算a && b和c && d的结果，再计算它们的逻辑或。

条件表达式和三元运算符

条件表达式是一种逻辑表达式，用于判断某个条件是否符合要求，如果符合则执行相应的代码块，如果不符合则执行其他的代码块。在JavaScript中，一个条件表达式通常使用if语句来表示，例如：

if (age >= 18) {
  console.log('你已经成年了');
}

上述代码中，age是一个变量，如果其值大于或等于18，就会输出’你已经成年了’这条语句。

三元运算符是一种简单的条件判断语句，用于根据某个条件来返回两个中的一个值。它通常由三个部分组成：条件表达式、如果条件为真时的返回值和如果条件为假时的返回值。例如：

let age = 20;
let message = age >= 18 ? '你已经成年了' : '你还未成年';
console.log(message);

上述代码中，age是一个变量，如果其值大于或等于18，就会返回’你已经成年了’，否则返回’你还未成年’。这个结果存储在变量message中，并被打印到控制台上。

总之，条件表达式和三元运算符是JavaScript中非常重要的知识点，它们可以使得代码更加简洁和易于阅读。在实际开发中，我们经常使用它们来进行条件判断和返回不同的值，从而实现更加精确的控制流程。

运算符优先级和括号的使用

JavaScript中运算符是按照一定优先级来计算的，不同的运算符在表达式中的优先级不同，如果表达式中有多个运算符，则会根据优先级的高低先执行高优先级的运算。

以下是JavaScript中常见运算符的优先级从高到低的排列：

圆括号: ()
一元运算符: ++、–、+、-、!、typeof、void
乘性运算符: 、/、%
加性运算符: +、-
比较运算符: <、<=、>、>=、instanceof
相等运算符: 、!=、=、!==
逻辑运算符: &&、||
赋值运算符: =、+=、-=、*=、/=、%=

需要注意的是，由于JavaScript中的运算符优先级并不总是直观的，因此在表达式中使用圆括号通常是一个好的做法，可以保证你的表达式被正确解释。

例如：

var result = (3 + 4) * 5;
console.log(result); // 35

在这个例子中，由于运算符优先级的问题，不加括号的话，表达式会先执行3+4，再将结果与5相乘，结果为35。加上括号后，括号内的运算会先执行，保证了结果的正确性。

还需要注意的是，在链式的运算中，使用圆括号来指定运算的顺序也是很重要的。例如：

var result = 10 + 5 * 2 - 3;
console.log(result); // 17

在这个例子中，由于乘法运算的优先级高于加减法运算，因此5*2会先被计算，结果为10。然后再加上10和3，得到最终的结果17。

如果想让加法优先计算，我们可以使用括号：

var result = (10 + 5) * 2 - 3;
console.log(result); // 27

在这个例子中，括号内的加法运算先被计算，结果为15。然后再乘以2和减去3，得到最终的结果27。

总的来说，使用括号可以使表达式更加明确，可读性更好，从而避免因优先级问题而导致的错误。

控制流程

if语句

JavaScript中，if语句是一种用于执行条件操作的控制语句。它用于在满足某个条件时执行一组代码块，否则执行其他代码块。if语句语法如下：

if (condition) {
   // 执行条件为真时的代码
} else {
   // 执行条件为假时的代码
}

其中，condition是需要满足的条件，如果该条件为真（true），则执行if代码块中的语句；如果条件为假（false），则执行else代码块中的语句。

除了基本的if语句，JavaScript中还有一些其他的if语句，如嵌套if语句和多重if语句：

嵌套if语句：

if (condition1) {
    // 若满足condition1，则执行此代码块
    if (condition2) {
        // 若同时满足condition1和condition2，则执行此代码块
    }
} else {
    // 若不满足condition1，则执行此代码块
}

多重if语句：

if (condition1) {
    // 若满足condition1，则执行此代码块
} else if (condition2) {
    // 若不满足condition1，但满足condition2，则执行此代码块
} else {
    // 若不满足condition1和condition2，则执行此代码块
}

在实际应用中，if语句常用于控制流程和操作DOM元素。例如，可以使用if语句判断用户输入的数据是否符合要求，或者根据用户点击的按钮来改变网页中的元素内容。

for循环和while循环

for循环
for循环是JavaScript中最常用的迭代结构，其语法如下：

for (初始化表达式; 条件表达式; 循环后操作) {
  // 循环体代码
}

初始化表达式定义循环开始前的操作，条件表达式定义循环执行的条件，循环后操作定义每次循环后执行的操作。这些表达式都是可选的，但必须在for关键字后面的圆括号中出现。

for循环的步骤如下：

执行初始化表达式
检查条件表达式是否为真，若为假则跳出循环
执行循环体代码
执行循环后操作
跳回步骤2

例如，以下代码将打印1到10之间的所有数字：

for (var i = 1; i <= 10; i++) {
  console.log(i);
}

while循环
while循环与for循环相比较，更加灵活，但是需要手动管理迭代变量。其语法如下：

while (条件表达式) {
  // 循环体代码
}

条件表达式定义循环执行的条件。只有在条件表达式为真时才执行循环体代码。若条件表达式一开始就为假，则循环体代码不会被执行。

while循环的步骤如下：

检查条件表达式是否为真，若为假则跳出循环
执行循环体代码
跳回步骤1

例如，以下代码将打印1到10之间的所有数字：

var i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

注意，若条件表达式一直为真，则会产生无限循环。因此，应确保条件表达式在某个时刻会变为假，以避免无限循环。

break和continue语句

break和continue都是JavaScript中的控制语句，用于控制循环的执行。

break语句用于跳出循环，可以用在for、while和do-while循环中。当程序执行到break语句时，循环会立即终止，并且程序会跳出循环体，继续执行下一条语句。

下面是一个示例，用于在数组中查找某一元素：

var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 3) {
    console.log("找到了3，退出循环");
    break;
  }
}

在上面的代码中，当程序执行到arr[i]===3时，会输出一条消息并且调用了break语句，循环会立即终止。

continue语句也用于控制循环的执行，但是它的作用不同于break。当程序执行到continue语句时，循环会跳过当前迭代的剩余部分，并立即进行下一次迭代。

下面是一个示例，用于打印出0-9之间所有偶数：

for (var i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

在上面的代码中，当i%2 !== 0时，调用了continue语句，程序会跳过当前迭代的剩余部分，并进行下一次迭代。

需要注意的是，break和continue语句只能在循环结构中使用，如果在其它结构中使用，会导致语法错误。此外，过多的使用break和continue语句会使代码难以维护，应该尽量避免滥用。

函数和作用域

函数的定义和调用

JavaScript中函数的定义和调用是基础中的基础，下面是详细的讲解：

函数的定义

在JavaScript中，函数定义的方式有两种：函数声明和函数表达式。

函数声明的语法格式如下：

function 函数名(参数1, 参数2, …){
  函数体
  return 返回值;
}

其中，函数名为必需的，参数可以有多个，参数之间用逗号隔开。函数体是函数要执行的代码，return语句用于返回函数的值，可以省略。

函数表达式的语法格式如下：

var 函数名 = function(参数1, 参数2, …){
  函数体
  return 返回值;
}

其中，函数名可选，可以将函数名省略变为匿名函数，也可以加上函数名。参数和函数体与函数声明的方式相同。

函数的调用

函数定义好之后，就可以通过函数调用来执行函数体中的代码了。

函数调用的语法格式如下：

函数名(参数1, 参数2, …)

其中，函数名为要调用的函数名，可以是函数声明或函数表达式定义的函数。参数和函数定义时的参数相同，如果函数定义时没有参数，调用时也可以省略参数。

需要注意的是，函数调用时会将参数传递给函数体中的形参，如果函数体中有return语句，函数会返回return语句后的值。如果函数没有return语句，或者return语句没有值，函数会返回undefined。

函数调用时，可以将函数作为参数传递给其他函数，也可以用new关键字创建一个新的对象。

形参和实参

形参是函数定义时带有的参数，是函数内部使用的变量，用于接收调用函数时传入的实参。形参通常在函数体中被使用。

例如：

function add(a, b) {
  return a + b;
}

在上面的例子中，a和b就是形参。

实参是在函数调用时传递给函数的值，也就是实际参数。实参的值被复制到函数的形参中，函数内部就可以使用这些值。

例如：

add(1, 2); // 3

在这个例子中，1和2就是实参。

它们的关系可以总结为：函数定义时声明的参数是形参，函数调用时传递的参数是实参。

需要注意的是，JavaScript中的函数调用是可以没有实参的，此时形参将使用默认值或是undefined。

例如：

function sayHello(name = 'World') {
  console.log(`Hello, ${name}!`);
}
sayHello(); // Hello, World!

在这个例子中，name的默认值是'World'，因此如果没有在调用函数时传递实参，该参数的值就是'World'。

箭头函数和闭包的概念

箭头函数是ES6的新特性之一，它的语法比较简洁，可以更方便地编写函数。箭头函数的语法形式为：

(param1, param2, …, paramN) => { statements }

其中，箭头函数的参数放在小括号内，如果只有一个参数，小括号可以省略，箭头后面跟着函数体。例如，以下是一个简单的箭头函数：

const square = (x) => {
  return x * x;
}

这个函数接受一个参数x，返回它的平方。箭头函数还有一些特殊用法，比如可以用作回调函数或数组方法的参数，例如：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

闭包是JavaScript中非常重要的概念之一，它指的是一个函数可以访问另一个函数内部的变量或函数，即使这个函数已经执行完毕。一个简单的例子：

function outer() {
  const message = 'Hello, world!';
  function inner() {
    console.log(message);
  }
  return inner;
}
const innerFn = outer();
innerFn(); // 输出：Hello, world!

在这个例子中，inner函数可以访问message变量的值，即使outer函数已经执行完毕。这是因为在outer函数内部定义的inner函数形成了一个闭包，保存了其所在作用域（outer函数的作用域）的变量和函数。闭包可以用来实现一些高级的编程技巧，比如模块化、延迟执行等。但同时，过多的使用闭包也会影响代码的可读性和性能。

数组和对象

数组的创建和常用方法

JavaScript中的数组是一个容器，可以存储一组有序的值。以下是关于JavaScript中数组的创建和常用方法的详细介绍：

创建数组

有几种方式可以创建一个数组，包括：

使用数组字面量，例如：let arr = [1, 2, 3];
使用Array()构造函数，例如：let arr = new Array(1, 2, 3);
声明空数组：let arr = [];

常用方法

push()：将一个或多个元素添加到数组的末尾，并返回新的长度。例如：arr.push(4, 5);
pop()：删除数组的最后一个元素，并返回该元素的值。例如：let last = arr.pop();
shift()：删除数组的第一个元素，并返回该元素的值。例如：let first = arr.shift();
unshift()：将一个或多个元素添加到数组的开头，并返回新的长度。例如：arr.unshift(0);
concat()：返回一个包含当前数组和其他一个或多个数组中所有元素的新数组。例如：let newArr = arr.concat([4, 5]);
slice()：返回一个从指定开始索引到结束索引（不包括结束索引）的新数组。例如：let newArr = arr.slice(1, 3);
splice()：对数组进行修改，可以删除、替换或添加元素。例如：arr.splice(1, 2, 4, 5);
join()：将数组中的所有元素转化为字符串，并且可以指定分隔符。例如：let str = arr.join('-');
indexOf()：返回指定元素在数组中的第一个索引位置，如果没有找到则返回-1。例如：let index = arr.indexOf(3);
lastIndexOf()：返回指定元素在数组中的最后一个索引位置，如果没有找到则返回-1。例如：let lastIndex = arr.lastIndexOf(2);

除了以上这些方法，还有许多其他有用的数组方法，可以根据需要进行查找和使用。

对象的创建和属性的访问

JavaScript中的对象是一种复合数据类型，具有自己的属性和方法，适合表示现实中的复杂结构和关系。在JavaScript中，我们可以使用字面量或构造函数的方式创建对象。

对象的创建方式：

a. 使用字面量创建对象

let person = {    // 用花括号表示对象
  name: "Tom",    // 用冒号分隔属性名和属性值
  age: 18,
  showInfo: function() {    // 对象方法
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};

b. 使用构造函数创建对象

function Person(name, age) {    // 用函数表示对象
  this.name = name;
  this.age = age;
  this.showInfo = function() {    // 对象方法
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
let person = new Person("Tom", 18);    // 使用new关键字和构造函数创建对象

属性的访问方式：

a. 点表示法

let person = {    // 创建对象
  name: "Tom",
  age: 18,
};
console.log(person.name);    // 通过"."来访问对象的属性

b. 方括号表示法

let person = {    // 创建对象
  name: "Tom",
  age: 18,
};
console.log(person["name"]);    // 通过"[]"来访问对象的属性

在方括号表示法中，我们可以使用变量来表示属性名：

let person = {    // 创建对象
  name: "Tom",
  age: 18,
};
let propName = "name";
console.log(person[propName]);    // 通过变量来访问对象的属性

注意，通过方括号表示法访问属性名时，属性名必须用引号括起来。

c. this关键字表示法

在对象的方法中，我们可以使用this关键字来引用对象自身的属性：

let person = {    // 创建对象
  name: "Tom",
  age: 18,
  showInfo: function() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};
person.showInfo();    // 通过方法来访问对象的属性

在方法中，this关键字指向当前对象，可以访问该对象的所有属性和方法。

以上就是JavaScript对象的创建和属性访问的相关知识点。

对象的常用方法

JavaScript中的对象是一种数据类型，可以用来表示现实中的实体和概念。对象有很多常用方法，以下是其中一些：

对象的构造函数：对象可以通过一个构造函数进行创建，构造函数的名字通常以大写字母开头。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

属性访问器方法：可以通过属性访问器方法来获取和设置对象的属性值。

Object.defineProperty(): 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性。

Object.defineProperty(obj, 'prop', {
  value: 'hello',
  writable: true,
  enumerable: true,
  configurable: true
});

Object.defineProperties(): 方法会直接在一个对象上定义多个新属性，或者修改多个对象的现有属性。

Object.defineProperties(obj, {
  prop1: {
    value: 'hello',
    writable: true,
    enumerable: true,
    configurable: true
  },
  prop2: {
    value: 'world',
    writable: true,
    enumerable: true,
    configurable: true
  }
});

键值对方法：

Object.keys(): 方法返回一个数组，其中包含了指定对象的所有可枚举属性的名称。

Object.keys(obj);

Object.values(): 方法返回一个数组，其中包含了指定对象的所有可枚举属性的值。

Object.values(obj);

Object.entries(): 方法返回一个数组，其中包含了指定对象的所有可枚举属性的键值对。

Object.entries(obj);

原型链方法：

Object.create(): 方法创建一个新对象，使用现有对象来提供新创建的对象的__proto__。

Object.create(obj);

Object.getPrototypeOf(): 方法返回指定对象的原型。

Object.getPrototypeOf(obj);

以上是JavaScript对象的一些常用方法，通过这些方法可以更加灵活地操作对象。

DOM操作

在JavaScript中，DOM（Document Object Model，文档对象模型）是一个非常重要的概念，它定义了一种标准的方式来访问和操作HTML和XML文档。

节点的遍历和选择

节点的遍历

在DOM中，文档被表示为节点树，每个节点都有一个父节点和零个或多个子节点。节点的遍历就是指在节点树中遍历节点的过程。常用的节点遍历方法包括：

parentNode：返回当前节点的父节点。

childNodes：返回当前节点的所有子节点，返回的是一个NodeList对象。

firstChild：返回当前节点的第一个子节点。

lastChild：返回当前节点的最后一个子节点。

previousSibling：返回当前节点的前一个兄弟节点。

nextSibling：返回当前节点的后一个兄弟节点。

hasChildNodes()：检查当前节点是否有子节点，返回值为布尔类型。

节点的选择

在DOM中，节点的选择指的是根据一定的条件选择特定的节点。常用的节点选择方法包括：

getElementById()：根据元素的id属性选择元素，返回一个元素对象。

getElementsByClassName()：根据元素的class属性选择元素，返回一个包含元素对象的HTMLCollection对象。

getElementsByTagName()：根据元素的标签名选择元素，返回一个包含元素对象的HTMLCollection对象。

querySelector()：根据CSS选择器选择元素，返回一个元素对象。

querySelectorAll()：根据CSS选择器选择元素，返回一个包含元素对象的NodeList对象。

parentNode和childNodes等节点遍历方法也可以用于节点选择。

总之，节点的遍历和选择是DOM操作中非常基础和重要的一部分，掌握这些知识点对于编写优秀的JavaScript代码非常有帮助。

节点属性的操作

在JavaScript中，节点属性是指节点对象的属性。节点属性可以是节点对象本身拥有的属性，也可以是通过节点对象的父节点或祖先节点继承得到的属性。

常见的节点属性操作有以下几种：

获取节点属性值：可以使用节点对象的属性来获取节点的属性值。例如，获取节点的id属性值可以使用node.id。
设置节点属性值：可以使用节点对象的属性来设置节点的属性值。例如，设置节点的id属性值可以使用node.id=’newId’。
属性节点的操作：可以使用setAttribute()方法来设置或修改节点属性值，使用getAttribute()方法来获取节点属性值，使用removeAttribute()方法来删除节点属性。
类名操作：可以使用节点对象的classList属性来添加、删除和切换节点的类名。例如，添加一个类名可以使用node.classList.add(‘new-class’)。
样式操作：可以使用节点对象的style属性来设置节点的样式属性。例如，设置文本颜色可以使用node.style.color=’red’。
数据属性的操作：可以使用节点对象的dataset属性来操作数据属性。例如，获取数据属性可以使用node.dataset.dataName，设置数据属性可以使用node.dataset.dataName=’value’。

需要注意的是，节点属性的操作可能会影响节点的布局和渲染，因此应该谨慎使用。

创建和删除节点

创建节点

document.createElement(tagName)：此方法创建一个新的HTML元素。tagName是HTML元素的名称。例如，创建一个新的div元素：

let newDiv = document.createElement('div');

document.createTextNode(text)：创建文本节点。text是要创建的文本。例如，创建一个新的文本节点：

let newText = document.createTextNode('Hello World!');

parentElement.appendChild(childElement)：将一个新的子节点(childElement)加到一个父节点(parentElement)中。例如，将新div元素添加到body元素中：

document.body.appendChild(newDiv);

删除节点

parentNode.removeChild(childNode)：此方法从DOM中移除一个子元素(childNode)。例如，从body元素中移除新div元素：

document.body.removeChild(newDiv);

element.remove()：此方法从DOM中直接移除一个元素。例如，从body元素中移除新div元素：

newDiv.remove();

事件和事件处理

JavaScript中的事件和事件处理是Web开发中非常常见的概念，它们是实现交互性和响应式用户界面的关键。

事件是指用户在页面上执行的一些操作，例如鼠标点击、键盘敲击、页面滚动等。而事件处理就是在特定事件发生时执行特定的JavaScript代码。

DOM事件模型和事件流

DOM事件模型是指，当用户在页面上执行某个操作时，浏览器会创建一个事件对象，并将该对象传递给该操作所在的元素，然后逐级向上冒泡直到文档根元素，这个过程称为事件传播或事件冒泡。

事件流是处理事件的一种方式，它描述了事件从页面中被触发的那个元素开始，一直传递到文档根元素的顺序。事件流有三个阶段：

捕获阶段：从文档根元素开始，一级级向下传递，直到触发事件的那个元素。
目标阶段：事件到达目标元素时触发。
冒泡阶段：从目标元素开始，逐级向上冒泡，直到文档根元素。

可以使用addEventListener()方法来注册事件处理程序，该方法可以指定捕获阶段、目标阶段或冒泡阶段中的任意一段来处理事件。默认情况下，事件处理程序在冒泡阶段被触发。

需要注意的是，当一个元素上绑定了多个事件处理程序时，它们的执行顺序是按照添加的顺序执行的。而阻止事件冒泡可以使用事件对象的stopPropagation()方法。

事件的类型和注册

JavaScript 中的事件是用户或浏览器发生的动作，例如点击鼠标、按下键盘、页面加载、窗口调整等。事件可以被 JavaScript 捕捉并处理，以产生特定的响应或行为。

JavaScript 事件类型:

鼠标事件：这些事件与鼠标动作有关，例如click（单击）、dblclick（双击）、mousedown（按下鼠标）、mouseup（释放鼠标）、mousemove（移动鼠标）、mouseover（鼠标移入元素）和mouseout（鼠标移出元素）等。
键盘事件：这些事件与键盘动作有关，例如keydown（按下键盘）、keyup（释放键盘）等。
表单事件：这些事件与表单元素有关，例如submit（提交表单）、reset（重置表单）和change（元素值改变）等。
窗口事件：这些事件与窗口的状态有关，例如load（页面加载完成）、resize（窗口大小调整）和unload（页面卸载）等。

在 JavaScript 中，可以通过 addEventListener() 方法注册事件处理程序。该方法需要两个参数：首先是要监听的事件类型，其次是要执行的函数。例如：

document.getElementById("button").addEventListener("click", function(){
  alert("Hello World!");
});

上述代码将在点击 id 为 “button” 的元素时弹出一个警告框，显示 “Hello World!”。

除了 addEventListener() 方法之外，还可以使用 on + 事件类型的方式注册事件处理程序，例如：

document.getElementById("button").onclick = function(){
  alert("Hello World!");
};

上述代码与前面的代码具有相同的功能，它将在点击 id 为 “button” 的元素时弹出一个警告框，显示 “Hello World!”。

然而，这种方法只能注册一个事件处理程序；如果需要注册多个处理程序，则必须使用 addEventListener() 方法。

事件监听器的编写和移除

JavaScript中的事件是指在对象上发生的某些特定动作或操作（例如，点击按钮、鼠标移动、键盘按下等），可以通过事件监听器来监测这些事件并触发执行相应的代码。

事件监听器是一段JavaScript代码，通过将它们附加到对象的特定事件上，当事件发生时就可以自动执行。在JavaScript中，事件监听器通常是通过添加函数来定义的。

以下是JavaScript中事件监听器的编写和移除：

事件监听器的编写

使用addEventListener()函数添加事件监听器。该函数有三个参数：事件类型、事件处理函数和一个布尔值，如果该值为true，则在捕获阶段触发事件，如果为false，则在冒泡阶段触发事件。

例如，对于按钮元素，可以使用以下代码添加单击事件监听器：

const myButton = document.querySelector('#myButton');
myButton.addEventListener('click', function() {
  console.log('Button clicked!');
});

在上面的代码中，单击事件类型为’click’，事件处理函数为一个匿名函数，当按钮被单击时，该匿名函数将在控制台中输出’Button clicked!'。

事件监听器的移除

使用removeEventListener()函数可以移除事件监听器。该函数与addEventListener()函数相似，也有三个参数：事件类型、事件处理函数和一个布尔值，其参数必须与添加时相同。

例如，对于上述添加的事件监听器，可以使用以下代码将其移除：

myButton.removeEventListener('click', myFunction);

在上面的代码中，事件类型为’click’，事件处理函数为一个命名函数myFunction，它必须在添加时定义。

需要注意的是，如果事件处理函数是匿名函数，则无法使用removeEventListener()函数移除它。因此，最好将事件处理函数定义为命名函数，以便在需要时方便地移除。

JavaScript基础：了解核心概念和技能

前言