JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

语法: document.getElementById(id)

<div id='time'>2020-01-09</div>

<script>
    var timer = document.getElementById('time');
    console.log(timer); // 根据 ID 获取
    // 查看里面的属性和方法
    console.dir(timer)
</script>

根据标签名获取元素

语法: document.getElementsByTagName('标签名')

<ul>
    <li>u1</li>
</ul>

<ol id="ol">
    <li>ol</li>
</ol>

<script>
    // 根据元素名获取
    var lis = document.getElementsByTagName('li');
    console.log(lis);  // HTMLCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素 是复数

    // 可以通过ele 继续获取元素名
    var ol_ele = document.getElementById('ol');
    var ol_lis = ol_ele.getElementsByTagName('li');
    console.log(ol_lis);  // ol 下所有的li

</script>

根据类名获取元素 H5 新增

语法: document.getElementsByClassName('类名')

<div class="cla"></div>
<script>
    var cla = document.getElementsByClassName('cla');  // HTMLCollection [div.cla] 返回对象集合，需要使用对象 得取第一个元素，第二个是length
    console.log(cla);
</script>

选择器方式获取元素 H5新增

语法: 
document.querySelector('选择器')
document.querySelectorAll('选择器')

<div class="cla"></div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var cla = document.querySelector('.cla'); // 返回对象元素， 如果是class 则写.类名，id 则写#id
    console.log(cla);

    var lis = document.querySelectorAll('li');  // 返回所有对象集合
    console.log(lis);
</script>

获取特殊元素(body, html)

document.body;  // body
document.documentElement; // html

事件

事件三要素

事件源: 触发事件的元素
事件类型: 什么事件例如click点击事件
事件处理程序: 事件处理函数

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获取鼠标焦点
onblur	失去鼠标焦点
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

改变元素内容(设置，获取)

ele.innerText
ele.innerHtml

区别:

获取内容时: innerText去掉html标签，同时空格和换行也去掉, innerHtml 保留html标签，空格和换行
设置内容时: innerText不会识别html，而innerHTML会识别

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        var div = document.querySelector('div');
        div.innerHTML = '<strong>今天是：</strong>';  // 今天是：
        div.innerText = '<strong>今天是：</strong>';  //  <strong>今天是：</strong>

        var p = document.querySelector('p');
        console.log(p.innerText); // 我是文字 123
        console.log(p.innerHTML);
        /*

        我是文字
        <span>123</span>*/

    </script>

</body>

示例代码

元素属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

<script>
    var ldh = document.querySelector('#ldh');
    var zxy = document.querySelector('#zxy');
    var img = document.querySelector('img');

    // 获取元素属性的值
    console.log(img.alt); // 刘德华

    // 设置元素属性值
    ldh.onclick = function () {
        img.src = 'images/ldh.jpg';
        img.title = '刘德华666'
    };
    zxy.onclick = function () {
        img.src = 'images/zxy.jpg';
        img.title = '张学友'
    }
</script>

示例代码

表单元素属性

设置表单属性值

元素对象.属性名

设置属性值

元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');

        btn.onclick = function () {
            // 获取表单属性值
            console.log(input.value); // 输入内容

            // 修改表达属性值
            input.value = '被修改了';
            this.disabled = true;  // 禁用点击按钮
        }
    </script>
</body>

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码显示案例</title>

    <style>
        .box {
            position: relative;
             400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
             370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
             24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>

    <script>
        // 获取元素
        var eye = document.querySelector('#eye');
        var input = document.querySelector('input');
        // 设置一个变量，后面判断密码显示和隐藏用
        var falg = 0;
        eye.onclick = function () {
            if (falg == 0) {
                this.src = 'images/open.png';
                input.type = 'text'; // 改变文本type属性
                falg = 1;
            }else {
                this.src = 'images/close.png';
                input.type = 'password';
                falg = 0;
            }
        }
    </script>

</body>
</html>

案例-密码显示和隐藏

样式属性

style属性改变

元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值

<body>
    <div></div>
    <script>
       var div = document.querySelector('div');
       div.style.width = '200px';
       div.style.backgroundColor = 'red';
    </script>
</body>

示例代码

操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className

className会覆盖掉原先的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            position: relative;
             74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
             60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
             14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>

    <script>
        var close = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        close.onclick = function () {
            box.style.display = 'none';
        }

    </script>
</body>
</html>

案例-关闭按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        input {
            color: #999;
        }
    </style>

</head>
<body>
     <input type="text" value="手机">

    <script>
        var input = document.querySelector('input');
        input.onfocus = function () {
            if (this.value === '手机') {
                this.value = ''; // 改变元素属性值
            }
            this.style.color = '#333'  // 样式属性改变
        };
        input.onblur = function () {
            if (this.value === '') {
                this.value = '手机'
            }
            this.style.color = '#333'
        }

    </script>
</body>
</html>

案例-显示隐藏文本框内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        div {
             600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }

        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>


</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>

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

        // 注册事件，失去焦点事件
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        };




    </script>
</body>
</html>

案例-注册密码提示错误

自定义属性

获取属性名

ele.属性名 (自带属性)
ele.getAttribute(自定义属性名)

<body>
    <div id="demo" index="1"> </div>
    <script>
        var div = document.querySelector('#demo');
        // 获取属性
        console.log(div.id); // demo
        //获取自定义属性
        console.log(div.getAttribute('index'));  // 1
    </script>
</body>

示例代码

设置属性

ele.属性名 = ‘值’ (自带属性)
ele.setAttribute(‘属性’)

<body>
    <div id="demo" > </div>
    <script>
        var div = document.querySelector('#demo');
        // 自带属性设置
        div.id = 'test';
        // 自定义属性设置
        div.setAttribute('index', 'ce_shi')
    </script>
</body>

示例代码

移除属性

ele.removeAttribute(‘属性’)

<body>
    <div id="demo" index="1"> </div>
    <script>
        var div = document.querySelector('#demo');
        // 移除自定义属性
        div.removeAttribute('index')
    </script>
</body>

示例代码

H5自定义属性

自定义属性以’data-’开头命名
H5新增ele.dataset.自定名或者 ele.dataset[‘自定义名’] ie11 才支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
             978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>

    <script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        for (var i=0; i< lis.length; i++) {
            // 设置定义属性为index
            lis[i].setAttribute('index', i);

            // 给每个li注册点击事件
            lis[i].onclick = function () {

                // 干掉其他人
                for (var i=0; i<lis.length; i++) {
                    lis[i].className = ''
                }

                this.className = 'current';

                // 获取自定义属性
                var index = this.getAttribute('index');
                for (var i=0; i<items.length; i++) {
                    items[i].style.display = 'none'
                }
                items[index].style.display = 'block'


            }
        }

    </script>


</body>
</html>

案例-tab栏切换

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

干掉所有人，留下我自己。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>

    <style>

    </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.querySelectorAll('button');

        for (var i=0; i < btns.length; i++) {
            // 注册点击事件
            btns[i].onclick = function () {
                for (var i=0; i<btns.length; i++) {
                    // 干掉所有人
                    btns[i].style.backgroundColor = ''
                }
                //留下我自己
                this.style.backgroundColor = 'red'
            }
        }
    </script>

</body>
</html>

案例1-按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格变色</title>
    <style>
        table {
             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>
            <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').querySelectorAll('tr');
        for (var i=0; i < trs.length; i++) {
            // 注册鼠标经过事件
            trs[i].onmouseover = function () {
                this.className = 'bg'
            };
            // 注册鼠标离开事件
            trs[i].onmouseout = function () {
                this.className = ''
            }
        }


    </script>

</body>
</html>

案例2-表单隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
             300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
             300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
</div>

<script>
    // 获取元素
    var j_cbAll = document.querySelector('#j_cbAll');
    var j_tb = document.querySelector('#j_tb');
    var inputs = j_tb.querySelectorAll('input');

    // 全选按钮，根据id j_cbAll
    j_cbAll.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;
                    break;
                }
            }
            j_cbAll.checked = flag;  // 设置全选按钮为变量值  true or false
        }
    }

</script>

</body>
</html>

案例3-全选和反选

JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

根据标签名获取元素

根据类名获取元素 H5 新增

选择器方式获取元素 H5新增

获取特殊元素(body, html)

事件

事件三要素

常见的鼠标事件

操作元素

改变元素内容(设置，获取)

元素属性操作

表单元素属性

样式属性

自定义属性

排他思想