总结JS笔记

待我称王封你为后i 2024-04-01 16:05 43阅读 0赞

**目录**

JS笔记

JS基本概念

全局变量 和 局部变量

弹出框：

document.write对html内容输出

控制台输出内容：

获取表单值 和 非表单值

数据类型：

数据类型的分类：

typeof检测类型的方式

数组的创建：

对象的创建方式

关于 undefined 和 null之间的介绍：

数据类型的转换

整数转换

运算符：

★js的结构：

break 和 continue 的介绍

★字符串的方法

★数组的方法

函数

一、变量作用域

二、封闭函数

三、闭包

四：return false;

五：arguments对象

递归：

定时器

时间对象

JS事件

event : 事件对象

事件流：捕获型事件流和冒泡型事件流

阻止事件冒泡

阻止默认行为：

DOM基础

DOM中创建标签和文本

DOM中插入元素

DOM查询

1：查找父级

2：查找子元素

3：查找兄弟元素

DOM高级

★DOM属性操作setAttribute()（对象方法）

Window.onscroll滚轮事件

★窗口尺寸与大小

正则表达式

Axios

--------------------

## **JS笔记** ##

### **JS基本概念** ###

js 的全称：JavaScript

js 特点： 解释性 基于对象 事件驱动 跨平台性

js的组成部分

核心：ECMAscript

文档对象模型：DOM (全称：document object model)

浏览器对象模型：BOM (全称: browser object model)

js在哪使用： 在body中使用：

### **全局变量 和 局部变量** ###

1）全局变量：

在函数外面定义变量，在整个javascript中都可以被访问到。

2）局部变量：

在函数内部定义的变量，只能被函数内部使用。

全局变量 和 局部变量的寿命

1）全局变量在网页关闭后，结束其生命

2）局部变量在函数调用完后，结束其生命

### **弹出框：** ###

1）alert(); 表示弹出框

2）confirm(); 表示确认框 康 fang mu

3）prompt(); 表示输入框 po 让 破 t

### **document.write对html内容输出** ###

1）使用window.onload时，在head中的document.write输出的内容会覆盖掉body里面的所有内容(只用与document.write中)

2）在不适用window.onload时，head、body中的document.write共存。

document da q men de

### **控制台输出内容：** ###

通过console.log()

康 搜

### **获取表单值 和 非表单值** ###

1）value wai liu 表示获取表单值

2）innerText / innerHTML 表示获取非表单值

innerHTML 和 innerText的相同点和不同点

1）相同点：都可以获取纯文本内容

2）不同点：

innerText只能获取纯文本内容(不包括HTML标签)

innerHTML能获取纯文本内容(包括HTML标签)

### **数据类型：** ###

数值(number)类型：(包含整数和浮点数)

布尔(boolean)类型：(只有true和false两个值 【两个值小写】)

字符串(string)类型：(表示一个字符序列，必须使用单引号（''）或双引 号（""）括起来)

空(null)类型：(表名某个变量的值为空，只有一个值为：null【小写】)

未定义(undefined)类型：(用来确定一个已经创建但还没有赋初值的变量， 只有一个值为：undefined 【小写)】

对象(object)类型：(该类型的值为对象，对象由一些列属性（变量）和方法（函数）的集合，访问它们时用：. (英文点号))

数组(Array)类型：(一系列的变量组成)

函数(function)类型：(包含一段可执行的代码)

### **数据类型的分类：** ###

1）基本数据类型：

数值(number)类型、nan bo

布尔(boolean)类型、bo li

字符串(string)类型、

空(null)类型 na

未定义(undefined)类型、un di fan de

2）复合数据类型：

对象(object)类型

数组(Array)类型、 e run

函数(function)类型 fang te shen

### **typeof检测类型的方式** ###

1）typeof 数据类型

例如：console.log(typeof '123')

例如：

var str = '123';

console.log(typeof str)

2）typeof(数据类型)

例如：console.log(typeof('123'))

例如：

var str = '123';

console.log(typeof(str))

### **数组的创建：** ###

1) var arr = \[1,2,3,4\]

2) var arr = new Array(1,2,3,4)

数组的下标从 0 开始

获取数组的内容：arr\[下标\]

数组的增、删、查、改

例如：

var arr = \[1,2,3\]

增：arr\[3\] = 4;

删：arr\[2\] = null;

查：arr\[1\];

改：arr\[1\] = 'a';

### **对象的创建方式** ###

1） var obj = \{

age: 18

2）var obj1 = new Object(\{

age: 20

\})

对象的获取方式：

1） obj.name

2） obj\['name'\]

对象数据类型的增、删、查、改

例如：var obj = \{

age: 18,

ph: 12345

增：obj.sex = "women"

删：obj.ph = null;

查：obj.ph / obj\['ph'\]

改：obj.name = "Jone"

### **关于 undefined 和 null之间的介绍：** ###

1） undefined 表示未定义，一般一个变量声明，但没有赋值。会出现 undefined

1.  null 表示空对象，一般是为变量占位使用。

### **数据类型的转换** ###

1）Number() 表示转为数值类型

例如：

Number('123');

Number(true / false)

// 转化非数字 跟number一样 在前面加一个加号更简约

alert( +true ); // 1

alert( +"" ); // 0

这是自己总结的：

在算术函数和表达式中，会自动进行 number 类型转换。

比如，当把除法 / 用于非 number 类型：

alert( "6" / "2" ); // 3, string 类型的值被自动转换成 number 类型后 进行计算

2）String() / toString() 表示转为字符串类型

例如：

var num = 123;

num.toString(); / String(num);

var bool = true / false;

bool.toString(); / String(bool)

这是自己总结的：

当我们从 string 类型源（如文本表单）中读取一个值，但期望输入一个数字时，通常需要进行显式转换。

如果该字符串不是一个有效的数字，转换的结果会是 NaN。例如：

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN，转换失败

3）Boolean() 表示转为布尔类型

例如：

var str = 'hello world';

Boolean(str);

var num = 123;

Boolean(num);

### **整数转换** ###

parseInt(12.96); //转成整数

parseFloat(12); //转成浮点数

注释：parseFloat() 函数可解析一个字符串，并返回一个浮点数。

Math.round(12.36); //四舍五入

Math.floor(12.72); //向下取整

Math.ceil(12.32); //向上取整

Math.random()生成\[0,1)的数

Math.random()\*5生成\[0,5)的数

parseInt(Math.random()\*5)生成的都是\[0,4\] 的随机整数

随机函数的封装

// 1)函数的定义

function toFree(n,m)\{

return parseInt(Math.random()\*(m-n)+n);

// 2)函数的调用

toFree(11,15)----取值范围（11-14）不包括最后一位数字

### **运算符：** ###

1）算术运算符

\+（加）、-（减）、\*（乘)、/（除）

%（取余）、++（累加）、--（累减）

取余(%)

模 2 结果两种 0 / 1

模 3 结果三种 0 / 1 /2

i ++ 和 ++ i 的区别：

i ++ 先赋值，在运算

\++ i 先运算，在赋值

2）赋值运算符

=（赋值）、+=（加赋值）、-=（减赋值）

\*=（乘赋值）、/=（除赋值）、%=（取余赋值）

3）比较运算符

>（大于）、<（小于）、==（等于）、

!=（不等于）、>=（大于等于）、<=（小于等于）

!==（严格不等于，比较类型和值）、

===（严格等于，比较类型和值）

4）字符串运算符 \+

注意：在任何数 碰到 字符串时，+ 变成连接符

5）逻辑运算符 &&（与）、||（或）、!（非）

&&(与):表示条件都要满足

||(或):表示众多条件中满足1个即可

!(非) :表示取反

6）条件运算符 判断的条件 ? 代码1 : 代码2 （唯一的三目运算符）

7）逗号运算符 ,

8）typeof运算符 typeof 判断某个变量的数据类型

typeof 运算符 (主要是检测数据类型)

语法：

typeof 数据类型

例如：var str = 'hello'

console.log(typeof str)

typeof(数据类型)

例如： var num = 123;

console.log(typeof(num))

9）instanceof运算符 instanceof 判断某个变量是否是指定类的实例

例如：

var arr = \[1,2,3,4\];

var str = '123';

var obj = \{

age: 18

\};

console.log(typeof arr); // object

console.log(arr instanceof Array); // true

console.log(arr instanceof Object); // true

console.log(str instanceof Array); // false

console.log(obj instanceof Object); // true

NaN的特点

1.任何数值除以非数值（字符串、undefined、object）都会返回 NaN。

注意：

1.1\*\*Boolean\*\*和Null(关于Null的解释在介绍isNaN函数会提到)因为在过程中会自动转换成number类型，所以会得到正确的数字。

2.NaN与任何值都不相等，包括NaN自身。

isNaN()方法

该方法接收一个参数，这个参数可以是任何类型，如果接收的参数是数字类型，返回false;如果是其他类型（除了数字的任何其他类型），则返回true;

注意：

1.该方法在接收参数后，如果传入的参数类型不是数字类型，会尝试将该参数转换为数字类型，以下有代码例子。

2.如接受的参数是空，比如\[\]（空数组）、“”（空字符串）等，会在过程中转换为数字类型的0，从而返回false;

### **★js的结构：** ###

**1）顺序结构**

例如：

var a = 10;

var b = 20;

console.log(a + b);

2）选择(判断)结构

if语句

例如：

if(条件)\{

条件满足执行的代码

if-else语句

例如：

if(条件)\{

条件满足执行的代码

\}else\{

条件不满足执行的代码

if-else if-else....语句

例如：

if(条件1)\{

条件1满足执行的代码

\}else if(条件2)\{

条件2满足执行的代码

\}else\{

条件都不满足执行的代码

switch语句

例如：

switch()\{

case 条件1:

条件1满足执行的代码

break;

case 条件2:

条件2满足执行的代码

break;

case 条件3:

条件3满足执行的代码

break;

....

default:

上述条件都不满足执行的代码

\*\*\* 注意：

break 表示终止整个语句

default 关键词来规定匹配不存在时做的事情。

1.  循环结构

For 循环

while 和 do-while的介绍

1）while 和 do-while的相同点

都是循环

2）while 和 do-while的不同点

do-while:条件满足与否，先执行一次。

while:只有在条件满足后，才能执行代码

### **break 和 continue 的介绍** ###

1）break和continue相同点

都是跳出循环

2）break和continue区别：

break是跳出整个循环（终止整个循环）

continue是跳出本次循环，继续下面的循环

### **★字符串的方法** ###

1）charAt(); 通过下标查找对应的字符

2）indexOf(); 通过第一次出现的字符。查找对应的下标(从左向右查找)

3）lastIndexOf(); 通过最后一次出现的字符，查找对应的下标(从右向左查找)

4）replace('被替换的内容', '替换的新内容');替换内容

5）split('切割的方式');切割的方式取决于字符之间的间隔符号

6）substr(开始下标, 长度); 字符串的截取

7）substring(开始下标, 结束下标); 字符串的截取(不包含最后一个位)

8）toLowerCase(); 大写变小写 to lou wo k s

9）toUpperCase(); 小写变大写 to 啊b k s

1.  toSting(); 返回字符对象值

### **★数组的方法** ###

1）pop() 表示从数组 "后面" 删除一个

2）push() 表示从数组的 "后面" 添加1个或多个

3）shift() 表示从数组的 "前面" 删除一个

4）unshift() 表示从数组的 "前面" 添加一个或多个

5）splice(); 表示替换数组的内容 还可以删除 第一个参数是下标第二个参 数是删除几个

6）sort(); 表示数组从小到大排序(是能是0-9) sa t

7）reverse() 表示数组的反转 润 我 s

8）join('') 表示把数组转为字符串

9）concat() 表示合并数组

### **函数** ###

1) 函数的概念

函数就是把完成特定功能的一段代码封装起来。给该功能起一个名字（函数名）。

哪里需要实现该功能在哪里调用该函数。函数可以在任何时间任何地方调用。

(如何调用？ --> 函数名() )

2) 函数的作用

使程序变得更简短而清晰

有利于程序维护

可以提高程序开发的效率

提高了代码的重用性(复用性）

\*\*\*说明：

不使用函数，JS代码按顺序从上到下执行解析，且执行时间，执行哪部分代码都是不可控的。

使用函数后，浏览器不会直接执行它，只有在调用这个函数时，它才会被浏览器所执行。

3) 函数命名规范

1）函数名称不要包含特殊字符

2）函数名称最好含义明确

3）函数名称最好遵循驼峰标记法或者下划线法

4）函数名称严格区分大小写

5）函数名称如果重复会产生覆盖

4) 函数的定义：

函数可以分2种，一种是“没有返回值的函数”，

另外一种就是“有返回值的函数” return 表示返回值

\*\*\*\* 创建函数的关键字： function

\*\*\*\* 声明变量的关键字： var

函数的创建：

1）第一种定义方式：函数声明(命名函数)

//函数的定义

function fn()\{代码\}

//函数的调用

fn()

2）第二种定义方式：函数表达式(匿名函数)

//函数的定义

var fun = function()\{代码\}

//函数的调用

fun()

3）第三种定义方式：构造函数

//函数的定义

function Fn(形参)\{代码\}

//函数的调用

var fun=new Fn(实参)

\*\*\*\*\*函数和变量的提升问题

函数，整体提升

变量，声明提升

关于函数中传参数量问题

1）实参个数 大于 形参个数 ，多出的部分省略

2）实参个数 小于 形参个数, 少了部分出现undefined

4) 函数的分类

1：命名函数

function fn()\{

代码

fn()

2: 匿名函数

var fn = function()\{

代码

fn()

3: 构造函数

function Fn()\{

代码

var f = new Fn();

5) 函数的传参

1: 命名函数的传参

function fn(val, name)\{

代码

fn('hello', 'world')

2: 匿名函数的传参

var f = function(val, name2)\{

代码

f('good', 'morning')

3: 构造函数的传参

function Fn(val, name3)\{

代码

var f1 = new Fn('one', 'two')

\*\*\*\*传参数量的注意事项

1: 实参个数 大于 形参个数，多余的部分省略

2: 实参个数 小于 形参个数，少出的出现undefined

6) 构造函数内置的对象

function Fn()\{

//var this = \{\};

代码.....

//return this;

7) 构造函数的原型

构造函数可以使用自己的数据，也可以继承原型上的数据,不能对原型的数据进行修改。

构造函数的原型，最顶端是 --> object.prototype = \{\}

8) 原型链：

很多个原型 链接 在一起，有继承和被继承的关系，最后形成原型链。

9) this指向

1: 命名函数 和 匿名函数 内部的this 指向 window

function fn()\{

this.name = 'Tom'

console.log(this.name); // Tom

fn()

console.log(window.name);// Tom

2: 构造函数内部的this 指向 承接构造函数的变量

function Fn()\{

//var this = \{\};

this.name = "Jone"

console.log(this.name); // Jone

//return this;

var f1 = new Fn();

console.log(f1.name); // Jone

10) 改变this 指向的方法

1: call();

2: apply();

11) call() 和 apply() 的相同点 和 不同点

1: 相同点：

call() 和 apply()都可以改变this指向

2: 不同点:

call(): 第二个参数以普通的形式显示

apply(): 第二个参数以数组的形式显示

### **一、变量作用域** ###

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量

1、全局变量：在函数之外定义的变量，为整个页面共用，函数的内部外部都可以访问。

2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部，如果没有，就去外部查找

### **二、封闭函数** ###

1，封闭函数是什么？

封闭函数：没有名字初始化的调用。()是用来显示调用的。封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用“命名”的函数。

2，封闭函数的语法结构：

（function()\{函数执行体\})()

3，封闭函数的作用：

（1）避免名称冲突

（2）在函数体内部定义的变量以及函数名称并不会被外部的元素，访问或是获取

4，三种封闭函数的写法：

（1）（function()\{函数执行体\})()

（2）!function()\{\}()

（3）~function()\{\}

注意：

1、一般函数的步骤是定义函数和调用函数

2、封闭函数的定义和执行：

(function()\{...\})();

还可以在函数定义前加上"~"或者"!"符号来定义匿名函数。

### **三、闭包** ###

闭包就是函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回

\*\*\*使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

### **四：return false;** ###

1: 返回值

2: 返回控制

3: 阻止默认行为

### **五：arguments对象** ###

在Javascript中arguments是一个类似Array的存在，但它不能等同于Array。

arguments对象不能显式的创建，它只有在函数开始时才可用。

它可以像访问数组那样去访问每一个子元素。.arguments\[0\],arguments\[1\],.....arguments\[n\]；

arguments的长度不是有形参决定，而是有函数本身的实参决定的

### **递归：** ###

所谓的递归函数就是在函数体内调用本函数

递归的思想：

1》找规律

2》找出口

用递归的好处：就是减少代码，别的没有什么好处了。

1）什么时候用不到递归：逻辑思维复杂时

2）用递归运行快慢：用递归反而运行慢，因为每次都要找规律，然后在等待结果。这个过程就很慢。

使用递归注意事项：

使用递归函数一定要注意，处理不当就会进入死循环。递归函数只有在特定的情况下使用 ，比如阶乘问题

### **定时器** ###

1）开启定时器

1：setInterval(function()\{\}, 毫秒)

2：setTimeout(function()\{\}, 毫秒)

2）关闭定时器

1： var timer = setInterval(function()\{\}, 毫秒)

clearInterval(timer)

2：var timer2 = setTimeout(function()\{\}, 毫秒)

clearTimeout(timer2)

3）注意开启定时器的写法

1：setInterval(function()\{\}, 毫秒)

2：setInterval(函数名, 毫秒)

4）setInterval 和 setTimeout的相同点不不同点

1：相同点：

都可以开启定时模式

2： setInterval 每隔一段时间,执行一次

setTimeout 隔一段时间,只执行一次

\*\*注意\*\*

1：在事件触发的前提条件下。开定时器时,一定要先关闭定时器。

2：定时器调用函数时不加“()”

例如：setInterval(toTime,1000);

### **时间对象** ###

new Date();

通过时间对象，来获取具体的时间信息

var Year=oDate.getFullYear(); //获取年

var Month=oDate.getMonth()+1; //获取月

var Date=oDate.getDate(); //获取日

var Day=oDate.getDay(); //获取周

var Hours=oDate.getHours(); //获取小时

var Minutes=oDate.getMinutes(); //获取分钟

var Seconds=oDate.getSeconds(); //获取秒

var MSeconds=oDate.getMilliseconds();//获取毫秒

通过时间对象，来设置时间

setFullYear(2023, 5, 1) 设置年,月,日

setHours(0, 0, 0) 设置时,分,秒

时间戳

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

### **JS事件** ###

1: 事件概念：

事件，就是用户或者是浏览器执行的某种动作。例如：鼠标单击，双击

事件三要素：事件源，事件，事件处理程序。

事件源：触发事件的源头

2: 事件处理程序：

响应某个事件的函数。事件处理程序的名字由on开头，所以click事件的事件处理程序就是 onclick, 之后跟的是匿名函数

例如：οnclick=function()\{代码块\}

3: 事件

1）鼠标事件：

onclick 表示鼠标单击事件

ondblclick 表示鼠标双击事件

onmousemove 表示鼠标移动事件

onmouseover 表示鼠标移入

onmouseout 表示鼠标移出(离开)

onmouseenter 表示鼠标移入

onmouseleave 表示鼠标移出(离开)

onmousedown 表示鼠标按下

onmouseup 表示鼠标抬起

2）表单事件

onfocus 表示聚焦事件

onblur 表示失焦事件

onchange 表示失焦时监听内容改变

oninput 表示实时监听内容改变

\*\*\* onchange 和 oninput 的相同点 和 不同点

相同点：

都是监听input内容的改变

不同点

onchange 只有失焦后才能监听内容的改变

oninput 是实时监听内容改变

3）键盘事件：

onkeydown 表示键盘按下(任意键)

onkeyup 表示键盘抬起(任意键)

onkeypress 表示键盘按下抬起( 不包括系统键)

onkeydown和onkeypress区别

onkeydown 按下任意键触发事件

onkeypress 按下(系统键,功能键除外)触发事件

### **event : 事件对象** ###

当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方event对象，供我们在需要的调用。

\*\*\*兼容写法：Event对象的兼容：ev = ev || window.event

函数中内置的对象

event对象

arguments对象

### **事件流：捕获型事件流和冒泡型事件流** ###

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：

事件的传播是从最特定的事件目标到最不特定的事件目标。

\*\*\* 即从DOM树的叶子到根。【推荐】（从内到外）

捕获型事件流：

事件的传播是从最不特定的事件目标到最特定的事件目标。

\*\*\* 即从DOM树的根到叶子。（从外到内）

onclick 和 addEventListener('事件', function()\{\}, false / true)的相同点和不同点

1）相同点： onclick 和addEventListener()方法都可以实现事件冒泡

2）不同点：

onclick 只能是事件冒泡，而不能对冒泡捕获切换。并且onclick使用在同一个元素中，后者会覆盖前者的事件。兼容性很好，事件加on

addEventListener()方法既能实现事件冒泡，也能实现事件捕获，并且同一个元素可以绑定多个相同事件，不会别覆盖。但兼容性不好,事件不加 on

### **阻止事件冒泡** ###

阻止冒泡 : 当前要阻止冒泡的事件函数中调用

event.cancelBubble = true; can sou ba bo

或

event.stopPropagation() pa po shen

阻止事件冒泡封装的函数

function stopPropagation (event) \{

var e = event || window.event;

if (e.stopPropagation) \{

e.stopPropagation();

\} else \{

e.cancelBubble = true;

### **阻止默认行为：** ###

return false

或

ev.prentDefault()

或

ev.returnValue = false

阻止默认行为的封装函数

function preventDefault(event)\{

var e = event || window.event;

if(e.preventDefault)\{

e.preventDefault();

\}else\{

e.returnValue = false;

事件流的典型应用: --> 事件代理

事件委托定义:

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

事件委托的过程介绍：

1：Event对象提供了一个属性叫target(ta gei te)，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement。

2：此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）

事件委托优点

提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。可以给新元素动态添加

事件委托缺点

比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；mousemove这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；

总结：

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。值得注意的是，mouseover、mouseenter、mouseleave和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在比如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

### **DOM基础** ###

DOM节点

元素节点

属性节点

文本节点

DOM元素获取

document.getElementById('id名'); 通过id来获取元素

document.getElementsByClassName('class名');通过class获取元素

document.getElementsByTagName('标签名'); 通过标签来获取元素

document.getElementsByName('属性名'); 通过属性名获取元素

document.body; 通过body本身

document.title; 获取网页标题

document.querySelector('选择器');通过选择器来获取一个元素

document.querySelectorAll("选择器"); 通过选择器来获取多个元素

### **DOM中创建标签和文本** ###

创建标签： document.createElement('标签名')

创建文本： document.createTextNode('内容');

// 创建标签
    
    var oLi = document.createElement('li');
    
    oLi.innerHTML = num;
    
    // 把标签添加到父元素内
    
    oBox.appendChild(oLi)

### **DOM中插入元素** ###

1：appendChild(新元素) a pen de chai ao de

使用appendChild()把一个新元素插入到父元素的内部子元素的 “末尾”

2：insertBefore(新元素，原来父级里面的子元素)in se de be four

使用insertBefore() 方法将一个新元素插入到父元素中的某一个子 元素“之前”。

3：删除元素

使用removeChild()方法来删除父元素下的某个子元素。

1.  removeChild(B); （A是父标签，B是子标签）

4：复制元素

使用cloneNode()方法来实现复制元素。ke lou no 的

obj.cloneNode(bool);

var p=document.getElementsByTagName("p")\[0\];

var cP=p.cloneNode();//克隆p节点

var cP=p.cloneNode(true);//克隆p节点，深度克隆，克隆节点以及节点下面的子内容。 最后把变量添加到父级里(appendChild(变量))

5：替换元素

使用replaceChild()方法来实现替换元素。

A.replaceChild(new,old);(先创建在替换---不加引号)

### **DOM查询** ###

DOM遍历，也就是查找元素，主要以“当前所选元素”为基点，然后查找它的父元素、子元素或者兄弟元素。

1）查找父元素

2）查找子元素

3）查找兄弟元素

#### **1：查找父级** ####

在JavaScript中，我们可以使用parentNode属性来获得某个元素的父元素。

语法： obj.parentNode

#### **2：查找子元素** ####

在JavaScript中，我们可以使用以下2组方式来获得父元素中的所有子元素或某个子元素。

childNodes、firstChild、lastChild（不常用）

children、firstElementChild、lastElementChild（常用）

注意，其中childNodes获取的是所有的子节点。这个子节点是包括元素节 点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。

#### **3：查找兄弟元素** ####

在JavaScript中，我们可以使用以下2组方式来获得兄弟元素

previousSibling(po run ye si se bu ling)、nextSibling（不常用）

previousElementSibling、nextElementSibling（常用）

跟查找子元素的2组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果你希望只操作元素节点，建议用previousElementSibling和nextElementSibling。

### **DOM高级** ###

DOM中获取属性

obj.attr 表示直接获取静态属性值

obj.getAttribute(); 表示动态获取属性值

obj.setAttribute(); 表示动态设置属性值

obj.removeAttribute();表示动态删除属性值

obj.hasAttribute(); 判断元素是否含有该属性(返回 true / false)

1：获取HTML属性值

获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。

语法： obj.attr --> 对象.属性名

例如：oBox.id

2：设置HTML属性值

设置HTML元素的属性值，同样也是通过属性名来设置的。

语法： obj.attr = "值"; --> 对象.属性名=‘新的属性值’

oBox.id = 'one' (原来的id = 'box')

### **★DOM属性操作setAttribute()（对象方法）** ###

为了操作HTML元素的属性,JavaScript为我们提供了4种方法:

getAttribute();//获取属性

setAttribute();//设置属性

removeAttribute();//删除属性

hasAttribute();//判断元素是否包含该属性 返回 true / false

//创建标签
    
    var oDiv = document.createElement('div');
    
    //设置标签属性
    
    oDiv.setAttribute('class', 'one');
    
    oDiv.setAttribute('id', 'box1');
    
    //插入到父元素中
    
    oBody.appendChild(oDiv)
    
    //获取属性
    
    console.log(oDiv.getAttribute('id'))
    
     //删除属性
    
     oDiv.removeAttribute('class')

DOM中对css样式的操作

1） obj.style 表示可以获取 和 设置行内样式

2） getComputedStyle(obj).attr/\['attr'\] 表示谷歌获取行间 和 非行间样式

3） obj.currentStyle.attr/\['attr'\] 表示IE低版本获取行间 和 非行间样式

style,getComputedStyle 和 currentStyle区别在于：

（1）style 只能获取行间样式，但能设置样式。

（2）getComputedStyle 和 currentStyle 能够获取 行间样式/非行间样式/浏览器默认样式，但存在浏览器兼容问题，且不能设置样式。

不同浏览器下，获取 css 属性值 的兼容写法

function getStyle(oElement, sName)\{

if(oElement.currentStyle)\{

oElement.currentStyle\[sName\]

\} else\{

getComputedStyle(oElement, null)\[sName\]

### **Window.onscroll滚轮事件** ###

window.οnscrοll=function()\{

var oBox=document.getElementById('box');

Var T=document.documentElement.scrollTop||document.body.scrollTop;

if(T>=300)\{

oBox.style.display='block';

\}else\{

oBox.style.display='none';

### **★窗口尺寸与大小** ###

c1) clientWidth是对象的宽度（不包含边框，受滚动条的影响）

clientWidth = 标签的宽度 + padding值 - 滚动条宽度

clientHeigth = 标签的高度 + padding值 - 滚动条高度

2) scrollWidth是对象实际内容的宽度（包括padding,但不包括边框，受滚动条效果）

scrollWidth = 内容的 实际 宽度 + padding - 滚动条宽度

scrollHeigth = 内容的 实际 高度 + padding - 滚动条高度

注意：（如果没有超出的情况下跟clienwidth保持一致，如果超出了就加 上超出的宽/高度）

3) offsetWidth是指对象自身的宽度，（包含边框，不受滚动条的影响）

offsetWidth = 标签的宽度 + border + padding值

offsetHeigth = 标签的高度 + border + padding值

![54d41791a0c045e9953c40a2cabdb5af.png][]

4）scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(滚 动条距左边的距离)

5）scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离(滚动条距顶部的距离)  
  
6）offsetLeft：获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

7）offsetTop：获取对象相对于版面或由 offsetparent 属性指定的父坐标的计算顶端位置

![919f76ebefa741fd927b5677665c22af.png][]

**clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标。**

**clientY 设置或获取鼠标指针位置相对于当前窗口的y 坐标**

**offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。**

**offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。**

![80383131dc45437e8285e574a29d2cb1.png][]

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的高);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

### **正则表达式** ###

数字：/^\[0-9\]$/

n位的数字：/^\\d\{n\}$/

至少n位的数字：/^\\d\{n,\}$/

m-n位的数字：/^\\d\{m,n\}$/

汉字：/^\[\\u4e00-\\u9fa5\]\{2,4\}$/

英文和数字：/^\[A-Za-z0-9\]$ 或 ^\[A-Za-z0-9\]\{4,40\}$/

长度为3-20的所有字符：/^.\{3,20\}$/

由26个英文字母组成的字符串：/^\[A-Za-z\]$/

由26个大写英文字母组成的字符串：/^\[A-Z\]$/

由26个小写英文字母组成的字符串：^\[a-z\]$

由数字和26个英文字母组成的字符串：^\[A-Za-z0-9\]$

由数字、26个英文字母或者下划线组成的字符串：^\\w$ 或 ^\\w\{3,20\}$

中文、英文、数字包括下划线：^\[\\u4E00-\\u9FA5A-Za-z0-9\_\]$

身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\\d\{15\}$)|(^\\d\{18\}$)|(^\\d\{17\}(\\d|X|x)$)

### **Axios** ###

[54d41791a0c045e9953c40a2cabdb5af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2c6eb7d506ae43448554442158433ebc.png
[919f76ebefa741fd927b5677665c22af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a6002a7ddfb44c94912bf5d29879274e.png
[80383131dc45437e8285e574a29d2cb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0c0c6acf7af444a1893477723b07823e.png