一、环境变量
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境 作用：弄清楚this的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同 【谁调用， this 就是谁】 是判断 this 指向的粗略规则 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
演示：
<body>
<ul>
<li>我是1号</li>
<li>我是2号</li>
<li>我是3号</li>
<li>我是4号</li>
<li>我是5号</li>
</ul>
<script>
//需求：点击每一个li标签被点击会打印出文本内容
let liList=document.querySelectorAll('li')
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click',function () {
// 方式1
// console.log(liList[index].innerText)
// 方式2
//this表示我自己
console.log(this.innerText)
})
}
</script>
</body>
二、编程思想（排他思想）
当前元素为A状态,其他元素为B状态 使用：
- 干掉所有人 使用for循环
- 复活他自己 通过this或者下标找到自己或者对应的元素
演示
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<script>
//获取所有的li标签 数组
let li=document.querySelectorAll('li')
//遍历
for (let index = 0; index < li.length; index++) {
//对所有的li标签 开始绑定点击时间
li[index].addEventListener('click',function () {
for (let i = 0; i < li.length; i++) {
// 设置所有li标签为紫色
li[i].style.backgroundColor='blueviolet'
}
// 设置被点击后变红色
this.style.backgroundColor='red'
})
}
</script>
</body>
三、节点操作
DOM节点
1.节点操作 DOM节点:DOM树里每一个内容都称之为节点 2.节点类型： ①元素节点：所有的标签 比如 body、 div。 html 是根节点 ②属性节点：所有的属性 比如 href、class属性 ③文本节点：所有的文本 比如标签里面的文字
查找节点
1.父节点查找：
parentNode 属性
返回最近一级的父节点 找不到返回为null
<body>
<div>
<button>div的子元素</button>
</div>
<script>
// 获取到父元素 div标签
console.dir(button.parentNode);
</script>
2.子节点查找：
childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等 hildren （重点）：仅获得所有元素节点 返回的还是一个伪数组
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let ul=document.querySelector('ul')
//获取ul下面的子节点
console.log(ul.children);
</script>
</body>
3.兄弟关系查找
①下一个兄弟节点 nextElementSibling 属性 ②上一个兄弟节点 previousElementSibling 属性
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let lis=document.querySelectorAll('li')
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click',function () {
//上一个兄弟背景颜色变红
this.previousElementSibling.style.backgroundColor='red'
//下一个兄弟背景颜色变黄
this.nextElementSibling.style.backgroundColor='yellow'
})
}
</script>
</body>
4.增加节点
一般情况下，我们新增节点，按照如下操作： 创建一个新的节点 把创建的新的节点放入到指定的元素内部 比如，点击发布按钮，可以新增一条信息 ①创建节点 document.createElement('标签名')
<body>
<ul></ul>
<script>
//创建一个li标签
let li=document.createElement('li')
//打印看看
console.log(li);
</script>
</body>>
要想在界面看到，还得插入到某个父元素中
②父元素.appendChild(元素) 插入到父元素的最后
<body>
<ul></ul>
<script>
//创建一个li标签
let li=document.createElement('li')
// ===================
//还可以设置li的样式
// li.innerText='我是新增的li标签'
// li.style.backgroundColor='pink'
// ===================
//获取ul
let ul=document.querySelector('ul')
//把li标签插入到ul中
ul.appendChild(li)
另外append可以插入多个标签
</script>
</body>
③父元素.insertBefore(要插入的元素，要放在哪个元素前面) 插入到父元素的前面
<body>
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
*/
// 左边第3个
let c = document.querySelector('.left li:nth-child(3)');
// 右边第二个
let two = document.querySelector('.right li:nth-child(2)');
let right = document.querySelector('.right');
// 把c插入到右边第二个li的上面
right.insertBefore(c,two);
// 也可以创建来插入
// let li = document.createElement('li');
// li.innerText = '新创建的';
// right.insertBefore(li, two);
// 父元素.insertBefore(要插入的元素,哪个元素的上面);
</script>
</body>
④appendChild 剪切/移动
有当前元素作剪切/移动 功能 没有当前元素作插入功能
<body>
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="right"></ul>
<script>
// 获取左边第二个li
let li=document.querySelector('.left li:nth-child(1)')
// 获取右边ul
let right=document.querySelector('.right')
// 把左边第一个li 剪切/移动到右边ul
right.appendChild(li)
</script>
</body>
⑤createTextNode创建文本节点
<script>
// 创建元素节点 使用 createElement
// 创建文本节点
let text = document.createTextNode('试试就试试不行就百度');
// 插入到body认证一下
document.body.appendChild(text);
</script>
5.克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值： ①若为true，则代表克隆时会包含后代节点一起克隆--深拷贝 ②若为false，则代表克隆时不包含后代节点--浅拷贝，默认为false
<body>
<div class="box">
<button></button>
</div>
<script>
// 1.克隆这个节点
let box=document.querySelector('.box')
// 2.开始克隆
let newBox=box.cloneNode() //浅克隆 只克隆自己本身
let newBox=box.cloneNode(true)//true 深克隆 把div的后代节点一起克隆
// 3.插入到body标签中
document.body.appendChild(newBox)
//等于复制了一份插到body
</script>
</body>
6.删除节点
语法： 父元素.removeChild(要删除的元素)
<body>
<button>删除ul中的某一个标签</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let button=document.querySelector('button')
let ul=document.querySelector('ul')
给按钮绑定事件
button.addEventListener('click',function () {
选中第一个li
let li=document.querySelector('li:nth-child(1)')
点击一次按钮就删掉第一个
ul.removeChild(li)
})
//删除自己
ul.remove()
</script>
</body>
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除 注意： ①如不存在父子关系则删除不成功 ②删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
