DOM（一）元素获取和元素属性操作

何时能脱坑

已于 2022-06-27 11:29:04 修改

阅读量417

点赞数 5

文章标签：前端 javascript html 学习

于 2022-06-23 17:42:49 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_59675867/article/details/125427469

版权

目录

常见的鼠标事件

自定义属性

1.点击按钮显示当前时间

2.页面密码框点击眼睛显示密码功能

3.文本框获得焦点时，里面的默认文字隐藏，失去焦点时显示文字

4.简单表单信息验证

5.鼠标移入改变列表样式

6.tab切换，点击切换显示内容

7.全选按钮（多选框按钮选中时checked=true，反之为false）

获取元素

根据id获取元素：document.getElementById('id'); 获取到唯一一个元素。

<div id="box"></div>
<script>
    var box1 = document.getElementById('box');
</script>

根据标签名获取元素：document.getElementsByTagName('标签名');获取到所有相同标签名的元素，因此结果是一个集合，存储在伪数组中。

<div>0</div>
<div>1</div>
<div>2</div>
<script>
    var box = document.getElementsByTagName('div');
    for (var i = 0; i < box.length; i++) {
            console.log(box[i]);   
        }
</script>

根据类名获取元素：document.getElementsByClassName('类名');获取所有同一类名的元素，结果存在伪数组中。

<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<script>
    var box = document.getElementsByClassName('box');
    for (var i = 0; i < box.length; i++) {
            console.log(box[i]);   
        }
</script>

获取指定选择器的第一个元素：document.querySelector();

根据指定选择器返回所有元素：document.querySelectorAll();

<div>box1</div>
<div id="box">box2</div>
<div class="box">box3</div>
<script>
    var box = document.querySelector('div');
    var boxAll = document.querySelectorAll('div');
    var boxId = document.querySelector('#box');
    var boxClass = document.querySelector('.box');
    console.log(box);
    console.log(boxAll);
    console.log('----------');
    console.log(boxId);
    console.log(boxClass);
</script>

获取特殊元素：

document.body //返回body元素

document.documentElement //返回HTML元素

常见的鼠标事件

onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

自定义属性

获取自定义属性：element.getAttribute('属性');

<div index="1"></div>
<script>
          var div = document.querySelector('div');
          console.log(div.getAttribute('index')); //结果是1
</script>

修改自定义属性：element.setAttribute('属性','值'); 原本标签内没有的自定义属性也能直接添加。

    <div index="1"></div>
    <script>
          var div = document.querySelector('div');
		  div.setAttribute("index",2);
		  console.log(div.getAttribute("index")); //结果是2
    </script>

移除属性值：element.removeAttribute('属性');

<div index="1"></div>
<script>
          var div = document.querySelector('div');
		  div.removeAttribute("index");
		  console.log(div.getAttribute("index")); //结果为null
</script>

案例练习

1.点击按钮显示当前时间

<div id="time"></div>
    <button>当前时间</button>
    <script>
        var div = document.getElementById('time');
        var btn = document.querySelector('button');
        function nowTime() {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth()+1;
            var day = time.getDate();
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();
            return year+'年'+month+'月'+day+'日'+h+':'+m+':'+s;
        }
        btn.onclick = function() {  //添加事件
            //以下为事件处理程序
            div.innerHTML = nowTime();
            setInterval( function() {  //计时器，每隔一秒执行一次
                div.innerHTML = nowTime();
            },1000);
        }
    </script>

2.页面密码框点击眼睛显示密码功能

<style>
        div{
            width: 300px;
            height: 60px;
            margin: 100px auto;
            position: relative;
        }
        input{
            width: 250px; 
            border: 0px;
            border-bottom: 1px solid;
            outline: none;
        }
        img{
            width: 24px; position: absolute;
            right: 12px; top: 0px;
        }
    </style>
    <div>
        <label for="pwd">密码</label>
        <input type="password"  id="pwd">
        <img src="img/close.png" alt="">
    </div>
    <script>
        var img = document.querySelector('img');
        var pwd = document.getElementById('pwd');
        var flag = true;  //通过flag实现点击开关切换
        img.onclick = function () {
            if(flag){
                img.src = 'img/open.png';
                pwd.type = 'text';
                flag = !flag;
            } else {
                img.src = 'img/close.png';
                pwd.type = 'password';
                flag = !flag;
            }
        }
    </script>

3.文本框获得焦点时，里面的默认文字隐藏，失去焦点时显示文字

<input type="text" class="txt" placeholder="提示性文字">
    <script>
        var inpt = document.querySelector('input');
        inpt.onfocus = function () {
            inpt.placeholder = '';
        }
        inpt.onblur = function () {
            inpt.placeholder = '提示性文字';
        }
    </script>

4.简单表单信息验证

<style>
        input{
            outline: none;
        }
        .orange{
            color: orange;
        }
        .red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>
    <input type="text" placeholder="请输入文字">
    <span></span>
    <script>
        var ipt = document.querySelector('input');
        
        var hint = document.querySelector('span');
        ipt.onfocus = function() {
            ipt.placeholder = '';
            hint.innerText = '输入6~12位数字';
            hint.className = 'orange'; //事先写好类名的样式，通过改变类名来改变样式
        }
        ipt.onblur = function() {
            ipt.placeholder = '请输入文字';
            var userId = ipt.value;
            if(userId.length >= 6 && userId.length <= 12) {
                hint.innerText = '输入内容正确';
                hint.className = 'green';
            } else {
                hint.innerText = '输入内容有误';
                hint.className = 'red';
            }
        }
    </script>

5.鼠标移入改变列表样式

<style>
    ul{
        list-style: none;
    }
    ul>li{
        width: 120px; line-height: 30px;
    }
</style>
<body>
    <ul>
        <li>不使云用个们太</li>
        <li>不使云用个们太</li>
        <li>不使云用个们太</li>
        <li>不使云用个们太</li>
        <li>不使云用个们太</li>
        <li>不使云用个们太</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('ul>li');
        for(var i = 0; i < lis.length; i++) {  //通过循环添加每一个元素的事件
            lis[i].onmouseover = function() {
                this.style.backgroundColor = 'green';
            }
            lis[i].onmouseout = function() {
                this.style.backgroundColor = '';
            }
        }
    </script>

6.tab切换，点击切换显示内容

    <style>
        *{
            margin: 0;padding: 0;
        }
        .nav>a{
            display: block;
            width: 80px;
            height: 40px; line-height: 40px;
            border: 1px solid #c6c5c5;
            text-align: center; background-color: #c6c5c5;
            color: white; text-decoration: none;
        }
        .nav{
            width: 400px;
            display: flex;
            box-sizing: border-box;
            justify-content: space-between;
            background-color: white;
        }
        .con{
            box-sizing: border-box;
            width: 400px;
            height: 100px;
            border: 1px solid rgb(190, 187, 187) ;
        }
        .con>p{
            display: none;
        }

    </style>
    <div class="nav">
        <a href="javascript:;">李的釜</a>
        <a href="javascript:;">苟中向</a>
        <a href="javascript:;">方失他</a>
        <a href="javascript:;">对身措</a>
    </div>
    <div class="con">
        <p>苦保妄学求。</p>
        <p>太明拿，论。</p>
        <p>家元仁，没。</p>
        <p>当找仍，他。</p>
    </div>
    <script>
        var nav = document.querySelector('.nav');
        var navs = nav.children;  //获取子节点
        var con = document.querySelector('.con');
        var p = con.children;
        for(var i = 0; i < navs.length; i++) {
            navs[i].setAttribute('index',i);  //用for循环设置a标签index属性
            navs[i].onclick = function() {
            for(var j = 0; j < navs.length; j++) { //排他思想
                //先将每一项的样式设为初始样式
                navs[j].style.backgroundColor = '#c6c5c5';
                p[j].style.display = 'none'; 
             }
              //再设置选中的或要改变的元素的样式
             this.style.backgroundColor = '#4eef8c';
             var index = this.getAttribute('index');//将a标签的index属性值存入变量index
             p[index].style.display = 'block';//通过index值的改变关联到要显示的p标签
            }
        }
        
    </script>

7.全选按钮（多选框按钮选中时checked=true，反之为false）

<style>
        ul{
            list-style: none;
        }
    </style>
    <div>
        <input type="checkbox" id="btnAll">
        <span>全选/取消</span>
    </div>
    <ul>
        <li><input type="checkbox" class="btn"> 洪韩修</li>
        <li><input type="checkbox" class="btn"> 帝交颜</li>
        <li><input type="checkbox" class="btn"> 可杂云</li>
        <li><input type="checkbox" class="btn"> 恼位变</li>
    </ul>
    <script>
        var btnAll = document.getElementById('btnAll');
        var lis = document.querySelectorAll('ul .btn');
        btnAll.onclick = function() {           //实现全选按钮点击效果全选和全不选
            for(var i = 0 ; i < lis.length; i++) {
                lis[i].checked = this.checked;
            }
        }
        for (var i = 0; i < lis.length; i++) {  //实现按钮都选中时全选按钮自动选中，任意一个按钮没选则全选按钮取消选中
            lis[i].onclick = function() {
                var flag = true;  
                //每点击一次就判断所有按钮是否选中
                for(var j = 0; j < lis.length; j++) {
                    if(!lis[j].checked){  //检测到一个未选中时，flag = false；结束循环，最终全选按钮状态为false及未选中
                        flag = false;
                        break;
                    }
                }
                btnAll.checked = flag;
            }
            
        }
    </script>

何时能脱坑

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
DOM（一）元素获取和元素属性操作

DOM获取元素、常用鼠标事件、自定义属性、属性操作、案例练习
复制链接

扫一扫

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。