Web API(2)

排他思想

如果有同一组元素我们想要为某一个元素设置单独设置样式，需要用到for循环中的排他思想

思路如下

清除所有元素的样式
给当前元素设置样式
顺序不能颠倒
this是指当前事件函数的调用者

案例：点击当前按钮背景色变为紫色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        var bths = document.querySelectorAll('button');
        for (var i = 0; i < bths.length; i++) {
            bths[i].onclick = function() {
                // 清除所有元素的默认样式
                for (var i = 0; i < bths.length; i++) {
                    bths[i].style.backgroundColor = ''
                }

             // 给当前元素设置样式
                this.style.backgroundColor = 'purple'
            }
        }
    </script>
</body>

百度换肤效果（重点）

思路如下：遍历当前图片把图像的当前路径给body即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>~~~~
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(./images/img1.jpg);
        }
        
        ul {
            overflow: hidden;
            width: 800px;
            margin: 80px auto;
            background-color: #cccccc;
            padding: 2px;
            list-style: none;
        }
        
        ul li {
            float: left;
            width: 200px;
        }
        
        ul li img {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="./images/img1.jpg" alt=""></li>
        <li><img src="./images/img2.jpg" alt=""></li>
        <li><img src="./images/img3.jpg" alt=""></li>
        <li><img src="./images/img4.jpg" alt=""></li>
    </ul>

    <script>
        var imgs = document.querySelector('ul').querySelectorAll('img');
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                console.log(this.src)

                document.body.style.backgroundImage = "url(./images/img" + (i + 1) + ".jpg)"
            }
        }
    </script>
</body>

</html>

表格隔行变色（重点）

核心思路：用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout

鼠标经过当前行的时候，当前行变换背景颜色，鼠标离开当前行的时候，当前行的背景颜色清除
获取到是tbody里面的行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最近公布市值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>


        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>

            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>


            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>

            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>

    <script>
        var trs = document.querySelector('tbody').getElementsByTagName('tr');
        console.log(trs)

        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function() {
                this.className = 'bg'
            }

            trs[i].onmouseout = function() {
                this.className = ''
            }

        }
    </script>
</body>

</html>

全选反选按钮（重点）

全选思路：下面的复选框的按钮跟随全选按钮变化注意：全选按钮必须使用id获取元素

反选思路：需要进行双重for循环第一次for循环主要是为了给每个复选框设置点击事件第二次for循环主要是为了确定每个复选框是否被选中，借助一个flag开关变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            text-align: center;
            width: 300px;
            margin: 200px auto;
            border-collapse: collapse;
        }
        
        tr,
        th,
        td {
            border-collapse: collapse;
            border: 1px solid black;
            height: 30px;
        }
        
        thead tr {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="input_All"></th>
                <th>全选</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>香蕉</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>梨子</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 获取元素
        var input_All = document.getElementById('input_All');
        console.log(input_All)


        var inputs = document.querySelector('tbody').getElementsByTagName("input");
        console.log(inputs)

        //全选
        input_All.onclick = function() {
            console.log(this.checked)
            for (var i = 0; i < inputs.length; i++) {

                inputs[i].checked = this.checked
            }
        }

        //反选
        for (var i = 0; i < inputs.length; i++) {

            inputs[i].onclick = function() {
                var flag = true;
                for (var i = 0; i < inputs.length; i++) {
                    if (!inputs[i].checked) {

                        flag = false;
                    }
                }
                input_All.checked = flag
            }
        }
    </script>
</body>

</html>

自定义属性操作

获取属性值

element.属性 主要针对于内置属性进行获取
element.getAttribute('属性') 主要针对于自定义的属性进行获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p class="box" index='1'></p>
    <script>
        var p = document.querySelector('.box');
        console.log(p.className) //获取内置属性
        console.log(p.getAttribute("index")) //获得自定义属性
    </script>
</body>

</html>

设置属性值

element.属性 = "值" 主要对内置属性的值进行设置
element.setAttribute="值" 主要对自定义属性的值进行设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" index='2'>设置属性</div>


</body>
<script>
    var div = document.querySelector('div');



    // 设置属性
    div.className = 'container';
    div.setAttribute('index', 5)

    console.log(div)
</script>

</html>

移除属性

removeAttribute("属性") 主要对自定义属性进行移除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>~~~~
</head>

<body>
    <div class="box" index="2"></div>
</body>
<script>
    var div = document.querySelector('.box');
    div.removeAttribute('index');
    console.log(div)
</script>

</html>

案例：tab栏切换（重点)

核心思路：给tab-list设置自定义属性，并且属性值从0开始，当我们点击tab-list里面的li时，让tab-con里面items对应的序号显示，其它隐藏（排它思想）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            overflow: hidden;
            list-style: none;
        }
        
        .tab {
            width: 800px;
            margin: 200px auto;
        }
        
        .tab-list li {
            box-sizing: border-box;
            float: left;
            width: 200px;
            height: 30px;
            color: white;
            text-align: center;
            padding: 7px 0px;
            font: normal normal 14px '楷体';
            background-color: rgb(70, 99, 117)
        }
        
        .tab-con {
            width: 800px;
        }
        
        .tab-con div {
            width: 100%;
            height: 30PX;
            text-align: center;
            line-height: 30PX;
            background-color: PINK;
            margin-bottom: 1px;
        }
        
        .curent {
            background-color: skyblue!important;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-list">
            <ul>
                <li class="curent">选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
        </div>
        <div class="tab-con">
            <div class="items">选项一</div>
            <div class="items">选项二</div>
            <div class="items">选项三</div>
            <div class="items">选项四</div>

        </div>
    </div>

    <script>
        // 开始获取元素
        var lis = document.querySelector('.tab-list').querySelectorAll('li');
        console.log(lis)
        var items = document.querySelector(".tab-con").querySelectorAll('.items');
        console.log(items)

        // 绑定循环注册事件，使用排它思想来完成tab-list模块
        for (var i = 0; i < lis.length; i++) {
            // 为每个li设置属性
            lis[i].setAttribute('index', i)

            // 为每个li设置点击事件
            lis[i].onclick = function() {

                // 使用排它思想 清除所有元素的样式
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ""
                }
                this.className = 'curent'
                var index = this.getAttribute('index');
                console.log(index)

                // 遍历items 
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = "none"
                }

                items[index].style.display = 'block'

            }




        }
    </script>
</body>

</html>

H5新增获取自定义属性的方法

H5规定自定义属性data-开头作为属性并且赋值

获取H5自定义属性

兼容性写法 element.getAttribute('data-index');
H5新增 element.dataset.index或者element.dataset[index] ie 11才开始兼容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div data-index='6' data-list-name='8'></div>
    <script>
        // 两种方法获取
        var div = document.querySelector('div')
        console.log(div.getAttribute('data-index')); //兼容性写法
        console.log(div.dataset.index) //H5获取自定义属性的方法
        console.log(div.dataset.listName) //H5新增获取自定义属性的方法 采用驼峰式命名
    </script>
</body>

</html>

节点操作

获取元素共有两种

通过DOM自带的方法获取元素
通过节点的方法获取元素

一般来说：节点至少拥有nodeType(节点类型) nodeName(节点名称) nodeValue(节点值)三个基本属性

在实际开发中我们对节点的操作主要是操作元素节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="parent">
        <span class="son">x</span>
    </div>
    <script>
        var box = document.getElementsByClassName("parent");
        console.dir(box)
    </script>
</body>

</html>

注意事项

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3(文本节点包括文字空格换行等)

父节点

node.parentNode

注意事项

查找的是离自己最近的父元素节点
如若找不到自己的父元素节点，则返回-1；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div class="grandfather">
    <div class="father">
        <div class="son">x</div>
    </div>
</div>
<script>
    var son = document.querySelector('.son');
    var father = son.parentNode; //找到当前元素的父节点
    console.log(father) //打印父节点
</script>

<body>

</body>

</html>

子节点

parentNode.childNodes 包括文本节点及子元素节点
parentNode.children 只返回自己的子元素节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>li节点</li>
        <li>li节点</li>
        <li>li节点</li>
        <li>li节点</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul) //获得是一个元素对象
        var lis = document.querySelectorAll('li');
        console.log(lis) //获得是一个元素对象集合

        console.log(ul.childNodes)
        console.log(ul.childNodes[0].nodeType) //节点类型的值为3  说明是文本节点
        console.log(ul.childNodes[1].nodeType) //节点类型为1 说明是元素节点

        // 第一种方法 通过遍历的方式获取ul里面的所有子元素节点
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                console.log(ul.childNodes[i])
            }

        }


        // 第二种方法
        console.log(ul.children); //直接获得所有的子元素节点
    </script>
</body>

</html>

子节点操作

parentNode.firstChild：返回第一个子节点，包含所有节点
parentNode.lastChild:返回最后一个子节点，包含所有节点
parentNode.firstElementChild 返回第一个子元素节点
parentNode.lastElementChild 返回最后一个子元素节点

以上方法都是有兼容性，找不到子节点则返回null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
    </ol>
    <script>
        // 获取父元素
        var ol = document.querySelector('ol');
        console.log(ol)
            // 获取第一个节点及最后一个节点
        console.log(ol.firstChild);
        console.log(ol.lastChild)

        // 获取第一个子元素节点及最后一个子元素节点
        console.log(ol.firstElementChild)
        console.log(ol.lastElementChild)


        //使用开发中的方法获取第一个子元素节点及最后一个子元素节点
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1])
    </script>
</body>

</html>

新浪导航栏案例（重点）

思路如下

导航栏里面的li需要鼠标经过效果，所有需要绑定循环注册事件
当鼠标经过li时，ul显示，当鼠标离开li时，ul隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul.nav {
            overflow: hidden;
            list-style: none;
            width: 600px;
            margin: 200px auto;
        }
        
        .nav>li {
            list-style: none;
            float: left;
            margin-right: 10px;
        }
        
        .nav li a {
            display: block;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid red;
            text-decoration: none;
            font-weight: 700;
        }
        
        .nav .first {
            margin-left: 0px;
        }
        
        .nav ul li {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid red;
            border-top: none;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#" class="first">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">博客</a>
            <ul>
                <li>微博提醒</li>
                <li>未读提醒</li>
            </ul>
        </li>
        <li>
            <a href="#">注册</a>
            <ul>
                <li>注册</li>
                <li>登录</li>
            </ul>
        </li>

    </ul>
    <script>
        // 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; //获取所有父元素中的子节点
        console.log(lis)

        // 绑定循环注册时间
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = "block"
            }

            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none'
            }
        }
    </script>
</body>

</html>

兄弟节点

node.nextSibling 获取下一个节点（包括文本节点）
node.previousSibling 获取上一个节点（包括文本节点）

node.nextElementSibling 获取下一个兄弟子元素节点
node.previousElementSibling 获取上一个兄弟元素节点

注意：以上方法都有兼容性找不到则返回null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>div</div>
    <span>span</span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling) //获取下一个节点（包括文本节点）
        console.log(div.previousSibling) //获取上一个节点（包括文本节点）

        console.log(div.nextElementSibling) //获取下一个兄弟子元素节点
        console.log(div.previousElementSibling) //获取上一个兄弟元素节点
        
    </script>
</body>

</html>

添加元素

想在页面中添加新的元素，需要两步：创建元素 添加元素

node.appendChild      node：父级  Child子级   后面追加元素
node.insertBefore     前面追加元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul></ul>
</body>
<script>
  // 获取元素
  var ul = document.querySelector('ul');

  // 创建元素
  var li = document.createElement('li')
  ul.appendChild(li)

  var a = document.createElement('a');
  a.innerHTML = '你好'

  ul.insertBefore(a, ul.children[0])
</script>

</html>

简单的留言板功能

利用创建元素在前面插入元素即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            width: 600px;
            height: 200px;
        }
        
        li {
            background-color: pink;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <textarea></textarea>
    <button>留言</button>
    <ul></ul>

    <script>
        // 获取元素
        var text = document.querySelector('textarea');
        var button = document.querySelector('button');
        var ul = document.querySelector('ul');

        button.onclick = function() {
            var flag = true
            if (text.value == "") {
                alert('没有输入内容')
                flag = false
                return flag
            } else {
                var li = document.createElement("li");
                li.innerHTML = text.value;
                ul.insertBefore(li, ul.children[0])
            }
        }
    </script>
</body>

</html>

Web API(2)

排他思想

案例：点击当前按钮背景色变为紫色

百度换肤效果（重点）

表格隔行变色（重点）

全选反选按钮（重点）

自定义属性操作

获取属性值

设置属性值

移除属性

案例：tab栏切换（重点)

H5新增获取自定义属性的方法

节点操作

获取元素共有两种

父节点

子节点

子节点操作

新浪导航栏案例（重点）

兄弟节点

添加元素

简单的留言板功能

已注销

引用和评论

Vue

Web API(2)

排他思想

案例：点击当前按钮 背景色变为紫色

百度换肤效果（重点）

表格隔行变色（重点）

全选反选按钮（重点）

自定义属性操作

获取属性值

设置属性值

移除属性

案例：tab栏切换（重点)

H5新增获取自定义属性的方法

节点操作

获取元素共有两种

父节点

子节点

子节点操作

新浪导航栏案例（重点）

兄弟节点

添加元素

简单的留言板功能

已注销

引用和评论

Vue

案例：点击当前按钮背景色变为紫色