前端笔记-JavaScript部分（上）

JavaScript学习目标

|------------|---------------------|
| JavaScript | 1、变量、数据类型与运算符 |
| JavaScript | 2、函数与作用域 |
| JavaScript | 3、对象与原型链 |
| JavaScript | 4、ES6语法概览 |
| JavaScript | 5、学习了解DOM以及相关的DOM操作 |
| JavaScript | 6、js事件循环 |
| JavaScript | 7、Promise |
| JavaScript | 8、async/await |
| JavaScript | 9、解构赋值与扩展运算符 |
| JavaScript | 10、箭头函数与this绑定 |
| JavaScript | 11、xhr基础（基本了解即可） |

目录

JavaScript学习目标

JavaScript一些注意事项

变量、数据类型与运算符

变量

数据类型

运算符

函数与作用域

函数定义与调用

作用域

[1. 全局作用域](#1. 全局作用域)

[2. 函数作用域](#2. 函数作用域)

[3. 块级作用域](#3. 块级作用域)

[4. 作用域链](#4. 作用域链)

[5. 闭包](#5. 闭包)

对象与原型链

JavaScript一些注意事项

js是单线程的，代码按照顺序依次执行，但是对于异步操作会通过事件循环机制进行处理。
js严格区分大小写
js直接量

复制代码

//空字符串直接量
1  //数值直接量
true  //布尔值直接量
/a/g  //正则表达式直接量
null  //特殊值直接量
{}  //空对象直接量
[]  //空数组直接量
function(){}  //空函数直接量，也就是函数表达式

JavaScript常用交互和输出方式：

方法	描述	示例代码	返回值	使用场景
`alert()`	弹出一个包含指定消息的提示框，用户需点击 "确定" 关闭	`alert('欢迎使用本系统');`	无	向用户显示重要提示信息，如系统通知、操作结果反馈
`confirm()`	弹出带有 "确定" 和 "取消" 按钮的对话框	`let result = confirm('是否删除该文件？');`	用户点击 "确定" 返回 `true`，点击 "取消" 返回 `false`	需要用户确认操作的场景，如删除、提交等操作的确认
`document.write()`	直接将内容写入 HTML 文档。若在文档加载完成后调用，会覆盖原内容	`document.write('<h2>动态添加的标题</h2>');`	无	页面加载时动态添加内容，如插入广告、脚本等
`innerHTML`	获取或设置 HTML 元素的内容	`javascript` `let div = document.getElementById('myDiv');` `div.innerHTML = '<p>新内容</p>';`	无	动态更新页面上特定元素的内容，如更新列表、显示新数据
`console.log()`	在浏览器开发者工具控制台输出信息	`let num = 10; console.log(num);`	无	调试代码，查看变量值、函数执行结果等

变量、数据类型与运算符

变量

在 JavaScript 中，变量可以通过**var、let 或 const**关键字进行声明。

var 声明的变量具有函数作用域，而 let 和 const 声明的变量具有块级作用域。
const 声明的常量一旦赋值，就不能再重新赋值，但如果常量是引用类型（如对象或数组），其内部的属性或元素可以修改。

数据类型

数据类型可以分为两种类型：

基本数据类型：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
引用数据类型：对象（Object）、数组（Array）、函数（Function）。

运算符

基本等同java，但也有一些差异，如 JavaScript 中的 + 运算符可以用于字符串的拼接。

比较运算符单独强调一下

|-----|-----|-----------------------------------------|
| == | 等于 | x == y 表示如果 x 等于 y，则为真 |
| === | 全等 | x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真 |
| != | 不相等 | x != y 表示如果 x 不等于 y，则为真 |
| !== | 不全等 | x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真 |

函数与作用域

1. 函数定义与调用

在 JavaScript 里，定义函数的方式有多种。

函数声明 ：使用 function 关键字来定义，函数可以在定义之前被调用。

复制代码

function add(a, b) {
    return a + b;
}
let result = add(1, 2);
console.log(result); //3

函数表达式：把函数赋值给一个变量，函数只能在定义之后调用。

复制代码

const multiply = function(a, b) {
    return a * b;
};
let product = multiply(3, 4);
console.log(product); //12

箭头函数 ：ES6 引入的简洁语法，没有自己的 this、arguments、super 或 new.target。

复制代码

const subtract = (a, b) => a - b;
let difference = subtract(5, 3);
console.log(difference); //2

函数参数传递有值传递和引用传递。

值传递：对于基本数据类型，传递的是值的副本，函数内对参数的修改不会影响外部变量。

复制代码

function changeValue(num) {
    num = 10;
}
let number = 5;
changeValue(number);
console.log(number); //5

引用传递：对于引用数据类型，传递的是对象的引用，函数内对参数的修改会影响外部对象。

复制代码

function changeObject(obj) {
    obj.name = 'New Name';
}
let myObject = { name: 'Old Name' };
changeObject(myObject);
console.log(myObject.name); //New Name

3. 返回值

函数可以使用 return 语句返回一个值，若没有 return 语句，函数默认返回 undefined。

复制代码

function getFullName(firstName, lastName) {
    return `${firstName} ${lastName}`;
}
let fullName = getFullName('John', 'Doe');
console.log(fullName); //John Doe

作用域

1. 全局作用域

全局作用域里声明的变量可以在代码的任何地方访问。

复制代码

let globalVariable = 'I am global';
function testGlobal() {
    console.log(globalVariable); 
}
testGlobal();
//I am global

2. 函数作用域

在函数内部声明的变量只能在该函数内部访问。

复制代码

function testFunctionScope() {
    let localVariable = 'I am local';
    console.log(localVariable); 
}
testFunctionScope();
// console.log(localVariable); 会报错，因为 localVariable 不在全局作用域

3. 块级作用域

ES6 引入了 let 和 const 关键字，它们声明的变量具有块级作用域，即变量只能在声明它的块（如 if 语句、for 循环等）内访问。

复制代码

if (true) {
    let blockVariable = 'I am block scoped';
    console.log(blockVariable); 
}
// console.log(blockVariable); 会报错，因为 blockVariable 不在块外部作用域

4. 作用域链

当访问一个变量时，JavaScript 会先在当前作用域查找，如果找不到，就会沿着作用域链向上查找，直到全局作用域。

复制代码

let globalVar = 'Global';
function outer() {
    let outerVar = 'Outer';
    function inner() {
        let innerVar = 'Inner';
        console.log(innerVar); 
        console.log(outerVar); 
        console.log(globalVar); 
    }
    inner();
}
outer();
/*
输出结果：
Inner
Outer
Global
*/

5. 闭包

闭包是指有权访问另一个函数作用域中的变量的函数。即使该函数已经执行完毕，其作用域内的变量也不会被销毁。

复制代码

function outerFunction() {
    let privateVariable = 'Secret';
    return function innerFunction() {
        return privateVariable;
    };
}
let closure = outerFunction();
console.log(closure()); // 输出结果：Secret

事件处理

事件		描述
鼠标、键盘事件	onclick	点击鼠标时触发此事件
鼠标、键盘事件	ondblclick	双击鼠标时触发此事件
鼠标、键盘事件	onmousedown	按下鼠标时触发此事件
鼠标、键盘事件	onmouseup	鼠标按下后又松开时触发此事件
鼠标、键盘事件	onmouseover	当鼠标移动到某个元素上方时触发此事件
鼠标、键盘事件	onmousemove	移动鼠标时触发此事件
鼠标、键盘事件	onmouseout	当鼠标离开某个元素范围时触发此事件
鼠标、键盘事件	onkeypress	当按下并松开键盘上的某个键时触发此事件
鼠标、键盘事件	onkeydown	当按下键盘上的某个按键时触发此事件
鼠标、键盘事件	onkeyup	当放开键盘上的某个按键时触发此事件
窗口事件	onabort	图片在下载过程中被用户中断时触发此事件
窗口事件	onbeforeunload	当前页面的内容将要被改变时触发此事件
窗口事件	onerror	出现错误时触发此事件
窗口事件	onload	页面内容加载完成时触发此事件
窗口事件	onmove	当移动浏览器的窗口时触发此事件
窗口事件	onresize	当改变浏览器的窗口大小时触发此事件
窗口事件	onscroll	当滚动浏览器的滚动条时触发此事件
窗口事件	onstop	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
窗口事件	oncontextmenu	当弹出右键上下文菜单时触发此事件
窗口事件	onunload	改变当前页面时触发此事件
表单事件	onblur	当前元素失去焦点时触发此事件
表单事件	onchange	当前元素失去焦点并且元素的内容发生改变时触发此事件
表单事件	onfocus	当某个元素获得焦点时触发此事件
表单事件	onreset	当点击表单中的重置按钮时触发此事件
表单事件	onsubmit	当提交表单时触发此事件

对象与原型链

对象

（一）对象的创建：

对象字面量：使用花括号{ }来创建对象，{ }中用来定义对象中的属性。属性是一个个键:值对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型
构造函数：通过自定义构造函数或使用内置构造函数来创建对象。

function Person(name, age) {
this.name = name;
this.age = age;
}
const person2 = new Person('Jane', 25);
Object.create()方法：基于已有的对象创建新对象，新对象会继承原对象的属性和方法。

const parent = {
sayHello() {
console.log('Hello!');
}
};
const child = Object.create(parent);
child.sayHello();

（二）对象的访问

对象名.属性名
对象名["属性名"]：方括号表示法更灵活，因为属性名可以是变量，还能处理包含特殊字符的属性名。

常见内置对象

Number对象

方法	描述
Number.parseFloat()	将字符串转换成浮点数，和全局方法 parseFloat() 作用相同
Number.parseInt()	将字符串转换成整型数字，和全局方法 parseInt() 作用相同
Number.isFinite()	判断 Number 对象是否为有穷数
Number.isInteger()	判断 Number 对象是否为整数
Number.isNaN()	判断 Number 对象是否为 NaN 类型
Number.isSafeInteger()	判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数
Number.toString()	把 Number 对象转换为字符串，使用指定的基数
Number.toLocaleString()	把 Number 对象转换为字符串，使用本地数字格式顺序
Number.toFixed()	把 Number 对象转换为字符串，结果的小数点后有指定位数的数字
Number.toExponential()	把 Number 对象的值转换为指数计数法
Number.toPrecision()	把 Number 对象格式化为指定的长度
Number.valueOf()	返回一个 Number 对象的基本数字值

复制代码

var a = new Number("123");
var b = Number("456");
var c = 789;
var d = new Number("abc");
document.write(typeof a + "<br>");      // 输出：object
document.write(typeof b + "<br>");      // 输出：number
document.write(typeof c + "<br>");      // 输出：number
document.write(d + "<br>");             // 输出：NaN

String对象

属性	描述
constructor	获取创建此对象的 String() 函数的引用
length	获取字符串的长度
prototype	通过该属性您可以向对象中添加属性和方法

复制代码

// 为 String 对象添加一个新方法，用于将字符串重复指定次数
String.prototype.repeatString = function (times) {
    let result = '';
    for (let i = 0; i < times; i++) {
        result += this;
    }
    return result;
};

let str = 'Hello ';
console.log(str.repeatString(3)); 

// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 为 Person 构造函数的原型添加方法
Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

// 创建 Person 对象
let person1 = new Person('John', 30);
let person2 = new Person('Jane', 25);

// 调用原型上的方法
person1.sayHello(); 
person2.sayHello(); 

// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 为 Person 构造函数的原型添加方法
Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

// 创建 Person 对象
let person1 = new Person('John', 30);
let person2 = new Person('Jane', 25);

// 调用原型上的方法
person1.sayHello(); 
person2.sayHello();

在这个例子中，Person 是一个构造函数，通过 Person.prototype 为其添加了 sayHello 方法。使用 new 关键字创建的 person1 和 person2 对象都能访问并调用该方法，这是因为它们都继承自 Person.prototype。

方法	描述
anchor()	创建一个 HTML 锚点，即生成一个`<a>`标签，标签的 name 属性为 anchor() 方法中的参数
big()	用大号字体显示字符串
blink()	显示闪动的字符串
bold()	使用粗体显示字符串
charAt()	返回在指定位置的字符
charCodeAt()	返回指定字符的 Unicode 编码
concat()	拼接字符串
fixed()	以打字机文本显示字符串
fontcolor()	使用指定的颜色来显示字符串
fontsize()	使用指定的尺寸来显示字符串
fromCharCode()	将字符编码转换为一个字符串
indexOf()	检索字符串，获取给定字符串在字符串对象中首次出现的位置
italics()	使用斜体显示字符串
lastIndexOf()	获取给定字符串在字符串对象中最后出现的位置
link()	将字符串显示为链接
localeCompare()	返回一个数字，并使用该数字来表示字符串对象是大于、小于还是等于给定字符串
match()	根据正则表达式匹配字符串中的字符
replace()	替换与正则表达式匹配的子字符串
search()	获取与正则表达式相匹配字符串首次出现的位置
slice()	截取字符串的片断，并将其返回
small()	使用小字号来显示字符串
split()	根据给定字符将字符串分割为字符串数组
strike()	使用删除线来显示字符串
sub()	把字符串显示为下标
substr()	从指定索引位置截取指定长度的字符串
substring()	截取字符串中两个指定的索引之间的字符
sup()	把字符串显示为上标
toLocaleLowerCase()	把字符串转换为小写
toLocaleUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toString()	返回字符串
valueOf()	返回某个字符串对象的原始值

Array 对象

创建 Array 对象的语法格式如下：

var arr = new Array(values);

var arr = Array(values);

复制代码

var fruits = new Array( "apple", "orange", "mango" );
console.log(fruits);  // 输出：["apple", "orange", "mango"]

var fruits = [ "apple", "orange", "mango" ];
console.log(fruits);        // 输出：(3) ["apple", "orange", "mango"]

方法	描述
concat()	拼接两个或更多的数组，并返回结果
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中
entries()	返回数组的可迭代对象
every()	检测数值元素的每个元素是否都符合条件
fill()	使用一个固定值来填充数组
filter()	检测数值元素，并返回符合条件所有元素的数组
find()	返回符合传入函数条件的数组元素
findIndex()	返回符合传入函数条件的数组元素索引
forEach()	数组每个元素都执行一次回调函数
from()	通过给定的对象中创建一个数组
includes()	判断一个数组是否包含一个指定的值
indexOf()	搜索数组中的元素，并返回它所在的位置
isArray()	判断对象是否为数组
join()	把数组的所有元素放入一个字符串
keys()	返回数组的可迭代对象，包含原始数组的键（key）
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置
map()	通过指定函数处理数组的每个元素，并返回处理后的数组
pop()	删除数组的最后一个元素并返回删除的元素
push()	向数组的末尾添加一个或更多元素，并返回数组的长度
reduce()	累加（从左到右）数组中的所有元素，并返回结果
reduceRight()	累加（从右到左）数组中的所有元素，并返回结果
reverse()	反转数组中元素的顺序
shift()	删除并返回数组的第一个元素
slice()	截取数组的一部分，并返回这个新的数组
some()	检测数组元素中是否有元素符合指定条件
sort()	对数组的元素进行排序
splice()	从数组中添加或删除元素
toString()	把数组转换为字符串，并返回结果
unshift()	向数组的开头添加一个或多个元素，并返回新数组的长度
valueOf()	返回数组对象的原始值

Date 对象

JavaScript 中提供了四种不同的方法来创建 Date 对象，如下所示：

var time = new Date();

var time = new Date(milliseconds);

var time = new Date(datestring);

var time = new Date(year, month, date[, hour, minute, second, millisecond]);

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getFullYear()	从 Date 对象返回四位数字的年份
getYear()	已废弃，请使用 getFullYear() 方法代替
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getTime()	返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate()	根据通用时间从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay()	根据通用时间从 Date 对象返回周中的一天 (0 ~ 6)
getUTCMonth()	根据通用时间从 Date 对象返回月份 (0 ~ 11)
getUTCFullYear()	根据通用时间从 Date 对象返回四位数的年份
getUTCHours()	根据通用时间返回 Date 对象的小时 (0 ~ 23)
getUTCMinutes()	根据通用时间返回 Date 对象的分钟 (0 ~ 59)
getUTCSeconds()	根据通用时间返回 Date 对象的秒钟 (0 ~ 59)
getUTCMilliseconds()	根据通用时间返回 Date 对象的毫秒(0 ~ 999)
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
setMonth()	设置 Date 对象中月份 (0 ~ 11)
setFullYear()	设置 Date 对象中的年份（四位数字）
setYear()	已废弃，请使用 setFullYear() 方法代替
setHours()	设置 Date 对象中的小时 (0 ~ 23)
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)
setTime()	以毫秒设置 Date 对象
setUTCDate()	根据通用时间设置 Date 对象中月份的一天 (1 ~ 31)
setUTCMonth()	根据通用时间设置 Date 对象中的月份 (0 ~ 11)
setUTCFullYear()	根据通用时间设置 Date 对象中的年份（四位数字）
setUTCHours()	根据通用时间设置 Date 对象中的小时 (0 ~ 23)
setUTCMinutes()	根据通用时间设置 Date 对象中的分钟 (0 ~ 59)
setUTCSeconds()	根据通用时间设置 Date 对象中的秒钟 (0 ~ 59)
setUTCMilliseconds()	根据通用时间设置 Date 对象中的毫秒 (0 ~ 999)
toSource()	返回该对象的源代码
toString()	把 Date 对象转换为字符串
toTimeString()	把 Date 对象的时间部分转换为字符串
toDateString()	把 Date 对象的日期部分转换为字符串
toGMTString()	已废弃，请使用 toUTCString() 方法代替
toUTCString()	根据通用时间，把 Date 对象转换为字符串
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串
UTC()	根据通用时间返回 1970 年 1 月 1 日到指定日期的毫秒数
valueOf()	返回 Date 对象的原始值

Math 对象

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值
acosh(x)	返回 x 的反双曲余弦值
asin(x)	返回 x 的反正弦值
asinh(x)	返回 x 的反双曲正弦值
atan(x)	返回 x 的反正切值
atanh(x)	返回 x 的反双曲正切值
atan2(y,x)	返回 y/x 的反正切值
cbrt(x)	返回 x 的立方根
ceil(x)	对 x 进行向上取整，即返回大于 x 的最小整数
clz32(x)	返回将 x 转换成 32 无符号整形数字的二进制形式后，开头 0 的个数
cos(x)	返回 x 的余弦值
cosh(x)	返回 x 的双曲余弦值
exp(x)	返回算术常量 e 的 x 次方，即 Ex
expm1(x)	返回 exp(x) - 1 的值
floor(x)	对 x 进行向下取整，即返回小于 x 的最大整数
fround(x)	返回最接近 x 的单精度浮点数
hypot([x, [y, [...]]])	返回所有参数平方和的平方根
imul(x, y)	将参数 x、y 分别转换位 32 位整数，并返回它们相乘后的结果
log(x)	返回 x 的自然对数
log1p(x)	返回 x 加 1 后的自然对数
log10(x)	返回 x 以 10 为底的对数
log2(x)	返回 x 以 2 为底的对数
max([x, [y, [...]]])	返回多个参数中的最大值
min([x, [y, [...]]])	返回多个参数中的最小值
pow(x,y)	返回 x 的 y 次幂
random()	返回一个 0 到 1 之间的随机数
round(x)	返回 x 四舍五入后的整数
sign(x)	返回 x 的符号，即一个数是正数、负数还是 0
sin(x)	返回 x 的正弦值
sinh(x)	返回 x 的双曲正弦值
sqrt(x)	返回 x 的平方根
tan(x)	返回 x 的正切值
tanh(x)	返回 x 的双曲正切值
toSource()	返回字符串"Math"
trunc(x)	返回 x 的整数部分
valueOf()	返回 Math 对象的原始值

RegExp 对象

正则表达式用于匹配字符串中的模式。

复制代码

const pattern = /abc/;
const str = 'abcdef';
console.log(pattern.test(str));

方法	描述	示例
`test()`	检测字符串是否匹配正则表达式，返回布尔值	`/abc/.test('abcdef'); // 返回 true`
`exec()`	在字符串中查找匹配项，返回一个数组或 `null`	`/abc/.exec('abcdef'); // 返回 ["abc"]`

String对象里面也有一些正则表达式

方法	描述
search()	在字符串中搜索匹配项，并返回第一个匹配的结果，若没有找到匹配项则返回 -1
match()	在字符串搜索匹配项，并返回一个数组，若没有匹配项则返回 null
matchAll()	在字符串搜索所有匹配项，并返回一个迭代器（iterator）
replace()	替换字符串中与正则表达式相匹配的部分
split()	按照正则表达式将字符串拆分为一个字符串数组

DOM（文档对象模型）相关对象

方法	描述
document.addEventListener()	向文档中添加事件
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档
document.close()	关闭使用 document.open() 方法打开的输出流，并显示选定的数据
document.createAttribute()	为指定标签添加一个属性节点
document.createComment()	创建一个注释节点
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象
document.createElement()	创建一个元素节点
document.createTextNode()	创建一个文本节点
document.getElementsByClassName()	返回文档中所有具有指定类名的元素集合
document.getElementById()	返回文档中具有指定 id 属性的元素
document.getElementsByName()	返回具有指定 name 属性的对象集合
document.getElementsByTagName()	返回具有指定标签名的对象集合
document.importNode()	把一个节点从另一个文档复制到该文档以便应用
document.normalize()	删除空文本节点，并合并相邻的文本节点
document.normalizeDocument()	删除空文本节点，并合并相邻的节点
document.open()	打开一个流，以收集来自 document.write() 或 document.writeln() 方法的输出
document.querySelector()	返回文档中具有指定 CSS 选择器的第一个元素
document.querySelectorAll()	返回文档中具有指定 CSS 选择器的所有元素
document.removeEventListener()	移除文档中的事件句柄
document.renameNode()	重命名元素或者属性节点
document.write()	向文档中写入某些内容
document.writeln()	等同于 write() 方法，不同的是 writeln() 方法会在末尾输出一个换行符

Element 对象

Element 对象代表 HTML 文档中的一个元素。可以通过 document.getElementById()、document.querySelector() 等方法获取。

复制代码

const element = document.getElementById('myElement');
element.style.color = 'red';

方法	描述
element.addEventListener()	为指定元素定义事件
element.appendChild()	为元素添加一个新的子元素
element.cloneNode()	克隆某个元素
element.compareDocumentPosition()	比较当前元素与指定元素在文档中的位置，返回值如下： * 1：表示两个元素没有关系，不属于同一文档； * 2：表示当前元素在指定元素之后； * 4：当前元素在指定元素之前； * 8：当前元素在指定元素之内； * 16：指定元素在当前元素之内； * 32：两个元素没有关系，或者它们是同一元素的两个属性。
element.focus()	使元素获得焦点
element.getAttribute()	通过属性名称获取指定元素的属性值
element.getAttributeNode()	通过属性名称获取指定元素得属性节点
element.getElementsByTagName()	通过标签名获取当前元素下的所有子元素的集合
element.getElementsByClassName()	通过类名获取当前元素下的子元素的集合
element.hasAttribute()	判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false
element.hasAttributes()	判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false
element.hasChildNodes()	判断一个元素是否具有子元素，有则返回 true，没有则返回 false
element.hasFocus()	判断元素是否获得了焦点
element.insertBefore()	在已有子元素之前插入一个新的子元素
element.isDefaultNamespace()	如果指定 namespaceURI 是默认的则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等
element.isSameNode()	检查当前元素与指定元素是否为同一元素
element.isSupported()	判断当前元素是否支持某个特性
element.normalize()	合并相邻的文本节点，并删除空的文本节点
element.querySelector()	根据 CSS 选择器，返回第一个匹配的元素
document.querySelectorAll()	根据 CSS 选择器，返回所有匹配的元素
element.removeAttribute()	从元素中删除指定的属性
element.removeAttributeNode()	从元素中删除指定的属性节点
element.removeChild()	删除一个子元素
element.removeEventListener()	移除由 addEventListener() 方法添加的事件
element.replaceChild()	替换一个子元素
element.setAttribute()	设置或者修改指定属性的值
element.setAttributeNode()	设置或者修改指定的属性节点
element.setUserData()	在元素中为指定键值关联对象
element.toString()	将元素转换成字符串
nodelist.item()	返回某个元素基于文档树的索引

Attributes 对象

Attributes 对象表示元素的属性集合。可以通过 element.attributes 访问。

复制代码

const element = document.getElementById('myElement');
const attributes = element.attributes;
for (let i = 0; i < attributes.length; i++) {
    console.log(attributes[i].name + ': ' + attributes[i].value);
}

属性 / 方法	描述
attributes.isId	如果属性是 ID 类型，则返回 true，否则返回 false
attributes.name	返回属性名称
attributes.value	设置或者返回属性的值
attributes.specified	如果定义了指定属性，则返回 true，否则返回 false
nodemap.getNamedItem()	从节点列表中返回的指定属性节点
nodemap.item()	返回节点列表中处于指定索引号的节点
nodemap.length	返回节点列表的节点数目
nodemap.removeNamedItem()	删除指定属性节点
nodemap.setNamedItem()	设置指定属性节点（通过名称）

DOM 和 BOM

DOM（文档对象模型）

DOM 是 HTML 和 XML 文档的编程接口，它将文档表示为树形结构，允许程序动态地访问和修改文档的内容、结构和样式。

BOM（浏览器对象模型）

BOM 提供了与浏览器窗口进行交互的对象和方法，包括 window、navigator、screen、location、history 等对象。

window 对象中提供的方法及其描述：

方法	描述
alert()	在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()	解码一个 base-64 编码的字符串
btoa()	创建一个 base-64 编码的字符串
blur()	把键盘焦点从顶层窗口移开
clearInterval()	取消由 setInterval() 方法设置的定时器
clearTimeout()	取消由 setTimeout() 方法设置的定时器
close()	关闭某个浏览器窗口
confirm()	在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()	创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()	使一个窗口获得焦点
getSelection()	返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()	获取指定元素的 CSS 样式
matchMedia()	返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()	将浏览器窗口移动指定的像素
moveTo()	将浏览器窗口移动到一个指定的坐标
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
print()	打印当前窗口的内容
prompt()	显示一个可供用户输入的对话框
resizeBy()	按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()	将窗口的大小调整到指定的宽度和高度
scroll()	已废弃。您可以使用 scrollTo() 方法来替代
scrollBy()	将窗口的内容滚动指定的像素
scrollTo()	将窗口的内容滚动到指定的坐标
setInterval()	创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()	创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()	停止页面载入
postMessage()	安全地实现跨源通信

Navigator 对象

Navigator 对象包含有关浏览器的信息，如浏览器名称、版本等。

复制代码

console.log(navigator.userAgent);

|---------------|---------------------------------------|
| appCodeName | 返回当前浏览器的内部名称（开发代号） |
| appName | 返回浏览器的官方名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回浏览器是否启用 cookie，启用返回 true，禁用返回 false |
| onLine | 返回浏览器是否联网，联网则返回 true，断网则返回 false |
| platform | 返回浏览器运行的操作系统平台 |
| userAgent | 返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称 |

Screen 对象

Screen 对象包含有关用户屏幕的信息，如屏幕宽度、高度等。

复制代码

console.log(screen.width);

属性	说明
availTop	返回屏幕上方边界的第一个像素点（大多数情况下返回 0）
availLeft	返回屏幕左边边界的第一个像素点（大多数情况下返回 0）
availHeight	返回屏幕的高度（不包括 Windows 任务栏）
availWidth	返回屏幕的宽度（不包括 Windows 任务栏）
colorDepth	返回屏幕的颜色深度（color depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
height	返回屏幕的完整高度
pixelDepth	返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24
width	返回屏幕的完整宽度
orientation	返回当前屏幕的方向

Location 对象

Location 对象表示当前窗口的 URL，可以用于获取或修改 URL。

复制代码

console.log(location.href); 
location.href = 'https://www.example.com';

属性	描述
hash	返回一个 URL 中锚的部分，例如：http://c.biancheng.net#js 中的 #js。
host	返回一个 URL 的主机名和端口号，例如 http://c.biancheng.net:8080。
hostname	返回一个 URL 的主机名，例如 http://c.biancheng.net。
href	返回一个完整的 URL，例如 http://c.biancheng.net/javascript/location-object.html。
pathname	返回一个 URL 中的路径部分，开头有个`/`。
port	返回一个 URL 中的端口号，如果 URL 中不包含明确的端口号，则返回一个空字符串`' '`。
protocol	返回一个 URL 协议，即 URL 中冒号`:`及其之前的部分，例如 http: 和 https:。
search	返回一个 URL 中的查询部分，即 URL 中`?`及其之后的一系列查询参数。

方法	说明
assign()	加载指定的 URL，即载入指定的文档。
reload()	重新加载当前 URL。
replace()	用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace() 替换的新页面不会保存在浏览历史中，用户不能使用后退来返回该页面。
toString()	与 href 属性的效果相同，以字符串的形式返回当前完整的 URL。

History 对象

History 对象允许访问浏览器的历史记录，可以实现前进、后退等操作。

复制代码

history.back(); 
history.forward();

方法	说明
back()	参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的`←`按钮来实现同样的效果。
forward()	参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的`→`按钮来实现同样的效果。
go()	参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页。
pushState()	向浏览器的历史记录中插入一条新的历史记录。
replaceState()	使用指定的数据、名称和 URL 来替换当前历史记录。

原型链

学习到了这篇文章一文搞懂JS原型与原型链（超详细，建议收藏）前言作为一个前端开发工程师，熟练掌握JS这门语言是必须要的。无论是日常的工 - 掘金

在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]（在浏览器中可以通过 __proto__ 访问），它指向该对象的原型对象，这个原型对象中有一个属性为constructor。当访问一个对象的属性或方法时，JavaScript 会先在对象本身查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（Object.prototype）。

复制代码

const animal = {
    eat() {
        console.log('Eating...');
    }
};
const dog = Object.create(animal);
dog.eat();

在这个例子中，dog 对象本身没有 eat 方法，但它的原型对象 animal 有，所以可以通过原型链调用 eat 方法。原型链实现了 JavaScript 中的继承机制。