DOM基础操作（一）

最新推荐文章于 2023-04-20 16:41:03 发布

LyaJpunov

最新推荐文章于 2023-04-20 16:41:03 发布

阅读量419

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43903639/article/details/121591442

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细讲解了如何使用JavaScript通过DOM操作获取元素、修改元素属性，以及利用自定义属性实现TAB切换实例。涉及getElementById、getElementsByTagName、getElementsByClassName，以及自定义属性的获取和设置方法。

摘要由CSDN通过智能技术生成

获取元素

/*根据ID获取元素,返回元素对象，没有返回none*/ 
/*根据标签名获取元素，返回元素对象的集合，数组的形式，没有返回空的数组*/
/*根据类名获取元素*/
/*返回指定选择器的第一个元素对象*/
/*返回指定选择器的第元素对象列表*/

<script>
    var abs = document.getElementById('abs');
    console.log(abs);
    console.log(typeof abs);
    //打印返回的对象，更好的查看对象的属性和方法
    console.dir(abs);

    var abs = document.getElementsByTagName('li');
    var abs = document.getElementsByClassName('abs');
    //返回一个元素
    var abs = document.querySelector('.abs');
    var abs = document.querySelector('#abs');
    //返回所有元素对象
    var abs = document.querySelectorAll('.abs');
    //获取特殊元素body 和 html
    var bodyEle = document.body;
    var htmlEle = document.documentElement;
</script>

事件基础

// 时间可以被理解为触发-响应的机制
// 点击一个按钮 弹出一个对话框
// 事件三要素 事件源 事件类型 事件处理程序
// 事件源：按钮 事件类型：鼠标点击 事件处理程序：通过函数赋值的形式进行
// var btn_1 = document.getElementById('button_1');
// btn_1.onclick = function(){
//     alert('点击成功');
// }
// 常见鼠标事件：鼠标经过触发 鼠标离开触发 获得鼠标焦点触发 离开鼠标焦点触发

根据时间确定内容实例

<body>
    <img src="./a.jpg" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var hour = date.getHours();
        if(hour < 12){
            img.src = './a.jpg';
            div.innerHTML = '早上好！'
        }
        else if(hour < 18 && hour>=12){
            img.src = './a.jpg';
            div.innerHTML = '下午好！'
        }
        else{
            img.src = './a.jpg';
            div.innerHTML = '晚上好！'
        }
    </script>
</body>

修改元素属性

修改css格式，这里以生成精灵图为例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin: 250px auto;
            ;
        }

        .box li {
            float: left;
            width: 50px;
            height: 50px;
            margin: 25px;
            list-style: none;
            /* background-color: red; */
            background: url(../img/a.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundPosition = '0 ' + (-50) * i + 'px';
        }
    </script>
</body>

</html>

输入框实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            color: #999;
            outline: none;
            border: 0;
            border-bottom: 1px #ccc solid;

        }
    </style>
</head>

<body>

    <input type="text" value="手机">
    <!-- 获取元素 -->
    <!-- 注册事件，获得焦点 -->
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            if (this.value == "手机") {
                this.value = '';
            }
            this.style.color = 'black'
        }
        text.onblur = function () {
            if (this.value == '') {
                this.value = "手机";
            }
            this.style.color = '#ccc'
        }
    </script>
</body>

</html>

通过修改类名来修改元素样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .change {
            background-color: blanchedalmond;
            color: blue;
        }
    </style>
</head>

<body>
    <div class>改变</div>
    <script>
        var text = document.querySelector('div');
        text.onclick = function () {
            this.className = 'change';
        }
    </script>
</body>

</html>

密码校验实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .register {
            width: 500px;
            height: 50px;
            margin: 0 auto;
            border-bottom: 1px solid #ccc;
            background-color: blueviolet;
        }

        .register input {
            width: 200px;
            height: 49px;
            margin: 0;
            border: none;
            outline: none;
            float: left;
            color: #ccc;

        }

        .error {
            /* width: 300px; */
            float: left;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="text" value="请输入密码">
        <div class="error">
            密码的长度在6-12位之间
        </div>
    </div>
    <script>
        var psw = document.querySelector('.error');
        psw.onblur = function () {
            if (psw.length > 12 || psw.length < 6) {
                psw.style.color = 'red'
            }
        }
    </script>
</body>

</html>

全选全不选实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_th">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" class="j_td_1">
                </td>
                <td>毛巾</td>
                <td>20</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="j_td_1">
                </td>
                <td>手帕</td>
                <td>40</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 表格案例
        var j_th = document.getElementById('j_th');
        var j_td = document.querySelectorAll('.j_td_1');
        j_th.onclick = function(){
            for(var i=0;i<j_td.length;i++){
                j_td[i].checked = this.checked;
            }
        }
        for(var j=0;j<j_td.length;j++){
            j_td[j].onclick = function(){
                temp = true;
                for(var i = 0;i<j_td.length;i++){
                    if(!j_td[i].checked){
                        temp = false;
                        break;
                    }
                }
                j_th.checked = temp;
            }
        }
        
    </script>
</body>
</html>

鼠标点击生成不同的模块实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            height: 1000px;
            width: 750px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: antiquewhite;
        }

        .tab_list li {
            float: left;
            height: 50px;
            width: 150px;
            list-style-type: none;
            background-color: blueviolet;
        }

        .tab_list li a {
            line-height: 50px;
            font-size: 20px;
            color: white;
            display: block;
            text-align: center;
            text-decoration: none;
        }

        #first {
            background-color: brown;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="list" id="first"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                第1个商品介绍模块
            </div>
            <div class="item">
                第2个商品介绍模块
            </div>
            <div class="item">
                第3个商品介绍模块
            </div>
            <div class="item">
                第4个商品介绍模块
            </div>
            <div class="item">
                第5个商品介绍模块
            </div>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var item = document.querySelectorAll('.item')
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].id = '';
                    item[i].style.display = 'none'
                }
                this.id = 'first';
                var index = this.getAttribute('index');
                item[index].style.display = 'block'
            }
        }
    </script>
</body>

</html>

利用DOM的方法获取元素

获取元素属性

主要针对自定义属性，自带属性可以直接获取

<ol>
	<li class="li_1" index = 1 id = 'time'></li>
</ol>
<script>
	//获取属性
	var li = document.getElementsByClassName('li_1')
	li.getAttribute('id')
</script>

设置元素属性值

主要针对自定义属性，自带属性可以直接修改

<ol>
	<li class="li_1" index = 1 id = 'time'></li>
</ol>
<script>
	//获取属性
	var li = document.getElementsByClassName('li_1')
	li.setAttribute('index',2)
</script>

自定义属性

html5规定，只要是data开头的属性名都是自定义属性

同时新增获取自定义属性的方法 elements.dataset.index获取自定义属性data-index

同时新增获取自定义属性的方法 elements.dataset['index']获取自定义属性data-index

这两种新增方法必须以data-开头，如果自定义属性中有多个-链接的单词，采取驼峰命名法如data-last-time

elements.dataset.lastTime或者elements.dataset['lastTime']

TAB栏切换实例

自定义属性的一个实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            height: 1000px;
            width: 750px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: antiquewhite;
        }

        .tab_list li {
            float: left;
            height: 50px;
            width: 150px;
            list-style-type: none;
            background-color: blueviolet;
        }

        .tab_list li a {
            line-height: 50px;
            font-size: 20px;
            color: white;
            display: block;
            text-align: center;
            text-decoration: none;
        }

        #first {
            background-color: brown;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="list" id="first"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
                <li class="list"><a href="#">商品介绍</a></li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                第1个商品介绍模块
            </div>
            <div class="item">
                第2个商品介绍模块
            </div>
            <div class="item">
                第3个商品介绍模块
            </div>
            <div class="item">
                第4个商品介绍模块
            </div>
            <div class="item">
                第5个商品介绍模块
            </div>
        </div>
    </div>
    <script>
       	//通过设定自定义属性知道我当前点了哪个位置
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var item = document.querySelectorAll('.item')
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index',i);
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].id = '';
                    item[i].style.display = 'none'
                }
                this.id = 'first';
                var index = this.getAttribute('index');
                item[index].style.display = 'block'
            }
        }
    </script>
</body>

</html>