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 文本 ...

随机推荐

Minion 主机同步失败问题，全过程
如果出现以下状态 token也有了这个是salt-api 说明你salt-api没问题点击同步主机查看你产品线管理那里,添加了你这个salt-api没? 配置参考文档 https://gith ...
linux笔记-硬件命令【2】
1- 磁盘 1.1- 查看电脑磁盘类型 cat /sys/block/sda/queue/rotational 0 #固态盘 cat /sys/block/sdb/queue/rotational 1 ...
R语言函数化学习笔记6
R语言函数化学习笔记 1.apply函数可以让list或者vector的元素依次执行一遍调用的函数,输出的结果是list格式 2.sapply函数原理和list一样,但是输出的结果是一个向量的形式 ...
洛谷P3367 【模板】并查集模板找baba
链接https://www.luogu.org/problem/P3367 #include<bits/stdc++.h> using namespace std; ; int fa[ra ...
Nginx 配置Websocket
Nginx反向代理配置websocket nginx.org 官网推荐如下的配置,也可以直接看官网:http://nginx.org/en/docs/http/websocket.html http ...
Appium学习2-Appium-desktop的使用
安装: 下载路径:https://github.com/appium/appium-desktop/releases 选择最新的安装包即可. 使用 1.点击打开应用程序,进入到配置项. 2.配置以下信 ...
H5 使用input标签上传图片给后台
html代码: <div class="hpk-showimg">  <div class="idcardup&q ...
linux - 查看是否安装 apache 以及 apache 版本
命令 apachectl -v httpd -v 备注:这两个命令的作用一样结果
树莓派操作案例1-使用python GPIO+TB6612驱动步进电机
原理图: 接口说明 A控制信号输入------PWMA VM ------电机驱动电压输入端(4.5V-15V) A电机输入端2 ------AIN2 ...
ETag使用
关于ETag相关知识: https://blog.csdn.net/kikikind/article/details/6266101 https://blog.csdn.net/jkxiaoxing ...

JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

根据标签名获取元素

根据类名获取元素 H5 新增

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

获取特殊元素(body, html)

事件

事件三要素

常见的鼠标事件

操作元素

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

元素属性操作

表单元素属性

样式属性

自定义属性

排他思想

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

随机推荐

热门专题