JavaScript基础

2.3 JavaScript

2.3.1 什么是JavaScript

JavaScript 是一种轻量级的脚本语言。所谓"脚本语言"，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的"脚本".

JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多

为什么学习 JavaScript

• 操控浏览器的能力
• 广泛的使用领域
• 易学性

JavaScript版本

es6后面单独拉出来讲解

2.3.2 基本语法

1，语句和标识符

JavaScript程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句

var num = 10;

语句以分号结尾，一个分号就表示一个语句结束

标识符

标识符指的是用来识别各种值的合法名称。最常见的标识符就是变量名

标识符是由：字母，美元符号($)，下划线(_)和数字组成，其中数字不能开头

温馨提示

中文是合法的标识符，可以用作变量名（不推荐）

JavaScript保留关键字

以下关键字不需要强行记忆

2，变量

var num = 10;

变量的重新赋值

var num = 10;
num = 20;

变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这叫做变量提升

console.log(num);
var num = 10;

运行结果

3，输出

JavaScript有很多种输出方式，都可以让我们更直观的看到程序运行的结果

var num = 20;
console.log(num);

alert("我是弹出框")

document.write("要输入的内容")

4，数据类型

原始类型（基础类型）

数值，字符串，布尔值

// 数值|数字 类型
var age = 20;
        
// 字符串类型
var name = '张三';

// 布尔类型: 0:false 1:true
var isOk = true;
var isOk2 = true;

合成类型（复合类型）

对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器

var user = {
    name: '老八',
    age: 20,
    sex: '男'
}

温馨提示

至于undefined和null，一般将它们看成两个特殊值。

null和undefined的区别

关键区别

• null 表示有意旨意的对象值缺失，而 undefined 表示未意旨意的对象值缺失。
• null 通常用来表示变量或属性没有值，而 undefined 用来表示变量或属性没有被声明或初始化。

5，运算符

typeof

判断数据类型（判断基本数据类型使用）

算术运算符

加减乘除运算符

加减乘除运算符就是基本的数学运算符效果

10 + 10; // 20
100 - 10; // 90
10 * 2; // 20
10 / 5; // 2

余数运算符

余数运算符是比较常用的，因为在逻辑思维上寻找规律，余数运算符是很好用的。

13 % 5 // 3

自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1

var x = 1;
var y = 1;
++x // 2
--y // 0

赋值运算符

JavaScript 中有多种赋值运算符，可以用来将值赋值给变量或属性。以下是其中一些最常用的赋值运算符：

最常见的赋值运算符，就是等号（=）

// 将 1 赋值给变量x
var x = 1;

// 将变量 y 的值赋值给变量 x
var x = y;

有点懒得写了，如果大家需要我补全的话，我会把这部分补全

比较运算符

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。

2 > 1 // true

JavaScript 一共提供了8个比较运算符。

"=="和"==="的区别

== (松散等价)

== 运算符检查两个值是否相等，但不检查数据类型。这意味着它会执行类型转换，这可能会导致意外结果。

console.log(5 == '5'); // true
console.log(null == undefined); // true

=== (严格等价)

== 运算符检查两个值是否相等，但不检查数据类型。这意味着它会执行类型转换，这可能会导致意外结果。

console.log(5 === '5'); // false
console.log(null === undefined); // false

最佳实践

为了避免意外结果和确保代码更加健壮，建议使用 === 运算符进行大多数比较。这将帮助您捕捉类型相关的错误，并确保代码行为如预期。

然而，在某些情况下，您可能需要使用 == 运算符，例如在处理 legacy 代码或需要执行松散比较的特殊用例时。

布尔运算符

布尔运算符（Boolean Operators）是 JavaScript 中的一种运算符，它们用于将布尔值（true 或 false）结合起来以获取新的布尔值。

JavaScript 中有以下四种布尔运算符：

1，&&（逻辑与）：返回两个布尔值的逻辑与结果。如果两个布尔值都是 true，返回 true；否则返回 false。

true && true // true
true && false // false
false && true // false
false && false // false

2，||（逻辑或）：返回两个布尔值的逻辑或结果。如果两个布尔值至少有一个为 true，返回 true；否则返回 false。

true || true // true
true || false // true
false || true // true
false || false // false

3，!（逻辑非）：返回一个布尔值的逻辑非结果。如果布尔值为 true，返回 false；否则返回 true。

true ! // false
false ! // true

4，??（空值合并）：返回两个值中的第一个非 null 或 undefined 值。如果第一个值为 null 或 undefined，返回第二个值；否则返回第一个值。

null ?? 'default' // 'default'
undefined ?? 'default' // 'default'
'hello' ?? 'default' // 'hello'

6，条件语句

条件语句（Conditional Statements）是 JavaScript 中的一种语句，它用于根据一定的条件来执行不同的代码块。

if语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示真，false表示伪。

if语句语法规范

if (布尔值){
    语句;
}

需要注意的是，"布尔值"往往由一条件表达式产生的，必须放在圆括号中

var m = 3;
if (m === 3){

    m++;
}

console.log(m); // 4

温馨提示

if后面的表达式之中，不要混淆赋值表达式（=），严格相等运算符（===）和相等运算符（==）。尤其是赋值运算符不具有比较作用

if...else

if...else基本结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

var flag = false;
if (flag) {
    alert("我是老八");
}else{
    alert("我是鸡你太美")
}

此外，JavaScript还支持if...else if...else链，用于检查多个条件。例如：

if (条件1) {
  // 当条件1为真时执行的代码块
} else if (条件2) {
  // 当条件1为假且条件2为真时执行的代码块
} else {
  // 当以上所有条件都为假时执行的代码块
}

在这个结构中，程序会从上到下依次检查每个条件，一旦某个条件满足（即计算结果为true），就执行对应的代码块，并跳过之后的所有条件检查。如果没有条件满足，则执行最后一个else后的代码块（如果有的话）。

switch

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构

switch (表达式) {
  case 值1:
    // 当表达式的值等于值1时执行的代码
    break;
  case 值2:
    // 当表达式的值等于值2时执行的代码
    break;
  ...
  default:
    // 当没有任何case的值与表达式的值匹配时执行的代码（可选）
}

需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

var x = 1;
switch(x){
    case 1:
        console.log("x 等于 1");
    case 2:
        console.log("x 等于 2");
    default:
        console.log("x 等于 3");
        break;
}


// x 等于 1
// x 等于 2
// x 等于 3

7，三元运算符

三元运算符（即该运算符需要三个运算子）?:,也可以用于逻辑判断

(条件) ? 表达式1 : 表达式2

这个三元运算符可以被视为if...else...的简写形式，因此可以用于多种场合。

判断一个整数是奇数还是偶数

var number = 5;

// 传统 if...else方法
if (number % 2 === 0) {
    console.log(number + " 是偶数");
} else {
    console.log(number + " 是奇数");
}

// 三元运算符方法
console.log(number % 2 === 0 ? "偶数" : "奇数");

8，循环语句

循环语句用于重复执行某个操作

for循环

for (初始化表达式;条件;迭代因子){
    语句
}

for语句后面的括号里面，有三个表达式。

1. 初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
2. 布尔表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才能继续循环下去。
3. 迭代因子：每轮循环的最后一个操作，通常用来递增循环变量、

var x = 3;
for (var i = 0; i < x; i++){
    console.log(i);
}

for语句的三个表达式，可以省略任何一个，也可以全部省略。（按照我的经验，应该是不会有人省略）

for(;;){
    console.log('Hello world');
}

温馨提示

如果三个都省略，结果就导致了一个无限循环（死循环）

循环输出1~100之间数字的和 （练习）

var num = 0
// 循环输出1~100之间的数字的和
for (let index = 1; index <= 100; index++) {
    num += index
}
console.log(num);

循环输出1000以内的奇数（练习）

// 循环输出1000以内的奇数
for (let i = 1; i < 1000; i++) {
    if (i % 2 == 1) {
        console.log(i);
    }
}

while循环

while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件){
    语句;
}

// 循环打印出来1~100的值
var i = 1;
while(i<=100){
    console.log(i);
    i++;
}

下面的例子是一个无限循环，因为循环的条件总是真

while(true){
    console.log("hello world")
}

continue语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行

break语句

当在循环体内遇到 break 语句时，循环会立即终止，不再执行循环中剩余的部分以及循环体后的任何迭代。控制权将传递给紧跟在循环之后的第一条语句。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 当 i 等于5时，跳出循环
    }
    console.log(i);
}

continue语句

与 break 不同，continue 语句不是终止整个循环，而是跳过当前迭代中剩余的部分，直接开始下一次迭代（如果有的话）。

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) { // 如果 i 是偶数
        continue; // 跳过偶数，不执行下面的打印语句
    }
    console.log(i);
}

温馨提示

使用 break 和 continue 应谨慎，过度使用可能会使代码逻辑变得难以理解和维护。

break 也可以用在 switch 语句中，用来跳出某个 case。

标签（label）可以与 break 和 continue 一起使用，以标识特定的循环或代码块，允许从嵌套循环中跳出或继续特定层次的循环，但这在实际编码中较为少见。

9，字符串

字符串是一系列字符的集合，用于表示文本。字符串可以用单引号 (') 或双引号 (") 来界定。

'hello world'
"hello world"

单引号字符的内部，可以使用双引号。双引号的内部也可以使用单引号

'key = "value"'
"It`s a long shaqima"

温馨提示

字符串默认只能在一行内，分成多行将会报错

如果字符串必须分为多行，可以在每一行的尾部使用反斜杠

var longStrong = ' Long \
long \
string';
console.log(longStrong);

length属性

length属性返回字符串的长度，该属性也是无法改变的

var s = 'sqm666'
console.log(s.length)
// 6

charAt()

charAt 返回指定值首次出现的位置，未找到返回 -1。

var s = 'sqmsqm'

console.log(s.charAt(3)) // s
console.log(s.charAt(s.length - 1)) // "m"

如果参数为负数，或大于等于字符串的长度，charAt 返回空字符串

console.log('sqmsqm'.charAt(-1)) // ""
console.log('sqmsqm'.charAt(9))  // ""

**concat()**连接字符串

concat 方法用于连接两个字符串，返回一个新的字符串，不改变原来的字符串。

var s1 = 'sqm'
var s2 = 'kukulin'

console.log(s1.concat(s2)) // "sqmkukulin"

该方法可以接受多个参数

var s1 = 'sqm'
var s2 = 'kukulin'
var s3 = "老八"

console.log(s1.concat(s2, s3)) // "sqmkukulin老八"

字符串相加，是不需要使用concat的，可以使用+连接字符串

var s1 = 'sqm'
var s2 = 'kukulin'
var s3 = "老八"
console.log(s1 + s2 + s3) // "sqmkukulin老八"

concat和加号还是有区别的

• concat不管什么类型直接合并成字符串
• 加号是遇到数字类型直接做运算，遇到字符串和字符串做字符串的连接

slice(start, end) 提取子字符串

slice() 方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含改位置）

• 参数 ：接受两个参数，start 和 end，分别定义提取子串的起始位置和结束位置。start 是包含在内的，而end 是不包含在内的。如果省略 end，则提取从 start 开始到字符串末尾的所有字符。
• 负值处理 ：如果提供负值，slice() 会将其解释为从字符串末尾开始计算的索引。例如，-1 表示最后一个字符，-2 表示倒数第二个字符。
• 返回值 ：返回一个新的字符串，包含从 start 到 end（不包括 end）之间的字符。

'sqmsqm'.slice(0,2) // "sq"

indexOf() 搜索子字符串的位置

indexOf() 是字符串和数组对象都具有的一个方法，用于查找指定值在字符串或数组中的第一次出现的位置。如果找到该值，则返回其在字符串或数组中的索引；如果没有找到，则返回 -1。

var hello = 'helloworld';

console.log(hello.indexOf('e')); // 1
console.log(hello.indexOf('j')); // -1

indexOf 方法还可以接受第二个参数，表示从该位置开始向后匹配

'helloworld'.indexOf('o', 6) // 7

trim 去除两端的空格

trim() 方法不会改变原字符串，而是返回一个新的字符串，这个新字符串是原字符串的副本，但其首尾的空白字符已被移除。

let str = "   Hello, world!   ";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出: "Hello, world!"

该方法去除的不仅是空格，还包括制表符（\t，\v），换行符（\n） 和回车符（\r）

'\r\nsqmsqm \t'.trim() // 'sqmsqm'

ES6扩展方法，trimStart() 和 trimEnd() 方法

let str = "   Hello, world!   ";
let startTrimmed = str.trimStart(); // 删除开头空白
let endTrimmed = str.trimEnd(); // 删除结尾空白

split

split() 是JavaScript中的一个字符串方法，用于将一个字符串分割成一个字符串数组。

console.log('sqm|520|hello|world'.split('|')); // ['sqm', '520', 'hello', 'world']

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

'a|b|c'.split('') // ['a', '|', 'b', '|', 'c']

如果省略参数，则返回数组的唯一成员就是原字符串

'it|sxt|bz'.split() // [it|sxt|bz]

10，数组

数组是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

var arr = ['sxt', 'sqm', 'it'];

两端的方括号是数组的标志。sxt是0号位置，sqm是1号位置，it是2号位置

除了在定义时赋值，数组也可以先定义后赋值。

var arr = [];

arr[0] = 'kkl';
arr[1] = 'sqm';
arr[2] = 'it'';

任何类型的数据，都可以放入数组

var arr = [100, [1,2,3],false];

如果数组的元素还是数组，就形成了多维数组

var a = [[1,2],[3,4],[5,6]];
a[0][1] // 2

遍历

数组的遍历可以考虑使用for循环或while循环

var a = ['kkl', 'sqm', 'it'];


for(var i=0;i<a.length;i++){
    console.log(a[i]);
}

while循环

var a = ['kkl', 'sqm', 'it'];

var i = 0;
while(i<a.length){
    console.log(a[i]);
    i++;
}

for...in 循环

var a = ['kkl', 'sqm', 'it'];

for(var i in a){
    console.log(a[i]);;
}

Array.isArray()

Array.isArray() ，用于检测一个给定的值是否为数组类型。它可以弥补 typeof 运行符的不足

var arr = ['库库林', 100, true];
console.log(typeof arr); // object

console.log(Array.isArray(a));// true

console.log(Array.isArray(10)); // false

push()/pop()

push 用于在数组的末端添加一个或多个元素，并返回新的数组长度。这个操作会改变原数组。

var a = [];

a.push('库库林');
a.push('沙琪马');
a.push(true);
a.push(100);
console.log(a); // ['库库林', '沙琪马', true, 100]

pop 用于移除数组的最后一个元素，并返回这个被移除的元素。此操作会改变原数组。

var arr = ['库库林', '沙琪马', true, 100]


arr.pop() // '100'
arr // ['库库林', '沙琪马', true]

join()

join() 用于将数组中的所有元素连接成一个字符串。元素会按照数组中的顺序连接，并且可以指定一个可选的分隔符来插入到元素之间。如果不提供参数默认是用逗号分隔。

var a = [1,2,3,4];

console.log(a.join(' ')); // 1 2 3 4
console.log(a.join('|')); // 1|2|3|4
console.log(a.join());  // 1,2,3,4

如果数组成员是undefined或null或空格，就会转成空字符串

数组的 join 配合字符串的 split 可以实现数组和字符串的互相转换

let arr = ['apple', 'banana', 'cherry'];
let str = arr.join(', '); // 使用逗号和空格作为分隔符
console.log(str); // 输出: "apple, banana, cherry"

let str = "apple, banana, cherry";
let arr = str.split(', '); // 使用逗号和空格作为分隔符
console.log(arr); // 输出: ["apple", "banana", "cherry"]

concat() 数组合并

concat()，用于合并两个或多个数组，创建一个新的数组，原数组不会被改变。这个方法可以接收任意数量的参数，可以是数组，也可以是单独的值。

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = [6];

let combinedArray = arr1.concat(arr2, arr3, 7, 8);

console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr1); // 输出: [1, 2, 3]，原数组不变

应用场景

上拉加载，合并数据

reverse() 反转

reverse() 用于颠倒数组中元素的顺序。这个操作会直接修改原数组，而不是创建一个新的数组。

let fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.reverse();

console.log(fruits); // 输出: ['date', 'cherry', 'banana', 'apple']

实现一个字符串的反转排列

var str = 'hello';
str.split("").reverse().join("") // "olleh"

indexOf() 查找

indexOf()用于查找指定值在字符串或数组中的首次出现的位置，并返回该位置的索引。如果未找到该值，则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // 输出: 2

11，函数

函数是一段可以反复调用的代码块

函数的声明

function命令：function命令声明的代码区域，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数参数。函数体放在大括号里面。

function print(s){
    console.log(s);
}

函数名的提升

JavaScript引擎将函数名视为变量名，所以采用`function`命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

add();

function add(){}

函数参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数.

function square(){
    console.log(x*x);
}

square(3) // 9
square(4) // 16

函数返回值

JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界。

function getName(name){
    return name;
}

var myName = getName('小明');
console.log(myName); // 小明

温馨提示

return 后面不能再添加任何代码，因为不会执行。

12，对象

什么是对象？对象（object）是JavaScript语言的核心概念，也是最重要的数据类型。简单说，对象就是一组"键值对"（key-value）的集合，是一种无序的复合数据集合。

var user={
  name: 'itkklsqm',
  age: '13'
}

对象的每一个键名又称为"属性"，它的键值"可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为"方法",它可以像函数那样调用"

var user = {
 name: 'itkklsqm',
 age: 13,
 getName:function(){
     console.log(this.name)
 }
}

13，Math对象

Math是JavaScript的原生对象，提供各种数学功能。

Math.abs()

Math.abs() 方法返回参数值的绝对值

Math.abs(1) // 1
Math.abs(-1) // 1

Math.max(), Math.min()

Math.max 方法返回参数之中最大的那个值，Math.min 返回最小的那个值。如果那个参数为空，Math.min 返回Infinity，Math.max 返回 -Infinity.

console.log(Math.max(10,30,20,50,40)); // 50
console.log(Math.min(10,30,20,50,40)); // 10

Math.floor(), Math.ceil()

Math.floor 方法返回小于参数值的最大整数. 相当于向下取整

Math.floor(3.2) // 3
Math.floor(-3.2) // -4

Math.ceil 方法返回大于参数值的最小整数. 相当于向上取整

Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3

Math.random()

Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

Math.random() // 0.285432534563452453

任意范围的随机数生成函数如下

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(2,10));

14，Date对象

Date对象是JavaScript原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后1亿天（单位为毫秒）。

Date.now()

`Date.now()` 方法返回当前时间距离时间零点（1970年1月1日00:00:00 UTC）的毫秒数，相当于Unix时间戳乘以1000。

Date.now(); // 1635216733395

时间戳

JavaScript的Date对象提供了多个get方法来获取日期和时间的具体组成部分。以下是一些常用的get方法及其功能描述：

实例方法get类

getFullYear(): 获取四位数的年份（如2023）。

getMonth(): 获取月份（注意：月份是从0开始的，即0表示1月，11表示12月）。

getDate(): 获取一个月中的哪一天（1-31）。

getDay(): 获取一周中的哪一天（0表示周日，6表示周六）。

getHours(): 获取小时数（0-23）。

getMinutes(): 获取分钟数（0-59）。

getSeconds(): 获取秒数（0-59）。

getMilliseconds(): 获取毫秒数（0-999）。

getTime(): 返回1970年1月1日00:00:00 UTC以来的毫秒数，等效于Unix时间戳乘以1000。

getTimezoneOffset(): 返回本地时间和UTC时间之间的时差，以分钟为单位。

var d = new Date();

console.log(d.getDate()); // 14
console.log(d.getMonth()); // 6
console.log(d.getFullYear()); // 2024
console.log(d.getHours()); // 10
console.log(d.getMinutes()); // 29
console.log(d.getSeconds()); // 7

2.3.3 DOM操作

DOM（Document Object Model，文档对象模型）是针对HTML和XML文档的一个编程接口，它将网页中的结构化文档表示为一系列的节点（Node），允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM提供了一种标准化的方式来表示文档，并且允许开发者通过脚本（如JavaScript）来操作这些文档结构。

DOM只是一个接口规范，可以用各种语言实现。所以严格地说，DOM不是JavaScript语法的一部分，但是DOM操作是JavaScript最常见的任务，离开了DOM，JavaScript就无法控制网页。另一方面，JavaScript也是最常用于DOM操作的语言。

节点

DOM 的最小组成单位叫做节点。文档的树形结构，就是由各种不同类型的节点组成，每个节点可以看作是文档树的一片叶子。

节点的类型有七种

Document: 整个文档树的顶层节点

DocumentType：doctype标签

Element：网页的各种HTML标签

Attribute：网页元素的标签（比如class="right"）

Text：标签之间或标签包含的文本

Comment：注释

DocumentFragment：文档的片段

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

浏览器原生提供document节点，代表整个文档

document
// 整个文档树

除了根节点，其他节点都有三种层级关系

父节点关系：直接的那个上级节点

子节点关系：直接的下级节点

同级节点关系：拥有同一个父节点的节点

Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下：

文档节点（document）：9，对应常量Node.DOCUMENT_NODE

元素节点（element）：1，对应常量Node.ELEMENT_NODE

属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE

文本节点（text）：3，对应常量Node.TEXT_NODE

文档片段节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE