zoukankan html css js c++ java

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-全选和反选

查看全文

相关阅读:
ICONS-图标库
 图形资源
 vue项目中，如果修改了组件名称，vscode编辑器会在引入修改组件的名字处提示红色波浪线 The file is in the program because:Imported via xxx Root file specified for compilation .
接口在dev环境报跨域问题(has been blocked by CORS policy:Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header ispresent on the requested resource.)，qa环境正常
 阿里云occ的图片文件URL用浏览器直接打开无法访问，提示This XML file does noe appear to have any style information associated with it. The document tree is shown below.
vue 项目使用element ui 中tree组件 check-strictly 用法（父子不互相关联的反显情况）
高德地图进行线路规划绘制标记点操作(vue)
vue中实现拖拽调整顺序功能
 2021-01-22 浏览器相关知识
 2021-01-22 js 相关知识点

原文地址：https://www.cnblogs.com/py-web/p/12172794.html

JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

根据标签名获取元素

根据类名获取元素 H5 新增

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

获取特殊元素(body, html)

事件

事件三要素

常见的鼠标事件

操作元素

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

元素属性操作

表单元素属性

样式属性

自定义属性

排他思想