03 JavaScript-DOM

一、BOM&DOM

1. BOM

BOM 是浏览器对象模型，就可以理解成是当前浏览器打开的窗口

window对象 就是 BOM

通过window对象 可以操作浏览器本身 它里面提供了一些操作当前浏览器的对象和方法

1.1. 各种弹框：

window.alert('消息框')

window.prompt('输入框')

window.confirm('确认框')

1.2. 打开和关闭窗口：

open()方法，打开新的窗口

window.open('http://baidu.com')

close()方法，关闭当前窗口

window.close()

1.3. 通用方法

window.parseInt('123') //将字符串的'123'，强转为整型的123

window.parseFloat('12.12') //将字符串的'12.12'，强转为浮点型的12.12

window.isNaN('abc') //判断'abc'，不是数值数据，成立返回true

1.4. 定时器方法：

指定毫秒后，执行的定时器

window.setTimeout()

每隔指定的毫秒后，执行的定时器

window.setInterval()

1.5. 常用属性

location属性：

location是window对象的属性，该属性用于设置网页的地址栏

location.href属性 表示跳转，当前浏览器的地址栏发生了跳转

其实超链接标签的内部就是对location.href属性的封装

window.location.href = 'http://baidu.com'

location.reload()方法 表示刷新当前地址栏（刷新当前窗口）

window.location.reload()

history属性：

history是window对象的属性，该属性用于设置网页的浏览历史记录

forward()前进

window.history.forward()

back()后退

window.history.back()

go()方法，既可以实现前进，也可以实现后退

window.history.go(1) //前进一次

window.history.go(3) //前进三次

window.history.go(-1) //后退一次

window.history.go(-3) //后退三次

2. DOM

DOM 文档对象模型，就是当前网页里面的所有内容。

因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分

BOM 就是 window对象 DOM 就是 document对象

使用DOM获取网页元素：

如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。

比如：head,title,body

document.body.style.border = "1px solid #ccc"

document.title = 'helloworld'

更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了。

getElementById()方法，根据元素的id属性值来获取指定的元素。

注意：如果网页中id属性值重复，只获取第一个。

getElementsByTagName()方法，根据元素的标签名获取所有该元素。

getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素。

getElementsByName()方法，根据元素的name属性值获取所有该元素。

简单的封装一下：

<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">function $(id){
return document.getElementById(id)
}
</pre>

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素。

querySelectorAll()方法，根据选择器的名称返回所有的元素。

注意：querySelectorAll()方法，返回的是集合对象，不是数组对象。可以利用展开运算符，将集合对象转为数组对象。

转为数组对象后，就可以使用数组相关的方法了。

let divs2 = [...divs]

querySelector()和querySelectorAll()方法里面也可以写所有的css选择器。

3. 操作DOM元素的内容和样式

操作DOM的样式，有多种方式：

1. 通过style属性直接设置

2. 通过className属性设置类选择器

3. 也可以通过classList属性添加多个类选择器

操作DOM的内容：

1. innerText属性，用于获取 和 操作 DOM的文本内容。
2. innerHTML属性，用于获取 和 操作 DOM的HTML内容。

4. 操作DOM元素的属性

获取和设置标签自带的属性(原生属性)，直接点

let src = img.src //src是图片标签的原生属性

获取和设置标签自定义的属性，需要通过getAttribute()和setAttribute()方法

setAttribute()方法，设置元素的属性值，需要传两个参数（属性名和属性值）

getAttribute()方法，获取元素的属性值，只需要传一个参数（属性名）

5. 创建和删除DOM元素

createElement()方法，用于创建DOM元素

appendChild()方法，用于在当前DOM元素中添加子元素

删除元素有两种写法：

1. 自删 remove()方法，是元素删除自己

2. 通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素

补充1：onclick是点击事件，on表示当，click表示点击

补充2：parentElement和parentNode属性，返回父级元素

二、鼠标事件

1. 鼠标事件

// 点击事件

onclick

// 双击事件

ondblclick

// 鼠标右键点击事件

oncontextmenu

// 鼠标进入事件

// onmouseover 比 onmouseenter 先执行

onmouseenter

onmouseover

// 鼠标离开事件

// onmouseout 比 onmouseleave 先执行

onmouseleave

onmouseout

注意：如果元素里面存在子元素，鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout

// 鼠标移动事件

onmousemove

// 鼠标按下事件

onmousedown

// 鼠标弹起事件

onmouseup

2. 视口宽高

window.innerWidth 返回视口宽度

window.innerHeight 返回视口高度

3. 案例

1. 购物车
2. 复选框全选（checked属性，返回复选框的状态）
3. 购物车+复选框全选
4. 点击div消失

三、焦点事件&阻止默认行为

1. 焦点事件

获得焦点事件

onfocus

失去焦点事件

onblur

2. 阻止默认行为

e.preventDefault()

比如：阻止超链接跳转，阻止右键点击事件

3. 案例

1. 拖动框效果

   dom.offsetLeft 获取元素的默认左边距

   dom.offsetTop 获取元素的默认上边距

   window.innerWidth 视口宽度

   window.innerHeight 视口高度

   dom.offsetWidth 获取元素可见宽度(width+border+padding)

   dom.offsetHeight 获取元素可见高度(height+border+padding)

   e.pageX 鼠标指针到X轴坐标

   e.pageY 鼠标指针到Y轴坐标

2. 右键菜单

   e.target 获取具体的元素

   e.preventDefault() 阻止默认行为

3. 选项卡

   classList.remove() 移除样式

   classList.add() 添加样式

四、键盘事件

1. 键盘事件

onkeydown 按键按下事件

onkeypress 按键产生字符事件

onkeyup 按键弹起事件

e.keyCode 返回按键码

注意：注册事件时要加on，触发时不需要on

2.案例

1. 打字游戏
2. 贪吃蛇

五、正则表达式

正则表达式：其实就是一种匹配规则，用于检索字符串

定义正则表达式的两种方式：1.直接定义 2.构造函数定义

<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">// 1.直接定义
let reg1 = /abc/
// 2.构造函数定义
let reg2 = new RegExp('abc')
let str = '欢迎学习abc正则表达式'
// test()方法，用于检查一个字符串中，是否有满足匹配规则的字符串。
console.log(reg1.test(str));
// 其实用字符串自己的includes()方法，也能解决上面的问题
console.log(str.includes('abc'));
</pre>

那么正则表达式正则强大的地方是它可以写 通配符(拥有特殊含义的字符)

1. 通配符

\w 表示：字母、数字、下划线

\W 表示：除了字母、数字、下划线以外的字符

\d 表示：数字

\D 表示：非数字

^ 表示：以^符号后面的第一个字符开头

<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><annotation encoding="application/x-tex">表示：以</annotation></semantics></math>表示：以符号前面的第一个字符结尾

{n} 表示：重复n次

{n,m} 表示：重复n到m次

[xyz] 表示：其中任意一个字符

• 表示：重复前一项1次或多次 等价于 {1,}

• 表示：重复前一项0次或多次 等价于 {0,}

? 表示：重复前一项0次或1次 等价于 {0,1}

. 表示：除了换行符以外的任意一个字符

. 表示：.字符 ^ 表示：^ <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><annotation encoding="application/x-tex">表示：</annotation></semantics></math>表示：

可以用()将多个字符作为一个整体

\w 等价于 [0-9a-zA-Z_]

| 表示：或者

[\u4E00-\u9FA5] 是常用汉字的unicode编码范围

2. 使用正则表达式验证表单

验证学生的信息

3. 正则表达式配合字符串的方法

1. replace()方法

   默认情况下，replace()方法，只会替换字符串中匹配的第一段内容

   使用正则表达式，添加全局匹配修饰符g，可以替换匹配全部内容

   使用正则表达式，添加忽略大小写修饰符i，在匹配内容时会忽略大小写

2. search()方法

   可以通过正则表达式查找位置

六、事件其他

1. 阻止事件冒泡

默认情况下，触发子元素的事件时，会同时触发父元素相同的事件，这就叫做事件冒泡

e.stopPropagation() 阻止事件冒泡

e.preventDefault() 取消默认行为

2. 添加事件的几种方式

1. 在元素中通过onXXX定义事件，指定一个事件方法
2. 先获取元素，再给元素绑定事件
3. 通过addEventListener方法，给元素注册事件，传递两个参数：事件名和事件方法
4. 通过removeEventListener方法，移除指定的事件方法，传递两个参数：事件名和事件方法

3. 页面的加载事件

1. window.onload页面加载事件

页面的加载事件，该事件会在页面中的所有内容都加载完毕后执行

注意：所有内容包括：标签结构，样式文件，图片文件，音频文件，视频文件...

如果网页内容过大，会导致该事件延迟执行

<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">window.onload = function(){
alert('页面加载完成！')
}
</pre>

2. DOMContentLoaded页面加载事件

只要页面中的DOM结构加载完毕后，就会立即执行

注意：该事件只能采用事件监听的方式添加，没有提供快捷方式

<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">window.addEventListener('DOMContentLoaded',function(){
alert('页面结构加载完毕！')
})
</pre>

七、AJAX & JSON

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX技术 不需要刷新页面的情况下，就可以产生局部刷新的效果

最初AJAX技术操作的是XML标签，现在绝大多数情况下操作的是JSON格式的字符串

1. json格式数据

<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">// json对象
// 注意：对象的属性名，必须要双引号引起来
let obj = {
"name": "张三",
"age": 20,
"gender": "男"
}
// json数组
let arr = [
{
"name": "张三",
"age": 20,
"gender": "男"
},
{
"name": "李四",
"age": 22,
"gender": "女"
}
]
</pre>

2. AJAX对象

<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">// 01.创建xhr对象 (原生ajax对象)
let xhr = new XMLHttpRequest()
// 02.初始化请求（GET请求，POST请求）
// 第一个参数是请求方式：比如GET，第二个参数是请求地址：比如192.168.11.12:81/Server/List
xhr.open('GET','./data/koubei.json')
// 03.发送请求
xhr.send()
// 04.监听读取状态改变事件
xhr.onreadystatechange = function(){
// 请求已经完成
if(xhr.readyState===4){
// 请求状态为成功
if(xhr.status === 200){
// xhr.responseText 返回响应体，它是一个json格式的字符串
// 我们需要将该字符串转为js对象
let data = JSON.parse(xhr.responseText)
}
}
}
</pre>

readyState 是读取状态：

0: 请求未发送

1：服务器连接已建立（请求已经发送）

2：请求已接收（服务器已经接收到该请求）

3：请求处理中（服务器正则准备你要的数据）

4：请求已完成，且响应已就绪

status 是响应的状态码：

200：成功

404：请求资源错误

500：服务器端错误

3. 开始搭建学生管理系统

1. 登录页

   GET请求方式的参数，直接拼接在url里面

   ?后面的内容是请求参数，就好比是在调用一个带参数的方法一样，需要传参数

   多个参数用&符号隔开

   登录成功后，跳转到首页：location.href = './index.html'

2. 首页

   使用<iframe>嵌入外部页面

   查询全部学生信息

八、学生管理系统

1. 查询学生信息+筛选+分页

封装一个通用方法：function loadData(studentName,sex,pageIndex,pageSize)

2. 添加学生

将对象里面的数据，转为json字符串

JSON.stringify(对象)

将对象里面的数据，转为url字符串，写一个方法进行转换

studentNo=12345&loginPwd=123123&studentName=周杰伦

设置请求头：

1. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
2. xhr.setRequestHeader('Content-Type','application/json')

3.修改学生

1. 先根据学号查询指定学生
2. 再修改该学生信息

4.删除学生

1. 删除前提示用户是否确定删除