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;

            width: 400px;

            border-bottom: 1px solid #ccc;

            margin: 100px auto;

        }

        .box input {

            width: 370px;

            height: 30px;

            border: 0;

            outline: none;

        }

        .box img {

            position: absolute;

            top: 2px;

            right: 2px;

            width: 24px;

        }

    </style>

</head>

<body>

    <div class="box">

        <label for="">

            <img src="data: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;

            width: 74px;

            height: 88px;

            border: 1px solid #ccc;

            margin: 100px auto;

            font-size: 12px;

            text-align: center;

            color: #f40;

            /* display: block; */

        }

        .box img {

            width: 60px;

            margin-top: 5px;

        }

        .close-btn {

            position: absolute;

            top: -1px;

            left: -16px;

            width: 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="data: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 {

            width: 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 {

            width: 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 {

            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>

            <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 {

            width: 300px;

            margin: 100px auto 0;

        }

        table {

            border-collapse: collapse;

            border-spacing: 0;

            border: 1px solid #c0c0c0;

            width: 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–元素操作的更多相关文章

JavaScript DOM 元素属性状态属性
JavaScript DOM 元素属性状态属性版权声明:未经允许,严禁转载! 元素的属性核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...
深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
JavaScript DOM 基础操作
JavaScript DOM 基础操作一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
dom元素操作（动态事件绑定）
遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...
JavaScript DOM 常用操作
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...
jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性语法:attr(name) 参数name表示属性的名称 2.设置元素的属性单个属性设置语法:attr(key,val ...
Javascript学习二---DOM元素操作
Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法获取元素方法: 通过ID:document.getElementById(); 一个 ...
JavaScript HTML DOM 元素操作（节点）
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...
JavaScript DOM–节点操作
节点节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...

随机推荐

关于Dijk采访的一些感想
有效的程序员不应该浪费很多时间用于程序调试,他们应该一开始就不要把故障引入! 反复,一遍又一遍的尝试,真的会让人心烦,对于有的问题解决不了,其实有很多原因,写出来的程序其实是非常考验人的细节处理能力的 ...
ES6数组去重方法
Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员),操作方法有:add(value).delete(value).has(value).clear():遍历方法有:keys ...
关于form表单提交数据后不跳转页面+ajax接收返回值的处理
1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...
谷歌浏览器chrome应用商店无法打开的解决方法
解决办法:谷歌访问助手谷歌访问助手是一款免费的谷歌服务代理插件,不用配置就可以正常访问谷歌的大部分服务,而且速度也很快.下载地址:http://www.cnplugins.com/advsearch ...
CF1227F2 Wrong Answer on test 233 (Hard Version)
题意 \(n\)道题,每道题有\(k\)种选项,其中第\(i\)道题正确答案是\(a_i\),但是填答案的时候填错啦,第一道题的选择填到了第二道题...第\(n\)道题的选择填到了第一道题,求在\(k ...
Codeforces Round #617 (Div. 3) 补题记录
1296A - Array with Odd Sum 题意:可以改变数组中的一个数的值成另外一个数组中的数,问能不能使数组的和是个奇数思路:签到,如果本来数组的和就是个奇数,那就OK 如果不是,就需 ...
“/Reports”应用程序中的服务器错误。
“/Reports”应用程序中的服务器错误. ----------------------------------------------------------------------------- ...
Oracle Solaris 10 重启后提示 Bad PBR sig
Solaris 10 安装完毕重启后提示 Bad PBR sig 在磁盘分区的时候,默认自带的 overlap 不要删除,否则启动报错. 分区时,保留overlap(默认显示总容量大小)分区.安装操作 ...
Git常用命令简记
创建仓库添加需要版本控制的文件到仓库中提交到版本库修改位于顶端的commit的日志分支管理版本回退切换与合并分支本地版本库与远程关联克隆 Tag的使用问题与解决创建git仓库 gi ...
mysql权限过滤
1.用like做权限过滤上级部门可以看到下级部门发布的正式文件,下级部门不能看到上级部门发布的正式文件 SELECT*FROM cms_nrgl_st a, mz_xzjg bWHERE a.sys ...

JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

根据标签名获取元素

根据类名获取元素 H5 新增

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

获取特殊元素(body, html)

事件

事件三要素

常见的鼠标事件

操作元素

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

元素属性操作

表单元素属性

样式属性

自定义属性

排他思想

JavaScript DOM–元素操作的更多相关文章

随机推荐

热门专题