DOM一（获取元素，事件基础，操作元素）

最新推荐文章于 2024-04-26 23:23:38 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-04-26 23:23:38 发布

阅读量1.1k

点赞数 4

分类专栏： Javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/shao_xuan_/article/details/121538552

版权

Javascript 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

获取元素

根据id获取元素

document.getElementById('id')方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。

根据标签获取元素

根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。

document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');

根据标签获取元素

由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。

getElementsByTagName()方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。

根据name获取元素

document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。

document.getElementsByName('name名');

HTML5新增的获取方式

HTML5中为document对象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：这三种方式在使用时需要考虑到浏览器的兼容性问题。

根据类名获取

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。

querySelector()和querySelectorAll()

querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。

document对象的属性

document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等，document对象的常用属性如下表：
在这里插入图片描述

练习

<!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>
    <p class="p2">大学</p>
    <p class="p2">大学</p>
    <p id="p2">大学</p>
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
    </ul>
    <script>
        var p = document.getElementsByClassName('p2');
        console.log(p);
        var ps = document.querySelector('.p2');//根据class属性选择第一个元素

        console.log(ps);

        var px = document.querySelector('#p2');//通过id选择

        console.log(px);

        var pl = document.querySelector('li');//根据标签名选择第一个

        console.log(pl);

        var pls = document.querySelectorAll('li')//选择所有的元素

        console.log(pls);

        console.log(document.documentElement)
    </script>
</body>
</html>

在这里插入图片描述

事件基础

事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。

事件三要素

事件三要素是指事件源、事件类型和事件处理程序这3部分。名词解释如下：

事件源：触发事件的元素（谁触发了事件）

事件类型：如 click 单击事件（触发了什么事件）

事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）

练习

<!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>
    <button id="flower">天空</button>
    <button id='grass'>草地</button>
    <br>
    <img src="../1.jpg" alt="" title="天空">
    <script>
        //
        var flower = document.getElementById('flower');
        var grass = document.getElementById('grass');
        var img = document.getElementsByTagName('img');
        console.log(img);
        flower.onclick = function(){
            img[0].src = '../2.jpg';
            img[0].title = '天空';
        }
        grass.onclick = function(){
            img[0].src = '../1.jpg';
            img[0].title = '草地';
        }
    </script>
</body>
</html>

在这里插入图片描述

操作元素

操作元素内容

在前面的内容中已经讲解了获取元素的几种方式，接下来将利用DOM提供的属性实现对元素内容的操作。常用的属性如下表所示：
在这里插入图片描述
innerHTML在使用时会保持编写的格式以及标签样式。

innerText去掉所有格式以及标签的纯文本内容。

textContent属性在去掉标签后会保留文本格式。

练习

<!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>
    <input type="text" id = 'username'>
    <button id = 'but' onclick="f1()">单击按钮</button>
    <div id = 'd1'></div>
    <script>
        function f1(){
            var name = document.getElementById('username').value;

            document.getElementById("d1").innerHTML = name;
        }
    </script>
</body>
</html>

在这里插入图片描述

操作元素属性

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。

练习

<!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>
<style>
    #box{
        position: relative;
        width: 400px;
        border: 1px solid #000;
        margin: 100px auto;
        padding: 2px;
    }
    #box input{
        width: 370px;
        height: 30px;
        border: 0;;
        outline: none;
    }
    #box img{
        position: absolute;
        top: 4px;
        right: 6px;
        width: 24px;
        cursor: pointer;
        
    }
</style>
<body>
    <div id = 'box'>
        <label>
            <img src="../imag/close.png" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function(){
            if(flag==0){
                pwd.type = 'text';
                eye.src = '../imag/open.png';
                flag = 1;
            }else{
                pwd.type = 'password';
                eye.src = '../imag/close.png';
                flag = 0;
            }
        }
        
    </script>
</body>
</html>

在这里插入图片描述

操作元素样式

操作元素样式的两种方式：一种是操作style属性，另一种是操作className属性。

操作style属性

元素对象的样式，可以直接通过“元素对象.style.样式属性名”的方式操作。样式属性名对应CSS样式名，但需要去掉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>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        box.style.height = '100px';
        box.style.width = '100px';
        box.style.backgroundColor = 'red';
        box.style.transform = 'rotate(30deg)';
    </script>
</body>
</html>

在这里插入图片描述

操作className属性

在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为“元素对象.className”。访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。

练习

<!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>
    <style>
        .first{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .change{
            width: 100px;
            height: 100px;
            background-color: powderblue;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
<body>
    <div class="first">西安</div>
    <script>
        var div = document.querySelector('div');

        div.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>
</head>
<style>
    #box{
        width: 500px;
        border: 1px solid white;
        margin: auto;
        text-align: left;
    }
</style>
<body>
    <div id="box">
        <label for="">&nbsp;用&nbsp;户&nbsp;名</label>&nbsp;
        <input type="text" id="input1" onchange="fn()">
        <span id="span1"></span>
        <br><br>
        <label for="">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
        <input type="password" id="input2" onchange="fa()">
        <span id="span2"></span>
        <br><br>
        <label for="">确定密码</label>
        <input type="password" id="input3" onchange="fb()">
        <span id="span3"></span>
        <br><br><br>
        <button onclick="fc()" style="margin-left: 200px;">注册</button>
    </div>
    <script>
        var input1 = document.getElementById('input1');
        var span1 = document.getElementById('span1');
        

       function fn(){
            if(input1.value =='abcd'){
                span1.style.color = 'green';
                span1.innerText = '用户名合法';
                return true;
            }else{
                span1.style.color = 'red';
                span1.innerText = '用户名非法';
                return false;
            }
        }


        var input2 = document.getElementById('input2');
        var span2 = document.getElementById('span2');
        function fa(){
            if(input2.value.length>=3&&input2.value.length<=8){
                
                span2.style.color = 'green';
                span2.innerText = '密码合格';
                return true;
            }else{
                span2.style.color = 'red';
                span2.innerText = '密码不合格';
                return false;
            }
        }


        var input3 = document.getElementById('input3');
        var span3 = document.getElementById('span3');
        function fb(){
            if(input2.value===input3.value){
                span3.style.color = 'green';
                span3.innerText = '密码验证成功';
                return true;
            }else{
                span3.style.color = 'red';
                span3.innerText = '密码验证失败';
                return false;
            }
        }


        function fc(){
            if(fn()&&fb()&&fa()){
                alert('注册成功');
            }else{
                alert('注册失败');
            }
        }
    </script>
</body>
</html>