Web API第三天学习总结

字符串的补充

1. 类似一个数组
2. 属性length长度
3. 也可以通过下标来访问
4. 字符串也可以遍历

环境参数this

1. 谁调用了包含this的方法，谁就是this
2. 哪个元素绑定了点击事件，哪个元素就是this

排他思想

1. 先获取到所有的同类型的元素
2. 遍历他们，挨个设置一种样式
3. 单独找到想要选中的标签，给他在设置选中的样式
4. 干掉所有人(使用for循环)
5. 复活他自己(通过this或者下标找到自己或对应的元素)

节点

什么是节点

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

节点类型

元素节点

1. 所有的标签如body、div
2. html是根节点

属性节点

• 所有的属性比如href

文本节点

• 所有的文本

注释节点

• 所有的注释

节点的操作

查找节点

父节点查找

语法

子元素.parentNode

• parentNode 属性
• 返回最近一级的父节点 找不到返回为null

        <div>
        <img src="./images/1.png" alt="" class="one">
        <img src="./images/2.png" alt="" class="close">
   	</div>
    <script>
        let one = document.querySelector(".one");
        let clo = document.querySelector(".close");
        clo.addEventListener("click",function() {
            clo.parentNode.style.display = "none";
        })
    </script>

子节点查找

语法

父元素.children

1. childNodes
   1. 获得所有子节点、包括文本节点（空格、换行）、注释节点等
2. children(重点)
   1. 仅获得所有元素节点
   2. 返回的还是一个伪数组

        // 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的children做遍历
               for (let i = 0; i < this.children.length; i++) {
                    // this.children[i]表示每一个li标签
                    this.children[i].style.display = "none";
               }
            })
            
        }

兄弟节点查找

下一个兄弟查找

nextElementSibling 属性

上一个兄弟查找

previousElementSibling 属性

        // 1.获取元素 li
        let lis = document.querySelectorAll("li");
        // 2.遍历ul中所有的li标签  绑定点击事件
        for (let index = 0; index < lis.length; index++) {
            // 3.点击事件触发了
            lis[index].addEventListener("click",function() {
                // 上一个兄弟设置蓝色
                this.nextElementSibling.style.backgroundColor = "blue";
                // 下一个兄弟变成绿色
                this.previousElementSibling.style.backgroundColor = "green";
            })
            
        }

增加节点

创建节点

语法

document.createElement("标签名")

        // 创建节点 document.createElement("标签名")
        let li = document.createElement("li");

追加节点

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

语法

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

        // 2.插入节点
        let ul = document.querySelector("ul");
        ul.appendChild(li);

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

语法

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

• 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
• 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入

         /*   insertBefore 也能插入元素 功能也类似 appendChild
        1 如果要插入的元素 是已经存在的  那么insertBefore作用 移动
        2 如果要插入的元素 是新创建的  insertBefore作用 仅仅 插入 */
        let li1 = document.querySelector(".left li:nth-child(3)");
        let li2 = document.querySelector(".right li:nth-child(3)");
        let right = document.querySelector(".right");
        // 父元素.insertBefore('要插入的元素','哪个元素的上面')
        right.insertBefore(li1, li2);