一三四、JavaScript——_DOM简介
MDNq前端参考文档：DOM 概述 - Web API 接口参考 | MDN (mozilla.org)
一三五、JavaScript——HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点我一下</button>
<script>
/*
要使用DOM来操作网页，我们需要浏览器至少先给我一个对象
才能去完成各种操作
所以浏览器已经为我们提供了一个document对象，它是一个全局变量可以直接使用
document代表的是整个网页
*/
// 打印document 和在控制台中访问document.window效果是一样的
console.log(document)
// 获取btn对象,获取id为"btn"的元素
const btn = document.getElementById("btn")
//console.log(btn)
// 修改btn中的文字,通过innerText修改即可
btn.innerText = "Click ME"
</script>
</body>
</html>// 打印document 和在控制台中访问document.window效果是一样的
console.log(document)
// 获取btn对象,获取id为"btn"的元素
const btn = document.getElementById("btn")
//console.log(btn)
// 修改btn中的文字,通过innerText修改即可
btn.innerText = "Click ME"
一三六、JavaScript——文件节点
document的整个原型链：
MDN前端参考文档关于Document的部分：https://developer.mozilla.org/zh-CN/docs/Web/API/Document
document对象
- document对象表示的是整个网页
- document对象的原型链
本身 -> 父类 -> 父类的父类 -> 父类的父类的父类 -> 父类的父类的父类 ->父类的父类的父类的父类
HTMLDocument -> Document -> Node -> EnventTarget -> Object.prototype ->null
- 凡是在原型链上存在的对象的属性和方法都可以通过Document去调用
- 部分属性：
document.documentElement -- > html根元素
document.head -- > head元素
document.title -- > title元素
document.link -- > 获取页面中所有的超链接
...
一三七、JavaScript——获取元素节点
// 获取body标签以及body标签内的内容
console.log(document.body) 
<button id="btn">点我一下</button>
<script>
// 通过id获取按钮
const btn = document.getElementById("btn")
console.log(btn)
</script> 
元素节点对象(element)
- 在网页中，每一个标签都是一个元素节点
- 如何获取元素节点对象
1. 通过document对象来获取元素节点
2. 通过document创建元素节点
- 通过document获取已有的元素节点对象
document.getElementById()
- 根据id获取一个元素节点对象(只能获取一个，因为id是不能重复的)
document.getElementsByClassName()
- 根据元素的class属性获取一组元素节点对象
document.getElementsByClassName()
- 根据元素的class属性值获取一组元素节点对象
- 返回的是一个类数组对象
- 该方法返回的结果是一个实时更新的集合
当网页中新添加元素时，集合也会实时的刷新
document.getElementsByTagName()
- 根据标签名获取元素节点对象
- 返回的结果是实时更新的集合
- document.getElementsByTagName("*")： 获取页面中的所有元素
document.querySelectorAll()
- 根据选择器去页面中查询元素
- 会返回一个数组(不会实时更新)
document.querySelector()
- 根据选择器去页面中查询第一个符合条件的元素
<body>
<button id="btn">点我一下</button>
<span class="s1">我是pan</span>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<form>
<input type="text" name="username">
<input type="radio" name="gender" value="男">
<input type="radio" name="gender" value="女">
</form>
<script>
/*
元素节点对象(element)
- 在网页中，每一个标签都是一个元素节点
- 如何获取元素节点对象
1. 通过document对象来获取元素节点
2. 通过document创建元素节点
- 通过document获取已有的元素节点对象
document.getElementById()
- 根据id获取一个元素节点对象(只能获取一个，因为id是不能重复的)
document.getElementsByClassName()
- 根据元素的class属性获取一组元素节点对象
document.getElementsByClassName()
- 根据元素的class属性值获取一组元素节点对象
- 返回的是一个类数组对象
- 该方法返回的结果是一个实时更新的集合
当网页中新添加元素时，集合也会实时的刷新
document.getElementsByTagName()
- 根据标签名获取元素节点对象
- 返回的结果是实时更新的集合
- document.getElementsByTagName("*")： 获取页面中的所有元素
document.querySelectorAll()
- 根据选择器去页面中查询元素
- 会返回一个数组(不会实时更新)
document.querySelector()
- 根据选择器去页面中查询第一个符合条件的元素
*/
// 获取body标签以及body标签内的内容
console.log(document.body)
// 通过id获取按钮
const btn = document.getElementById("btn")
console.log(btn)
// 通过Class的id的name获取span的内容
const spans = document.getElementsByClassName("s1")
// 遍历span标签的内容
for(let i=0; i<spans.length; i++){
//将内容都改为“哈哈哈”
spans[i].innerText = "哈哈哈"+ i
}
console.log(spans)
// 根据标签名div获取元素节点对象
const divs = document.getElementsByTagName("div")
// 获取页面中的所有元素
const tagName = document.getElementsByTagName("*")
console.log(tagName)
// 针对form表单中的input
const genderInput = document.getElementsByName("gender")
console.log(genderInput)
// 获取所有标签元素为div的
const divs2 = document.querySelectorAll("div")
// 打印的是一个集合 NodeList(5) [div, div, div, div, div]
console.log(divs2)
// 获取标签元素为div的，取单个的，一般情况就取第一个
const divs3 = document.querySelector("div")
// 在控制台直接打印div,点击显示的是第一个div标签
</script>
</body>一三八、JavaScript——元素的属性和方法
通过元素节点对象获取其他的节点的方法
element.childNodes 获取当前元素的子节点(会包含空白的节点)
子节点包括：文本节点、标签节点等，
标签节点后还有空白节点，所以算两个节点，而文本节点后的空白节点是被文本节点一起包含的
element.children 获取当前元素的子元素
element.firstElementChild 获取当前元素第一个子元素
element.lastElementChild 获取当前元素第一个子元素
element.nextElementSibling 获取当前元素的下一个兄弟元素
element.previousElementSibling 获取当前元素的前一个兄弟元素
element.parentNode 获取当前元素的父节点
element.tagName 获取当前元素的标签名
<body>
<div id="box1">
我是box1
<span class="s1">我是s1</span>
<span class="s1">我是s1</span>
</div>
<span class="s1">我是s1</span>
<script>
/*
div元素的原型链
HTMLDivElement -> HTMLElement -> Elemnet -> Node -> ---
通过元素节点对象获取其他的节点的方法
element.childNodes 获取当前元素的子节点(会包含空白的节点)
子节点包括：文本节点、标签节点等，
标签节点后还有空白节点，所以算两个节点，而文本节点后的空白节点是被文本节点一起包含的
element.children 获取当前元素的子元素
element.firstElementChild 获取当前元素第一个子元素
element.lastElementChild 获取当前元素第一个子元素
element.nextElementSibling 获取当前元素的下一个兄弟元素
element.previousElementSibling 获取当前元素的前一个兄弟元素
element.parentNode 获取当前元素的父节点
element.tagName 获取当前元素的标签名
*/
// 获取id为box1的标签。通过documnet去调，则是通过整个网页范围内查找
const box1 = document.getElementById("box1")
//
console.log(box1)
// 通过box1去调，调用的范围只在box1的标签名内查找
const spans = box1.getElementsByTagName("span")
// 打印结果为2,name为box1的标签内的span标签数量为2
console.log(spans)
// 标签节点后还有空白节点，所以算两个节点，而文本节点后的空白节点是被文本节点一起包含的。算一个
const cns = box1.childNodes
// 结果为5，说明节点数为5
// 文本节点一个 标签节点两个 标签节点后的空白节点两个 共5个
console.log(cns)
</script>
</body>一三九、JavaScript——文本节点
<body>
<img src="" alt="">
<!-- "我是div"在这里就是一个文本节点 -->
<div id="box1">
<span>我是box1</span>
</div>
<script>
/*
在DOM中，网页中的所有文本内容都是文本对象
可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做
我们可以直接通过元素去修改其中的文本
修改文本的三个属性
element.textContent 获取或修改元素中的文本内容
- 获取的是标签中的内容，不会考虑css样式
- 不考虑样式就是本来的文本是大写，但通过textContent拿到的就是小写
element.innerText 获取或修改元素中的文本内容
- innerText获取内容时，会考虑css样式
- 考虑样式就是本来的文本是大写，但通过innerText拿到的就是大写，保留原有样式
- 当字符串中有标签时，会自动对标签进行转义，并不是真正的字符
element.innerHTML 获取或修改HTML中的代码
- 可以直接向元素中添加HTML代码
- innerHTML插入内容时，有被xss注入的风险
*/
// 先通过id获取到标签的内容
const box1 = document.getElementById("box1")
// 通过element.textContent修改文本内容
// box1.textContent = "新的内容"
</script>
</body>一四零、JavaScript——属性节点
属性节点(Attr)
- 在DOM中也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作
- 如何操作属性节点：
方式一：
读取：元素.属性名(注意：class属性需要用className来读取)
读取一个布尔值时，会返回true或false
修改： 元素.属性名 = 属性值
方式二：
读取：元素.getAttribute(属性名)
修改：元素.setAttribute(属性名，属性值)
删除：元素.removeAttribute(属性名)
<body>
<input type="text" name="username" value="admin">
<script>
/*
属性节点(Attr)
- 在DOM中也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作
- 如何操作属性节点：
方式一：
读取：元素.属性名(注意：class属性需要用className来读取)
读取一个布尔值时，会返回true或false
修改： 元素.属性名 = 属性值
方式二：
读取：元素.getAttribute(属性名)
修改：元素.setAttribute(属性名，属性值)
删除：元素.removeAttribute(属性名)
*/
// getElementsByName 因为获取的是Elements，要想获取一个需要加一个索引[0]
const input = document.getElementsByName("username")[0]
// 打印内容为：<input type="text" name="username" value="admin">
console.log(input)
const input1 = document.querySelector("[name=username]")
console.log(input)
// 修改：元素.setAttribute(属性名，属性值)
input.setAttribute("value","孙悟空")
</script>
</body>一四一、JavaScript——事件
事件(event)
- 事件就是用户和页面之间发生的交互行为
比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开键盘...
- 可以通过为事件绑定响应函数(回调函数)，来完成用户之间的交互
- 绑定响应函数的方式
1. 可以直接在元素的属性中设置
2. 可以通过为元素的指定属性设置回调函数的形式来绑定事件
3. 可以通过元素addEventListener()方法来绑定事件
<body>
<!-- ondblclick指双击按钮跳出弹框 -->
<!-- <button id="btn" ondblclick="alert('你点我干嘛')">点我一下</button> -->
<button id="btn">点我一下</button>
<script>
/*
事件(event)
- 事件就是用户和页面之间发生的交互行为
比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开键盘...
- 可以通过为事件绑定响应函数(回调函数)，来完成用户之间的交互
- 绑定响应函数的方式
1. 可以直接在元素的属性中设置
2. 可以通过为元素的指定属性设置回调函数的形式来绑定事件
3. 可以通过元素addEventListener()方法来绑定事件
*/
// 1.获取到按钮对象
const btn = document.getElementById("btn")
// 2.为按钮对象的事件属性设置响应函数,即点击了就会响应
btn.onclick = function(){
alert("点击按钮后调用的函数")
}
// 设置了新的绑定之后，新的绑定会将旧的绑定覆盖
btn.onclick = function(){
alert("设置新的绑定")
}
// 3. 通过元素addEventListener()方法来绑定事件
btn.assEventListener("click", function(){
alert("哈哈哈")
})
// 不会被覆盖，按顺序依次出现
btn.assEventListener("click", function(){
alert("嘻嘻嘻")
})
</script>
</body>一四二、JavaScript——文档的加载
- 网页是自上而下加载的，如果将js代码编写到网页的上边（button按钮的上面
- js代码在执行时候，网页还没有加载完毕，这时候会出现无法获取到DOM对象的情况
window.onload 事件会在窗口中的内容加载完毕之后才触发
- 会等待所有文档都加载完成才会触发
document对象的DOMContentLoaded事件会在窗口中的内容加载完成之后才会触发
- 当前文档加载完成就触发
如何解决这个问题：
1. 将script标签写到body标签的最后的位置
2. 将代码编写到window.onload的回调函数中，因为window.onload的回调函数是最后执行的，所以此时script可以放在任意位置，只要放在里面就可以最后执行
3. 将代码编写到document对象的DOMContentLoaded的回调函数中(执行的时机早)
4. 将代码编写到外部的js文件中，然后以defer的形式引入(执行的时机更早，早于DOMContentLoaded)
开发过程中常用1，引外部文件时常用4
<body>
<button id="btn">点我一下</button>
<script>
/*
网页是自上而下加载的，如果将js代码编写到网页的上边（button按钮的上面）
js代码在执行时候，网页还没有加载完毕，这时候会出现无法获取到DOM对象的情况
window.onload 事件会在窗口中的内容加载完毕之后才触发
- 会等待所有文档都加载完成才会触发
document对象的DOMContentLoaded事件会在窗口中的内容加载完成之后才会触发
- 当前文档加载完成就触发
如何解决这个问题：
1. 将script标签写到body标签的最后的位置
2. 将代码编写到window.onload的回调函数中，因为window.onload的回调函数是最后执行的，所以此时script可以放在任意位置，只要放在里面就可以最后执行
3. 将代码编写到document对象的DOMContentLoaded的回调函数中(执行的时机早)
4. 将代码编写到外部的js文件中，然后以defer的形式引入(执行的时机更早，早于DOMContentLoaded)
开发过程中常用1，引外部文件时常用4
*/
// 可以放在任意位置，因为window.onload的回调函数总在最后执行
// window.onload() = function(){
// const btn = document.getElementById("btn")
// console.log(btn)
// }
// document对象的DOMContentLoaded的回调函数，只能通过 document.addEventListener调用
document.addEventListener("load", function (){
const btn = document.getElementById("btn")
console.log(btn)
})
const btn = document.getElementById("btn")
console.log(btn)
</script>
<!-- 代码编写到外部的js文件中，然后以defer的形式引入 -->
<!-- <script defer src="链接"></script> -->一四六、JavaScript——元素的修改
appendChild() 用于给节点添加一个子节点
insertAdjacentElement(添加的位置,要添加的元素) 可以向元素任意位置添加元素i
添加的位置：
beforeend:标签的最后
afterbegin:标签的开始
beforebeing:与标签处于同级，在标签的前边插入元素(兄弟元素)
afterend:与标签处于同级，在标签的后边插入元素(兄弟元素)
insertAdjacentHTML("插入的位置"， "插入的标签")
replaceWith("参与替换掉的元素")
remove() 方法来删除元素
<body>
<button id="btn01">按钮01</button>
<button id="btn02">按钮02</button>
<hr>
<ul id="list">
<li id="swk">孙悟空</li>
<li id="zbj">猪八戒</li>
<li id="shs">沙和尚</li>
</ul>
<script>
/*
点击按钮后，向ul中添加一个唐僧
*/
// 获取ul
const list = document.getElementById("list")
// 获取按钮
const btn01 = document.getElementById("btn01")
const btn02 = document.getElementById("btn02")
btn01.onclick = function() {
// 创建一个li
const li = document.createElement("li")
// 向li中添加文本
li.textContent = "唐僧"
// 给li添加id属性
li.id = "ts"
// // appendChild() 用于给节点添加一个子节点
// list.appendChild(li)
// console.log(list)
// insertAdjacentElement(添加的位置,要添加的元素)可以向元素任意位置添加元素i
// 两个参数：1.添加的位置 2.要添加的元素
/*
添加的位置：
beforeend:标签的最后
afterbegin:标签的开始
beforebeing:与标签处于同级，在标签的前边插入元素(兄弟元素)
afterend:与标签处于同级，在标签的后边插入元素(兄弟元素)
*/
list.insertAdjacentElement("afterbegin",li)
// insertAdjacentHTML("插入的位置"， "插入的标签")
list.insertAdjacentHTML("", "<li id='bgj'>白骨精</li>")
}
btn02.onclick = function() {
// 创建一个蜘蛛精替换孙悟空
const li = document.createElement("li")
li.textContent = "蜘蛛精"
li.id = "zzj"
// 获取孙悟空
const swk = document.getElementById("swk")
// replaceWith() 使用一个元素替换当前元素
// replaceWith("参与替换掉的元素")
swk.replaceWith(li)
// remove() 方法来删除元素
swk.remove()
}
</script>
</body>一五零、JavaScript——节点的复制
涉及的方法
添加：list.appendChild(l1)
将l1添加到list中
复制：const newL1 = li.cloneNode(true)
复制l1和l1下的子节点，l1标签里的文本节点就属于l1的子节点
<body>
<button id="btn01">点我一下</button>
<ul id="list1">
<li id="l1">孙悟空</li>
<li id="l2">猪八戒</li>
<li id="l3">孙悟空</li>
</ul>
<ul id="list2">
<li >蜘蛛精</li>
</ul>
<script>
/*
涉及的方法
添加：list.appendChild(l1)
将l1添加到list中
复制：const newL1 = li.cloneNode(true)
复制l1和l1下的子节点，l1标签里的文本节点就属于l1的子节点
*/
/*
点击按钮后，将id为l1的元素添加到list2中
*/
// 先获取按钮
const btn01 = document.getElementById("btn01")
const list2 = document.getElementById("list2")
const l1 = document.getElementById("l1")
// 点击按钮触发的函数
btn01.onclick = function() {
/*
使用 cloneNode()方法对节点进行复制时，它会复制节点的所有特点包括各种属性
这个方法只会默认复制当前节点，即只复制标签节点，不会复制文本节点，
可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制
*/
const newL1 = li.cloneNode(true) // 用来对节点进行复制
// 防止id完全重复，重新赋值一个id即可
newL1.id = "newL1"
// 利用appendChild,点击按钮后,将l1添加到list2中去
list2.appendChild(l1)
}
</script>
</body>一五一、JavaScript——修改css样式
在stylE标签中，
在样式的结尾在结尾加 !important
表示优先级最高，最先执行
background-color: #4ead56 !important;
修改样式的方式： 元素.style.样式名 = 样式值
如果样式名中含有"-"，例如"background-color"则需要将样式表修改为驼峰命名法"backgroundColor"
"background-color" -> "backgroundColor"
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #4ead56 !important;
/*
在stylE标签中，
在样式的结尾在结尾加 !important
表示优先级最高，最先执行
background-color: #4ead56 !important;
*/
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr />
<div class="box1"></div>
<script>
/*
点击按钮后，修改box1的宽度
*/
const btn = document.getElementById("btn")
// querySelector方法：选中页面中出现的第一个标签
const box1 = document.querySelector(".box1")
// 点击按钮触发的函数
btn.onclick = function() {
// 修改.box1的样式
// 修改样式的方式： 元素.style.样式名 = 样式值
box1.style.width = "600px"
box1.style.height = "600px"
// 如果样式名中含有"-"，例如"background-color"则需要将样式表修改为驼峰命名法"backgroundColor"
// "background-color" -> "backgroundColor"
box1.style.backgroundColor = "yellow";
}
</script>
</body>一五二、JavaScript——读取样式
getComputedStyle()
-它会返回一个对象，这个对象中包含了当前元素的所有生效的样式
- 获取具体的样式数值：对象.width 获取样式的宽度
- 伪元素获取样式信息：getComputedStyle(要获取的样式对象, "要获取的为元素")
宽度以及高度的计算：
- 一般通过: "对象.width" 读取样式宽度时，都是带宽度的
- 通过 parseInt(对象.width)将 200px 中的px消除
- 再通过 + "px" 的方式加上单位
返回值
- 返回的一个对象，对象中存储了当前元素的样式
注意
- 样式对象中返回的样式值，不一定能拿来直接计算，有可能是auto
所以使用时，一定要确保值偶是可以计算的才去计算
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #4ead56 !important;
/*
在stylE标签中，
在样式的结尾在结尾加 !important
表示优先级最高，最先执行
background-color: #4ead56 !important;
*/
}
/*
伪元素
*/
.box1::before {
content: "hello";
color:red;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr />
<div class="box1"></div>
<script>
/*
点击按钮后，读取css的样式
*/
const btn = document.getElementById("btn")
// querySelector方法：选中页面中出现的第一个标签
const box1 = document.querySelector(".box1")
// 点击按钮触发的函数
btn.onclick = function() {
// 不会用这种方式来读取样式
// console.log(box1.style.width)
/*
getComputedStyle()
-它会返回一个对象，这个对象中包含了当前元素的所有生效的样式
- 获取具体的样式数值：对象.width 获取样式的宽度
- 伪元素获取样式信息：getComputedStyle(要获取的样式对象, "要获取的为元素")
宽度以及高度的计算：
- 一般通过: "对象.width" 读取样式宽度时，都是带宽度的
- 通过 parseInt(对象.width)将 200px 中的px消除
- 再通过 + "px" 的方式加上单位
返回值
- 返回的一个对象，对象中存储了当前元素的样式
注意
- 样式对象中返回的样式值，不一定能拿来直接计算，有可能是auto
所以使用时，一定要确保值偶是可以计算的才去计算
*/
const styleObj = getComputedStyle(box1)
// 获取为元素的样式信息
const beforeObj = getComputedStyle(box1, "before")
// 通过 parseInt(对象.width)将 200px 中的px消除
// 再通过 + "px" 的方式加上单位
parseInt(styleObj.width) + 100 + "px"
// 获取元素的样式
console.log(styleObj.width)
}
</script>
</body>一五三、JavaScript——通过属性读取样式
元素.clientHeight
元素.clientWidth
- 获取元素内部的宽度和高度(包括内容区和内边距，width和padding)
- 返回的结果就是纯数字，不带单位
元素.offsetHeight
元素.offsetWidth
- 获取元素的可见框的大小(包括内容区、内边距和边框)
- 返回的结果就是纯数字，不带单位
元素.scrollHeight
元素.scrollWidth
- 获取元素滚动区域的大小
元素.offsetParent
- 获取元素定位的父元素
- 定位父元素，离当前元素最近的开启了定位的祖先元素
如果所有的元素都没有开启定位则返回body
元素.offsetTop
元素.offsetLeft
- 获取元素相对于起定位父元素的偏移量
<style>
#box1 {
width: 200px;
height: 200px;
padding: 50px;
margin: 50px;
border: 10px red solid;
background-color:aqua;
/* 设置多余的部分溢出， */
overflow: auto;
}
#box2 {
width: 100px;
height: 500px;
background-color:chartreuse;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div id="box1">
<div id="box2"></div>
</div>
<script>
const btn = document.getElementById("btn")
const box1 = document.getElementById("box1")
btn.onclick = function() {
/*
元素.clientHeight
元素.clientWidth
- 获取元素内部的宽度和高度(包括内容区和内边距，width和padding)
- 返回的结果就是纯数字，不带单位
元素.offsetHeight
元素.offsetWidth
- 获取元素的可见框的大小(包括内容区、内边距和边框)
- 返回的结果就是纯数字，不带单位
元素.scrollHeight
元素.scrollWidth
- 获取元素滚动区域的大小
元素.offsetParent
- 获取元素定位的父元素
- 定位父元素，离当前元素最近的开启了定位的祖先元素
如果所有的元素都没有开启定位则返回body
元素.offsetTop
元素.offsetLeft
- 获取元素相对于起定位父元素的偏移量
*/
}
console.log(box1.clientWidth)
</script>
</body> 
一五四、JavaScript——操作class
- 元素.classList.add(class名称，class名称) ：向元素中添加一个或多个class
元素.classList.remove(class名称) ：删除一个或多个class
元素.classList.toggle(class名称) ：切换class
元素.classList.replace(class1, class2) ：1去掉class1,替换成class2
box1.classList.contains("box1")： 判断是否含有某个class
<body>
<button id="btn">点我一下</button>
<hr />
<div class="box1"></div>
<script>
const btn = document.getElementById("btn")
// querySelector取网页中第一次出现的标签
const box1 = document.querySelector(".box1")
btn.onclick = function() {
/*
除了直接修改样式外，也可以通过修改class属性来简介修改样式
被替换的.className += " 具体替换的"
注意具体替换的前有空格
box1.className += " box2"
*/
// box1.className += " box2"
/*
元素.classList.add(class名称，class名称) ：向元素中添加一个或多个class
元素.classList.remove(class名称) ：删除一个或多个class
元素.classList.toggle(class名称) ：切换class
元素.classList.replace(class1, class2) ：1去掉class1,替换成class2
box1.classList.contains("box1")： 判断是否含有某个class
*/
// 元素.classList 是一个对象，对象中提供了对当前元素的类的各种操作方法
box1.classList.add(box2)
box1.classList.remove(box2)
box1.classList.toggle("box2")
// 把1去掉替换成2
box1.classList.replace("box1","box2")
// 检查是否包含
box1.classList.contains("box1")
}
</script>
</body>
一五五、JavaScript——事件对象简介
event 事件
- 事件对象
- 事件对象是由浏览器在事件触发时所创建的对象
这个对象中封装了事件相关的各种信息
- 通过事件对象可以获取到事件的详细信息
比如：鼠标的坐标，键盘的按键
- 浏览器在创建事件对象后，会将事件作为响应函数的参数传递
所以我们可以在事件的回调函数中定义一个形参来接收事件对象
<style>
#box1 {
width: 300px;
height: 300px;
border: 10px greenyellow solid;
}
</style>
</head>
<body>
<div id="box1"></div>
<script>
/*
event 事件
- 事件对象
- 事件对象是由浏览器在事件触发时所创建的对象
这个对象中封装了事件相关的各种信息
- 通过事件对象可以获取到事件的详细信息
比如：鼠标的坐标，键盘的按键
- 浏览器在创建事件对象后，会将事件作为响应函数的参数传递
所以我们可以在事件的回调函数中定义一个形参来接收事件对象
*/
// onmousemove鼠标移动事件
// box1.onmousemove = function() {
// console.log("鼠标移动了")
// }
// 方式1：回调函数传入参数用来记录
// box1.onmousemove = function(event) {
// console.log(event)
// }
// 方式2：匿名函数传入形参命名为event
// box1.onmousemove = event => {
// console.log(event)
// }
const box1 = document.getElementById("box1")
// addEventListener("事件", 函数)
box1.addEventListener("mousemove", event => {
// console.log(event)
// 打印鼠标的坐标
console.log(event.clientX, event.clientY)
// 让鼠标坐标显示在网页中
box1.textContent = event.clientX + "," +event.clientY
})
</script>
</body> 
一五六、JavaScript——event对象
MDN前端参考文档：Event - Web APIs | MDN (mozilla.org)
在DOM中存在着多种不同类型的事件对象
- 多种事件对象有一个共同的祖先 Event
- event.target 触发事件的对象
- event,currentTarget 绑定事件的对象(问this)
- event.stopPropaggation() 停止事件的向上传导
- event.preventDefault() 取消默认行为
- 事件的冒泡(bubble)
- 事件的冒泡就是指事件的向上传导
- 当元素的某个事件被触发后，其祖先元素上的相同元素也会被触发
- 冒泡的存在大大简化了代码的编写，但在一些场景下我们并不希望冒泡存在
<style>
#box1 {
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="box1"></div>
<script>
/*
在DOM中存在着多种不同类型的事件对象
- 多种事件对象有一个共同的祖先 Event
- event.target 触发事件的对象
- event,currentTarget 绑定事件的对象(问this)
- event.stopPropaggation() 停止事件的向上传导
- event.preventDefault() 取消默认行为
- 事件的冒泡(bubble)
- 事件的冒泡就是指事件的向上传导
- 当元素的某个事件被触发后，其祖先元素上的相同元素也会被触发
- 冒泡的存在大大简化了代码的编写，但在一些场景下我们并不希望冒泡存在
*/
// 获取box1
const box1 = document.getElementById("box1")
// addEventListener("事件", "函数")
box1.addEventListener("click", event => {
// alert(event)
// console.log(event)
/*
在事件的响应函数中：
event.target 表示的是触发事件的对象，由谁引发的事件就显示谁
*/
// 打印 <div id="box1"></div>；因为是由于box1触发的
console.log(event.target)
})
</script>
</body>一五七、JavaScript——事件的冒泡
<style>
#box1{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50%;
position: absolute;
}
#box2{
width: 500px;
height: 500px;
background-color: coral;
}
#box3{
width: 200px;
height: 200px;
background-color: aqua;
}
#box4{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div id="box1"></div>
<!-- 创建一个box2 -->
<div id="box2"></div>
<div id="box3" onclick="alert(3)">
<div id="box4" onclick="alert(4)"></div>
</div>
<script>
/*
使小绿球可以跟鼠标一起移动
事件的冒泡和元素的样式无关，只和结构有关
*/
const box1 = document.getElementById("box1")
const box2 = document.getElementById("box2")
// 绑定鼠标移动事件，并传入形参event
// 并且绑定在整个界面上，而不是box1上
document.addEventListener("mousemove", (event) => {
// console.log(111)
// 图标跟随鼠标移动
box1.style.left = event.x + "px"
box1.style.top = event.y + "px"
})
// 取消box2的事件的冒泡
box2.addEventListener("mousemove", (event) => {
// 取消事件的冒泡,这样再box2的区域小球就不会随着鼠标移动
event.stopPropagation()
})
</script>
</body>一五八、JavaScript——事件的委派
<body>
<button id="btn">点我一下</button>
<hr>
<ul id="list">
<li><a href="javascript:;">链接1</a></li>
<li><a href="javascript:;">链接2</a></li>
<li><a href="javascript:;">链接3</a></li>
<li><a href="javascript:;">链接4</a></li>
</ul>
<script>
// 获取所有为ul标签中的a标签
const links = document.querySelectorAll("ul a")
// 获取list标签
const list = document.getElementById("list")
const btn = document.getElementById("btn")
for(let i=0; i<links.length; i++) {
links[i].addEventListener("click", event => {
alert(event.target.textContent)
})
}
// 点击按钮后，在ul中新增一个li
btn.addEventListener("click", () => {
// 通过insertAdjacentHTML("插入的位置", "插入的内容") 直接插入标签
list.insertAdjacentHTML("beforeend", "<li><a href='javascript:;'>新超链接</a></li>")
})
/*
上面虽然实现了点击按钮新增链接的功能，但还经历了遍历和点击添加的，
我一个希望
只绑定一次事件，即可以让所有的超链接，包括当下和未来的超链接都具有这些事情
思路：
可以将事件统一绑定给document,这样点击超链接时由于事件的冒泡
会导致document上的点击事件被触发，这样只绑定依次，所有的超链接都会具有这些事件
委派就是将本该绑定多个元素的的事件，统一绑定给一个共同事件
*/
// 获取list中的所有链接
const linkes = list.getElementsByTagName("a")
// 将点击事件扩大到整个网页，即对象是document
document.addEventListener("click", (event) => {
// 在执行代码前，判断一下事件是由谁来触发
// 检查event.target 是否在 links 中存在
// 但link打印出来是 "HTMLCollection [a,a,a,a]" 我们需要的是数组
// 调用静态方法 Arrary.form(linkes) 后，数组变为[a,a,a,a]
// 或者直接用展开运算符展开[...linkes] 效果是一样的
// 判断如果触发事件在linkes中出现了
if([...links].includes(event.target)) {
// 点击事件触发后显示触发的文本
alert(event.target.textContent)
}
})
</script>
</body>一六零、JavaScript——事件的捕获
事件的传播机制：
- 在DOM中，事件的传播可以分为三个阶段：
1.捕获阶段 (由祖先元素向目标元素进行事件的捕获)(默认情况下，事件不会在捕获阶段触发)
2.目标阶段 (触发事件的对象)
3.冒泡阶段 (由目标元素向祖先元素的进行事件的冒泡)
- 事件的捕获，指事件从外向内的传导
捕获是从外向里捕获
冒泡是由里向外捕获
当我们当前元素的触发事件以后，会先从当前元素的最大祖先元素开始事件的捕获
- 如果希望在捕获阶段触发事件，可以将addEventListener的第三个参数设置为true
一般情况下我们不希望事件在捕获阶段触发,所以通常不需要设置addEventListener第三个参数为true
eventPhase 表示事件触发的阶段，结果是数字
1 表示捕获阶段 2 表示目标阶段 3 表示冒泡阶段
<style>
#box1 {
width: 300px;
height: 300px;
background-color: aquamarine;
}
#box2 {
width: 200px;
height: 200px;
background-color:crimson
}
#box3 {
width: 100px;
height: 100px;
background-color:darkblue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
<script>
/*
事件的传播机制：
- 在DOM中，事件的传播可以分为三个阶段：
1.捕获阶段 (由祖先元素向目标元素进行事件的捕获)(默认情况下，事件不会在捕获阶段触发)
2.目标阶段 (触发事件的对象)
3.冒泡阶段 (由目标元素向祖先元素的进行事件的冒泡)
- 事件的捕获，指事件从外向内的传导
捕获是从外向里捕获
冒泡是由里向外捕获
当我们当前元素的触发事件以后，会先从当前元素的最大祖先元素开始事件的捕获
- 如果希望在捕获阶段触发事件，可以将addEventListener的第三个参数设置为true
一般情况下我们不希望事件在捕获阶段触发,所以通常不需要设置addEventListener第三个参数为true
eventPhase 表示事件触发的阶段，结果是数字
1 表示捕获阶段 2 表示目标阶段 3 表示冒泡阶段
*/
const box1 = document.getElementById("box1")
const box2 = document.getElementById("box2")
const box3 = document.getElementById("box3")
box1.addEventListener("click", event => {
alert(event.eventPhase) //eventPhase 表示事件触发的阶段
},true)
box2.addEventListener("click", event => {
alert(2)
})
box3.addEventListener("click", event => {
alert(3)
})
</script>
</body>一六一、JavaScript——BOM简介
BOM
- 浏览器对象模型
- BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作
- BOM对象
- Window —— 代表浏览器窗口(全局对象)
- Navigator —— 浏览器的对象(可以用来识别浏览器)
- Location —— 浏览器的地址栏信息
- History —— 浏览器的历史记录(控制浏览器前进后退)
- Screen —— 屏幕的信息
- BOM对象是作为window对象的属性保存的，所以可以直接在JS中访问这些对象
一六二、JavaScript——Navigator
- BOM对象
- MDN前端参考文档：https://developer.mozilla.org/en-US/docs/Web/API/Navigator
- Navigator —— 浏览器的对象(可以用来识别浏览器)
userAgent 返回一个用来描述浏览器信息的字符串
<body>
<script>
/*
- BOM对象
- MDN前端参考文档：https://developer.mozilla.org/en-US/docs/Web/API/Navigator
- Navigator —— 浏览器的对象(可以用来识别浏览器)
userAgent 返回一个用来描述浏览器信息的字符串
*/
// console.log(navigator.userAgent)
function getBrowserName(userAgent) {
// The order matters here, and this may report false positives for unlisted browsers.
if (userAgent.includes("Firefox")) {
// "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
return "Mozilla Firefox";
} else if (userAgent.includes("SamsungBrowser")) {
// "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
return "Samsung Internet";
} else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
return "Opera";
} else if (userAgent.includes("Edge")) {
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
return "Microsoft Edge (Legacy)";
} else if (userAgent.includes("Edg")) {
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
return "Microsoft Edge (Chromium)";
} else if (userAgent.includes("Chrome")) {
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
return "Google Chrome or Chromium";
} else if (userAgent.includes("Safari")) {
// "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
return "Apple Safari";
} else {
return "unknown";
}
}
const browserName = getBrowserName(navigator.userAgent);
console.log(`You are using: ${browserName}`);
</script>
</body>一六三、JavaScript——Location
location表示的是网站的地址栏的信息
- 可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
- location.assign() 跳转到一个新的地址 （可以通过回退按钮回退到原来的地址）
- location.replac() 跳转到一个新的地址 （无法通过回退按钮回退到原来的地址）
- location.reload() 刷新页面,可以传递一个true来强制清缓存刷新
- location.replac() 跳转到一个新的地址 （无法通过回退按钮回退到原来的地址）
- location.href 获取当前地址
一六四、JavaScript——History
MDN前端文档：https://developer.mozilla.org/en-US/docs/Web/API/History
history.back() 浏览器回退
history.forward() 浏览器前进
history.go() 可以向前跳转也可以向后跳转，取决于括号中输入的数字，正数向前，负数向后
<body>
<button id="btn">点我一下</button>
<script>
const btn = document.getElement("btn")
btn.onclick = () => {
/*
history.back() 浏览器回退
istory.forward() 浏览器前进
history.go() 可以向前跳转也可以向后跳转，取决于括号中输入的数字，正数向前，负数向后
*/
// 后退
history.back()
// 前进
history.forward()
//
history.go()
}
</script>
</body>一六五、JavaScript——定时器
通过定时器，可以是代码再指定时间后执行
- 设置定时器打方式有两种：
setTimeout() (只执行一次)
- 参数
1. 回调函数(要执行的代码)
2. 间隔的时间(毫秒)
clearTimeout()
- 关闭定时器
setInterval() (每隔一段时间就会执行依次)
- 参数：
1. 回调函数(要执行的代码)
2. 间隔的时间(毫秒)
clearInterval()
- 关闭定时器
<body>
<h1 id="num"></h1>
<script>
/*
通过定时器，可以是代码再指定时间后执行
- 设置定时器打方式有两种：
setTimeout() (只执行一次)
- 参数
1. 回调函数(要执行的代码)
2. 间隔的时间(毫秒)
clearTimeout()
- 关闭定时器
setInterval() (每隔一段时间就会执行依次)、
- 参数：
1. 回调函数(要执行的代码)
2. 间隔的时间(毫秒)
clearInterval()
- 关闭定时器
*/
const timer = setTimeout(() => {
alert("我是定时器中的代码")
},1000)
// 关闭定时器
clearTimeout(timer)
const numH1 = document.getElementById("num")
let num = 0
// 构建一个定时器，在指定时间不断生成数字并显示在H1标签中
const timeres = setInterval(() => {
num++
numH1.textContent = num
// 判断如果定时器的数字到200，则关闭定时器
if(num === 200) {
clearInterval(timeres)
}
},500)
</script>
</body>一六六、JavaScript——调用栈
时间循环(event loop)
- 函数在每次执行时，都会产生一个执行环境
- 执行环境负责存储函数执行的一切数据
- 问题：函数的执行环境要存储到哪里
- 函数执行环境存储到了一个叫做调用栈的地方
- 栈，是一种数据结构，特点：后进先出
调用栈(call stack)
- 调用栈负责存储函数的执行环境
- 当一个函数被调用时，它的执行环境会作为一个栈帧
插入到调用栈的栈项,函数执行完毕其他栈会自动从栈中弹出
调用栈中放的都是正在执行的函数
<script>
/*
时间循环(event loop)
- 函数在每次执行时，都会产生一个执行环境
- 执行环境负责存储函数执行的一切数据
- 问题：函数的执行环境要存储到哪里
- 函数执行环境存储到了一个叫做调用栈的地方
- 栈，是一种数据结构，特点：后进先出
调用栈(call stack)
- 调用栈负责存储函数的执行环境
- 当一个函数被调用时，它的执行环境会作为一个栈帧
插入到调用栈的栈项,函数执行完毕其他栈会自动从栈中弹出
调用栈中放的都是正在执行的函数
*/
function fn(){
let a = 10;
let b = 20;
}
</script> 
一六七、JavaScript——消息队列
消息队列
- 队列，是一种数据结构， 特点：先进先出
- 当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的
因为调用栈中又可能会存在一些还没有执行完的代码
- 事件触发后，JS引擎是将事件响应函数插入到消息队列中排队
<script>
/*
时间循环(event loop)
- 函数在每次执行时，都会产生一个执行环境
- 执行环境负责存储函数执行的一切数据
- 问题：函数的执行环境要存储到哪里
- 函数执行环境存储到了一个叫做调用栈的地方
- 栈，是一种数据结构，特点：后进先出
调用栈(call stack)
- 调用栈负责存储函数的执行环境
- 当一个函数被调用时，它的执行环境会作为一个栈帧
插入到调用栈的栈项,函数执行完毕其他栈会自动从栈中弹出
调用栈中放的都是正在执行的函数
消息队列
- 队列，是一种数据结构， 特点：先进先出
- 当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的
因为调用栈中又可能会存在一些还没有执行完的代码
- 事件触发后，JS引擎是将事件响应函数插入到消息队列中排队
*/
function fn() {
let a = 10
let b = 20
function fn2() {
console.log("fn2")
}
fn2()
console.log("fn!")
}
fn()
console.log(1111)
const btn = document.getElementById("btn")
btn.onclick = function() {
console.log("按钮被点击了")
}
</script>