DOM节点

节点的分类

DOM树里每一个内容都称之为节点。

元素节点（重点学习）
- 所有的标签比如 body、 div ;
- html 是根节点。
属性节点
- 所有的属性比如 href。
文字节点
- 所有的文本。
注释节点

查找节点

父节点查找

parentNode 属性

返回最近一级的父节点找不到返回为null。
写法：

子元素.parentNode

关闭二维码案例

示例：

    <div>
        <img src="./img/1.png" alt="" class="one">
        <img src="./img/2.png" alt="" >
    </div>

    <script>
        //获取关闭的图片
        let one = document.querySelector(".one");

        //绑定 关闭图片 点击事件
        one.addEventListener("click",function(){
            //点击后 关闭图片的父元素 div隐藏 ,里面的两张图片都会同时隐藏
            one.parentNode.style.display="none";
        })
    </script>
</body>

多个二维码关闭案例：

<body>
    <div>
        <img src="./img/1.png" alt="" class="one">
        <img src="./img/2.png" alt="">
    </div>
    <div>
        <img src="./img/1.png" alt="" class="one">
        <img src="./img/2.png" alt="">
    </div>
    <div>
        <img src="./img/1.png" alt="" class="one">
        <img src="./img/2.png" alt="">
    </div>
    <script>
        //1.获取关闭按钮 数组
        let all = document.querySelectorAll(".one")

        //2.用遍历让数组里的关闭按钮 都绑定 点击事件
        for (let index = 0; index < all.length; index++) {
            all[index].addEventListener("click",function(){
                //3.点击关闭按钮 后， 父元素隐藏
                all[index].parentNode.style.display="none"
            })            
        }
    </script>
</body>

子节点查找

childNodes （用的较少些）

获得所有子节点、包括文本节点（空格、换行）、注释节点等。

children （重点）

仅获得所有元素节点；
返回值是一个伪数组。

写法：

父元素.children

children 案例

要求点击ul，所有li标签隐藏。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        //获取ul
        let ul = document.querySelector("ul")

        //给获取的ul 绑定点击事件
        ul.addEventListener("click",function(){
            //获取的ul的所有li子元素是个数组，所以需要遍历让所有子元素都隐藏
            for (let index = 0; index < ul.children.length; index++) {
                 ul.children[index].style.display="none"
            }
        })
    </script>
</body>

多个ul点击子元素隐藏案例

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
    /* 思路：
      1 获取到所有的ul标签 数组
      2 遍历ul数组 挨个绑定点击事件
      3 点击事件触发了
        1 this = 当前被点击的ul标签 
        2 this.children 获取到 所有的ul的子元素 数组
        3 遍历 children 获取到中的每一个li标签
        4 li.style.display="none"
      
       */


       //1.获取ul数组
       let uls = document.querySelectorAll("ul");

       //2.遍历ul数组绑定点击事件
       for (let index = 0; index < uls.length; index++) {
           //3.点击触发事件
           uls[index].addEventListener("click",function(){
               //3.1  循环被点击的ul里的子元素li 数组，让他们都隐藏
               for (let i = 0; i < this.children.length; i++) {
                   this.children[i].style.display="none"            
               }
           }) 
       }
    </script>
</body>

兄弟元素

兄弟关系查找： 1. 下一个兄弟节点： nextElementSibling 属性
2. 上一个兄弟节点： previousElementSibling 属性

示例：

要求：按其中一个li后，该li 的上面一个li 背景颜色变黄色，下面一个li 变粉色

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <script>
        //获取所有li 为一个数组
        let lis = document.querySelectorAll("li")

        //遍历给所有的li 绑定事件
        for (let index = 0; index < lis.length; index++) {
            lis[index].addEventListener("click", function () {
                
                //下一个兄弟节点 nextElementSibling
       this.nextElementSibling.style.backgroundColor = 'pink';
                
                // 上一个兄弟节点 previousElementSibling
                    this.previousElementSibling.style.backgroundColor='yellow';
            });
        }
    </script>
</body>

增加节点

创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点创建元素节点方法：

document.createElement('标签名')

追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面：

父元素.insertBefore(要插入的元素，在哪个元素前面)

appendChild

追加到最后一个子元素。
如果要插入的元素是已经存在的，那他的作用是移动，剪切过去。
如果插入的元素是新创建的，那他的作用仅仅是插入。
appendChild 只可以插入一个元素；append可以同时插入多个标签，用逗号隔开就行：
```
父元素.append（要插入的子元素，要插入的子元素，要插入的子元素）
```

appendChild 插入案例：

<body>
    <ul>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        //1.创建一个 li标签 节点 document.createElement('')
        let li = document.createElement('li');

        li.innerText="这个是新创建的li"
        li.style.backgroundColor="pink"
        
        //2.把li标签 插入到ul标签中  父元素.appendChild()
        let ul = document.querySelector("ul")
        ul.appendChild(li); //把li标签插入到ul ，插入进去在父元素的底部
    </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>
      // appendChild  插入元素的功能 |  剪切

      // appendChild(元素)  如果该元素是已经存在网页中， appendChild作用类似 移动 
      // appendChild(元素)  如果该元素新创建的， appendChild作用类似 简单的插入

      // 先获取左边的第一个li标签
      let li = document.querySelector('.left li:nth-child(1)');

      //获取右边的ul
      let rightUl = document.querySelector('.right');
      // 把li标签插入到右边的ul中
      rightUl.appendChild(li);
    </script>
  </body>

剪切案例：

点击li 标签点菜剪切移动


<body>
    <ul class="one">
        <li>小龙虾</li>
        <li>炸鸡翅</li>
        <li>地三鲜</li>
        <li>生腌虾</li>
        <li>砂锅粥</li>
    </ul>

    <ul class="two">
    </ul>

    <script>
        //1. 先获取第一个ul的所有li标签，为一个数组
        let onelis = document.querySelectorAll(".one li")
        //2.获取第二个ul
        let ultwo = document.querySelector(".two")

        //遍历第一个ul的所有li标签，绑定点击事件
        for (let index = 0; index < onelis.length; index++) {
            onelis[index].addEventListener("click",function(){
                //点击某个li标签 ，那个li标签剪切到第二个ul里
                ultwo.appendChild(onelis[index])
            })   
        }
    </script>
</body>

insertBefore

插入到父元素中某个子元素的前面。
功能和appendChild 的类似，如果要插入的元素是已经存在的，那他的作用是移动，剪切过去。
如果插入的元素是新创建的，那他的作用仅仅是插入。
如果添加到哪个位置的元素写的是null，那就是插入到父元素的末尾。

插入示例：

<body>
    <ul class="one">
        <lu>1</lu>
        <lu>2</lu>
        <lu>3</lu>
        <lu>4</lu>
        <lu>5</lu>
    </ul>
    <ul class="two">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
    <script>
        //insertBefore 添加到父元素中某个子元素的前面

        //获取你想要放在哪个子元素前面 和 父元素
        let c = document.querySelector(".two li:nth-child(3)")
        let twoul = document.querySelector(".two")

        //新键一个li标签
        let li = document.createElement('li')
        li.innerText="新创建的";

        //插入元素。 insertBefore（要插入的元素，在哪个元素前面）
        twoul.insertBefore(li,c)
    </script>
</body>

案例

购物车加减案例

要求：

按+号按钮时，number的盒子数字+1；
按-号按钮时，number盒子数字-1，且当盒子数字为1时，减号按钮禁用。

<body>
    <div class="number">1</div>
    <button  class="add">+</button>
    <!-- 一开始数量为1，先给减号加上禁用 -->
    <button disabled class="minus">-</button>

    <script>
        let number = document.querySelector(".number")
        let add = document.querySelector(".add")
        let minus = document.querySelector(".minus")

        //点击加号键  ，number数字+1
        add.addEventListener("click",function(){
            number.innerText++;

            //启用减号键
            minus.disabled = false;
        })

        //点击减号键  ，number数字-1
        minus.addEventListener("click",function(){
            number.innerText--;

            // 如果数字等于1的话 禁用减号按钮
            //因为number.innerText 是字符串类型， 用2个= 就行
            if(number.innerText == 1){
                //减号键 禁用
                minus.disabled = true;
            }
        })
    </script>
</body>

环境对象

this

环境对象指的是函数内部特殊的变量 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>
        let lilist = document.querySelectorAll('li');

        //遍历每点击li时 
        for (let index = 0; index < lilist.length; index++) {
            lilist[index].addEventListener("click",function(){

                //打印显示li标签的文本内容
                // console.log(lilist[index].innerText);
                //优化 可以直接写this= 表示 我自己
                console.log(this.innerText)
            })    
        }
    </script>
</body>

排他思想

当前元素为A状态,其他元素为B状态。 使用：

干掉所有人使用for循环。
复活他自己通过this或者下标找到自己或者对应的元素。

排他思想案例：

要求：

要求点击某个li标签变粉色，其他标签不变色。

<body>
    <ul>
        <li>动画片</li>
        <li>恐怖片</li>
        <li>战争片</li>
        <li>科幻片</li>
        <li>纪录片</li>
    </ul>
<!-- 要求点击l某个li标签 变粉，其他标签不变色 -->
    <script>
        let lilist = document.querySelectorAll('li')

        //循环li标签 绑定事件
        for (let index = 0; index < lilist.length; index++) {
            //触发点击li标签时
            lilist[index].addEventListener("click",function(){

                //给被点击的li标签 选中样式
                //循环给所有li背景加上白色
                for (let i = 0; i < lilist.length; i++) {
                    lilist[i].style.backgroundColor="#fff"; 
                }

                //再单独设置 被点击的li标签变成粉色
                this.style.backgroundColor="pink"
            })
           
        }
    </script>

tab栏综合案例

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
      <div class="main active">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>

    
<script>
  let lilist = document.querySelectorAll("li")
  let main = document.querySelectorAll(".main")

//1.先遍历li数组，绑定点击事件
for (let index = 0; index < lilist.length; index++) {
  lilist[index].addEventListener("click",function(){
    //2.先遍历清除掉所有li标签选中时提示选中红色条条的 样式类名active
    for (let i = 0; i < lilist.length; i++) {
    lilist[i].classList.remove('active');
  }
  //3.再单独给选中的那个li标签 加上active的样式类名
  lilist[index].classList.add ('active');
    
  //4.再遍历一组下面图片的数组，让所有图片都变隐藏
    for (let i = 0; i < main.length; i++) {
      main[i].style.display='none';
    }
    //5.再单独把选中数对应的图片 显示出来。
    main[index].style.display="block"
  })
}
</script>

</body>

微博输入案例

要求：div里计算文本框输入的文字数量。

因为文本域里的文字是一组字符串，把他当成一组数组就行，让文本div的文本内容=文本域输入的长度.value.length即可。

<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>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div>0</div>

<script>
    let textarea = document.querySelector('textarea')
    let div = document.querySelector("div")

    //文本域输入时
    textarea.addEventListener("input",function(){
        //div的文本内容 = 文本域输入的长度
        div.innerText = textarea.value.length
    })
    //因为文本域里的文字 是一组字符串，把他当成一组数组就行，让文本div的文本内容=文本域输入的长度.value.length即可，
</script>
</body>

web API day3