环境对象：
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
作用：弄清楚this的指向，可以让我们代码更简洁。
函数的调用方式不同，this 指代的对象也不同
直接调用函数，其实相当于是 window.函数，所以 this 指代 window
【谁调用， this 就是谁】 是判断 this 指向的粗略规则
编程思想：（排他思想）
当前元素为A状态,其他元素为B状态
使用：
- 干掉所有人
使用for循环
- 复活他自己
通过this或者下标找到自己或者对应的元素
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
display: flex;
width: 500px;
height: 200px;
margin: 200px auto;
border: 2px solid pink;
}
li {
display: flex;
flex: 1;
font-size: 30px;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<ul>
<li>冠希哥</li>
<li>我</li>
<li>彭于晏</li>
</ul>
<script>
// 先获取到每一个li标签
// 再li标签绑定点击事件
// 写处理其他所有的元素 让让他们的背景颜色都变成白色
// 事件触发 设置 被点击的li标签 选中的样式
// let liList = document.querySelectorAll('li');
// for (let index = 0; index < liList.length; index++) {
// liList[index].addEventListener('click', function () {
// // 给被点击的li标签加上选中样式
// // liList[index].style.backgroundColor = 'red';
// // 先设置每一个li标签的背景颜色 成 白色
// for (let j = 0; j < liList.length; j++) {
// liList[j].style.backgroundColor = '#fff';
// }
// // 再单独设置 被点击的li标签 变成红色
// this.style.backgroundColor = 'red';
// });
// }
let li = document.querySelectorAll('li');
for (let index = 0; index < li.length; index++) {
// 设置所有的li标签 背景颜色为白色
li[index].addEventListener('click',function () {
srtAllLiColor();
// 设置被点击的li标签 为红色
this.style.backgroundColor = 'red';
function srtAllLiColor() {
for (let i = 0; i < li.length; i++) {
li[i].style.backgroundColor = '#fff'
}
}
})
}
</script>
</body>
</html>
节点：
DOM节点：DOM树里每一个内容都称之为节点
节点类型：元素节点；属性节点；文本节点
元素节点：所有标签：body、div、head、a 等等【html是根节点】
属性节点：所有的属性：href、class、id等等
文本节点：所有的文本
节点关系：父节点、子节点、兄弟节点
父节点查找: parentNode 属性；返回最近一级的父节点 找不到返回为null
子元素.parentNode
关闭二维码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>09-二维码-点击关闭.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
1
<img class="close-btn" src="./images/2.png" alt="" />
<img src="./images/1.png" alt="" />
</div>
<div>
2
<img class="close-btn" src="./images/2.png" alt="" />
<img src="./images/1.png" alt="" />
</div>
<div>
3
<img class="close-btn" src="./images/2.png" alt="" />
<img src="./images/1.png" alt="" />
</div>
<div>
4
<img class="close-btn" src="./images/2.png" alt="" />
<img src="./images/1.png" alt="" />
</div>
<script>
/*
1 先处理好静态结构
2 先获取到关闭按钮 数组
3 遍历数组 给关闭按钮 绑定 点击事件
4 事件触发了
通过 this 获取到 对应的父元素 隐藏
*/
let closeBtns = document.querySelectorAll('.close-btn');
// 遍历
for (let index = 0; index < closeBtns.length; index++) {
closeBtns[index].addEventListener('click', function () {
// this 获取到 对应的父元素 隐藏
// this.parentNode.style.display = 'none';
// 如果你们写代码的时候也想我一样 没有代码提示
// 如 像老师一样 手敲每一个字母
// 真记不住
// document.parentNode
// document.body.style.display="none";
// document.parentNode
// document.body.style.display="none";
this.parentNode.style.display = 'none';
});
}
</script>
</body>
</html>
子节点查找：
childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
children（重点）:仅获得所有元素节点；返回的还是一个伪数组
父元素.children
兄弟关系查找：
上一个兄弟节点：previousElementSibling 属性
下一个兄弟节点 ：nextElementSibling 属性
（创建节点）增加节点：
很多情况下，我们需要在页面中增加元素，比如，点击发布按钮，可以新增一条信息。
一般情况下，我们新增节点，按照如下操作：
创建一个新的节点，把创建的新的节点放入到指定的元素内部。
1.创建节点：即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点。
创建方法：document.createElement('标签名')
2.追加节点：要想在界面看到，还得插入到某个父元素中。（这里有两种插入方法）
插入到父元素中某个子元素的前面：
父元素.insertBefore ( 要插入的元素，在那个元素前面 )
插入到父元素的最后一个子元素:
父元素.appendChild ( 要插入的元素 )
克隆节点：
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
若为false，则代表克隆时不包含后代节点--浅拷贝
默认为false
删除节点 ：
若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法：父元素.removeChild ( 要删除的元素 )
注：如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
小案例：剪切移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>14-剪切-移动.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
width: 300px;
}
.left {
background-color: yellow;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="left">
<li>冠希</li>
<li>彦祖</li>
<li>我</li>
<li>胡歌</li>
<li>周星驰</li>
</ul>
<ul class="right"></ul>
<script>
let li = document.querySelectorAll('li');
let rightUl = document.querySelector('.right');
for (let index = 0; index < li.length; index++) {
li[index].addEventListener('click',function() {
rightUl.appendChild(this);
})
}
</script>
</body>
</html>
案例：【Tab栏切换 等等...】别多想什么！案例敲，不懂就问
努力才可能会有回报！不努力？拜托！是真的没有！！
