JavaScript 获取元素及事件_js 获取元素所有事件-优快云博客

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/106843461

本文详细介绍了JavaScript中获取元素的各种方法，包括使用ID、内容、属性、样式和类名等，并探讨了事件的基本概念、事件绑定、事件处理函数以及各种类型的事件，如鼠标、键盘和剪贴板事件。同时，还讲解了事件对象、冒泡和捕获机制，以及this在事件中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用ID获取元素对象

document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null

获取或设置元素内容

元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签

<div id="zxw">id选择器</div>
<script>
    var zxw = document.getElementById("zxw");
    alert(zxw);//获取
    zxw.innerText = "设置新内容";
</script>

元素对象.innerHTML= “文本”：返回或设置标签内的HTML内容，包含HTML标签

<div id="zxw">id选择器</div>
<script>
    var zxw = document.getElementById("zxw");
     alert(zxw);//获取
    zxw.innerText = "<b>设置新内容</b>";
</script>

获取或设置元素属性

元素对象.属性名 = “属性值”;：获取或设置元素属性

    <input type="text" id="zxw" value="设置元素属性">
    <script>
        var zxw = document.getElementById("zxw");
        // 获取元素属性
        alert(zxw.id);
        alert(zxw.type);
        alert(zxw.value);
        // 设置元素属性
        zxw.type = "button";
        zxw.value = "按钮";
        // 添加元素属性
        zxw.title = "我是添加的属性";
    </script>

通用方法获取或设置元素属性

元素对象.getAttribute(“属性名”)：获取元素指定的属性
元素对象.setAttribute(“属性名”, “属性值”)：设置元素指定属性的值
元素对象.removeAttribute()：移除元素指定的属性

    <input type="text" id="zxw" class="ZZ" value="设置元素属性" abc="111">
    <script>
        var z = document.getElementById("zxw");
        // 获取任意属性
        alert(z.getAttribute("abc"));
        alert(z.getAttribute("class"));
        alert(z.getAttribute("value"));

        // 设置元素属性
        z.setAttribute("type", "button");
        z.setAttribute("value", "按钮");

        // 添加元素属性
        z.setAttribute("title", "新添加的属性");

		// 移除元素属性
        z.onclick = function(){
            z.removeAttribute("value");
        }
    </script>

获取或设置元素行内样式

元素对象.style.属性名 = “属性值”：获取或设置元素行内样式

    <div id="z" style="color: red; font-size: 24px;">获取和设置元素行内样式</div>
    <script>
        var z = document.getElementById("z");
        //方式一：获取元素行内样式
        // alert(z.style.cssText);
        // 方式一：设置元素行内样式,会对行内样式重置
        // z.style.cssText = "color:blue; font-size:50px;"

        // 方式二：获取元素行内某个样式
        alert(z.style.color);
        // 方式二：设置元素行内某个样式
        // 当行内样式中的属性名有"-"的，应使用驼峰命名法
        z.style.color = "blue";
        z.style.fontSize = "50px";
    </script>

添加或删除元素类名

元素对象.classList.add(“类名1”, “类名2”);：添加元素类名
元素对象.classList.remove(“类名1”, “类名2”);：删除元素类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .cz1{color: black; font-size: 16px;}
        .cz2{color: red; font-size: 24px;}
        .cz3{width: 200px; height: 100px; border: 2px solid black;}
    </style>
</head>
<body>
    <div id="z" class="cz1">添加和删除元素类名</div>
    <script>
        var z = document.getElementById("z");
        // 添加元素类名
        z.classList.add("cz2", "cz3");

        // 删除元素类名
        z.classList.remove("cz2", "cz3");
    </script>
</body>
</html>

元素类名的切换

元素对象.toggle(“类名”)：元素类名的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .cz1{color: black; font-size: 16px;}
        .cz2{color: red; font-size: 24px;}
    </style>
</head>
<body>
    <div id="z" class="cz1">添加和删除元素类名</div>
    <script>
        var z = document.getElementById("z");
        // toggle在有相同类名时执行删除，没有相同类名时执行添加
        z.classList.toggle("cz2");

        // 强制执行添加或删除
        // 参数为true时，执行添加
        // 参数为false时，执行删除
        z.classList.toggle("cz2", true);
    </script>
</body>
</html>

使用类名获取元素对象

document.getElementsByClassName(“类名”);：返回文档中所有指定类名的一组元素，而不是一个元素；可以把它当做数组进行处理

<div id="z1" class="cz1">使用类名获取元素1</div>
    <div id="z2" class="cz1">使用类名获取元素2</div>
    <div id="z3" class="cz1">使用类名获取元素3</div>
    <div id="z4" class="cz1">使用类名获取元素4</div>
    <div id="z5" class="cz1">使用类名获取元素5</div>
    <script>
        // 返回文档中所有指定类名的一组元素，而不是一个元素
        // 可以把它当做数组进行处理
        var z = document.getElementsByClassName("cz1");
        // console.log(z);

        // 给某个元素设置样式
        z[0].style.color = "red";
        z[2].style.color = "green";
    </script>

使用标签或name属性获取元素对象

document.getElementsByTagName(“标签名”);：返回文档中所有指定标签的一组元素，而不是一个元素；可以把它当做数组进行处理

    <div id="z1">使用标签获取元素1</div>
    <p id="z2">使用标签获取元素2</p>
    <div id="z3">使用标签获取元素3</div>
    <p id="z4">使用标签获取元素4</p>
    <div id="z5">使用标签获取元素5</div>
    <script>
        var z = document.getElementsByTagName("p");
        z[0].style.color = "red";
        z[1].style.color = "blue";
    </script>

document.getElementsByName("标签名");：返回文档中所有指定Name的一组元素，而不是一个元素；可以把它当做数组进行处理

    <div id="z1" name = "cz">使用name获取元素1</div>
    <p id="z2">使用name获取元素2</p>
    <div id="z3" name = "cz">使用name获取元素3</div>
    <p id="z4">使用name获取元素4</p>
    <div id="z5" name = "cz">使用name获取元素5</div>
    <script>
        var z = document.getElementsByName("cz")
        z[0].style.color = "blue";
        z[1].style.color = "red";
        z[2].style.color = "orange";   
    </script>

使用CSS选择器获取元素对象

document.querySelectorAll(“css选择器”);：返回文档中匹配指定css选择器的所有元素

document.querySelector(“css选择器”);：返回文档中匹配指定css选择器的第一个元素

    <p class="zzz">使用css选择器获取元素0</p>
    <div id="z1" class="zzz">
        <p class="zzz">使用css选择器获取元素2</p>
        <div class="zzz">使用css选择器获取元素3</div>
        <p class="zzz">使用css选择器获取元素4</p>
        <div class="zzz">使用css选择器获取元素5</div>
    </div>
    <script>
        var z = document.querySelectorAll("#z1 p");
        for (var i = 0; i < z.length; i++){
            z[i].style.color = "red";
        }
        
        var z = document.querySelector("#z1 p");
        z.style.color = "blue";
    </script>

事件

描述

事件是在一些特定的动作发生时所发出的信号，JavaScript中的事件是可以被JavaScript侦测到的行为
网页中的每个元素都可以产生某些事件。比方说，我们可以在用户点击某些按钮时产生一个onClick事件来触发某个函数
事件可以是浏览器行为，也可以是用户行为

事件绑定

方式一： 行内绑定，在开始标签中绑定，把事件当作元素属性

语法：事件名 = “执行的函数()”
缺点：结构+样式+行为都绑定在同一个标签中，不利于后期维护

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        #zzz{
            width: 500px; height: 300px;
            background: red; margin: 0 auto;
            color: white; font-size: 30px;
        }
    </style>
    <script>
       function abc(){
           document.getElementById("zzz").innerHTML = Math.random();
       }
        
    </script>
</head>
<body>
    <div id="zzz" onclick="abc()"></div>
</body>
</html>

方式二： 动态绑定

语法：对象.事件 = 匿名函数（匿名函数中是要执行的函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        #zzz{
            width: 500px; height: 300px;
            background: red; margin: 0 auto;
            color: white; font-size: 30px;
        }
    </style>
    <script>
       window.onload = function(){
           var zzz = document.getElementById("zzz");
           zzz.onclick = function(){
                zzz.innerHTML = Math.random();
           }
       }  
    </script>
</head>
<body>
    <div id="zzz"></div>
</body>
</html>

方式三： 事件监听

语法：对象.addEventListenter(事件名（字符串），执行函数，布尔值（可选）);：添加事件

语法：对象.removeEventListenter(事件名（字符串），执行函数，布尔值（可选）);：移除事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        #zzz{
            width: 500px; height: 300px;
            background: red; margin: 0 auto;
            color: white; font-size: 30px;
        }
    </style>
    <script>
        function sjs(){
            document.getElementById("zzz").innerHTML = Math.random();
        }
        function sc(){
            document.getElementById("zzz").removeEventListener("mousemove", sjs);
        }
       window.onload = function(){
        document.getElementById("zzz").addEventListener("mousemove",sjs);
        document.getElementById("zzz").addEventListener("click",sc);
       }  
    </script>
</head>
<body>
    <div id="zzz"></div>
</body>
</html>

事件处理函数

鼠标事件

onclick：鼠标点击对象事件（当return事件函数，事件函数返回的是true时，将继续操作；当返回是false时，将中断操作）
ondblclick：鼠标双击对象事件
onmousedown：鼠标按下对象事件
onmouseup：鼠标松开对象事件
onmousemove：鼠标移动对象事件
mouseover：鼠标移入对象事件
mouseout：鼠标移出对象事件
contextmenu：鼠标右键单击事件

    <!-- 事件处理函数 -->
    <div id="div1"></div><br>
    <input type="button" id="btn1" value="myFun1" ondblclick="myFun1()">
    <input type="button" id="btn2" value="myFun2" >
    <input type="button" id="btn3" value="myFun2">
    <script>
        var div1 = document.getElementById("div1");
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");

        function myFun1(){
            div1.innerHTML = "鼠标双击事件";
            div1.style.border = "5px solid blue";
        }
        function myFun2(){
            div1.innerHTML = "鼠标按下事件";
            div1.style.border = "5px solid blue";
        }
        function myFun3(){
            div1.innerHTML = "鼠标松开事件";
            div1.style.background = "orange";
            div1.style.border = "5px solid green";
        }
        function myFun4(){
            div1.innerHTML = "鼠标移入事件";
            div1.style.border = "5px solid blue";
        }
        function myFun5(){
            div1.innerHTML = "鼠标移出事件";
            div1.style.border = "5px solid green";
        }
        function myFun67(){
            div1.innerHTML = "在div中点击了右键";
            div1.style.background = "blue";
        }

        //鼠标按下事件
        div1.onmousedown = myFun2;
        //鼠标松开事件
        div1.onmouseup = myFun3;
        //鼠标移入事件
        div1.addEventListener("mouseover", myFun4);
        //鼠标移出事件
        div1.addEventListener("mouseout", myFun5);
        //鼠标在div中右键
        // div1.addEventListener("contextmenu", myFun6);
        div1.addEventListener("contextmenu", function(){
            div1.innerHTML = "在div中点击了右键";
            div1.style.background = "blue";
        });
    </script>

键盘事件

onkeydown：某个键盘按键按下
onkeyup：某个键盘按键松开
onkeypress：某个键盘按键被按下并松开
onkeydown与onkeypress的区别
1、一个放开一个没有放开，onkeydown先于onkeypress发送
2、我们每敲击一下键盘这三个事件会依次发生：onkeydown–onkeypress–onkeyup
3、onkeypress事件不适用于系统按键（如：Alt、Ctrl、Shift、ESC）
4、onkeydown：是在用户按下任何键盘键时发生。监听一个用户是否按下按键请用onkeydown事件，所有浏览器都支持onkeydown
5、键盘事件的event对象中包含一个keyCode和charCode属性，onkeydown和onkeyup表示你按下的具体的键，通过keyCode返回ASCII码；而onkeypress表示你按下的字符，识别大小写字母，通过charCode返回Unicode码

剪贴板事件

onpaste：事件在用户向元素中粘贴文本时触发
oncopy：事件在用户拷贝元素上的内容时触发
oncut：事件在用户剪切元素内容时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>禁止复制和粘贴</title>
</head>
<body>
    <form action="" name="myForm">
        <p><input type="text" name="copy" value="禁止复制和粘贴"></p>
        <p><input type="text" name="paste"></p>
    </form>

    <script>
        var noCopy = document.forms["myForm"].copy;
        noCopy.oncopy = function(){
            alert("该内容禁止复制！");
            return false;//false为阻止复制
        }
        noCopy.onpaste = function(){
            alert("禁止粘贴内容！");
            return false;
        }
    </script>
</body>
</html>

其他事件

onload：一个页面或一幅图像完成加载后，执行某事件
onunload：用户退出页面后，执行某事件
onabort：图像的加载被中断，执行某事件
onblur：元素失去焦点，执行某事件
onfocus：元素获得焦点，执行某事件
onchange：域的内容被改变，执行某事件
onerror：在加载文档或图像时发生错误，执行某事件
onselect：文本被选中，执行某事件
onreset：重置按钮被点击后，执行某事件
onscroll：当文档被滚动时，执行某事件

事件的对象

在触发某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息

type：获取事件类型
target：获取事件目标来源（某标签）
clientX：返回当事件触发时，鼠标指针在浏览器内的水平坐标
clientY：返回当事件触发时，鼠标指针在浏览器内的垂直坐标
screenX：返回当事件触发时，鼠标指针在屏幕内的水平坐标
screenY：返回当事件触发时，鼠标指针在屏幕内的垂直坐标
offsetX：返回当事件触发时，鼠标指针在元素内的X坐标
offsetY：返回当事件触发时，鼠标指针在元素内的Y坐标
keyCode：事件属性，返回按下键盘字符的Unicode编码，在火狐浏览器的onkeypress事件中无效
which：返回onkeypress事件触发的键的值的字符代码，或者onkeydown或onkeyup事件的键的代码；注：在不兼容情况下可使用var x = event.which || event.keyCode;
ctrlKey：返回当事件触发时，“Ctrl”是否被按下
altKey：返回当事件触发时，“Alt”是否被按下
shiftKey：返回当事件触发时，“Shift”是否被按下
button：返回当事件触发时，哪个鼠标按钮被点击
1、button：事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击
2、event.button = 0 | 1 |
3、0、1、2 分别代表左中右三个键，但是在IE里左中右三个键对应的数字为1 4 2
scrollLeft：设置或返回区位于对象左边界和窗口中目前可见内容的最左端之间的距离（就是滚动条离左边界的距离）
scrollTop：设置或返回滚动条离最顶端之间的距离
scrollHeight：获取对象的滚动高度
scrollwidth：获取对象的滚动宽度
1、document.documentElement.scrollTop || document.body.scrollTop垂直方向滚动的值

事件的冒泡和捕获

事件的冒泡：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发
1、事件冒泡可以形象地比喻为一颗石头投入水中，泡泡会一直从水底冒出水面，也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象
事件的捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素
1、事件捕获时，父级元素先触发，子级元素后触发
可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡
不是所有事件都能冒泡，例如：blur、focus、load、unload
stopPropagation()：阻止事件冒泡
preventDefault()：阻止事件的默认行为

this的应用

在事件中this指向当前正在操作的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .zzz{
            width: 200px; height: 200px; float: left;
            background: red; margin-left: 10px;
        }
    </style>
    <script>

       window.onload = function(){
            var zzz = document.getElementsByClassName("zzz");
            for (var i = 0; i < zzz.length; i++){
                zzz[i].onclick = function(){
                    // 在事件中this指向当前正在操作的元素
                    this.style.background = "green";
                }
            }
            
       }  
    </script>
</head>
<body>
    <div class="zzz"></div>
    <div class="zzz"></div>
    <div class="zzz"></div>
    <div class="zzz"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .zzz{
            width: 200px; height: 200px; float: left;
            background: red; margin-left: 10px;
        }
    </style>
    <script>
        function abc(a){
            a.style.background = "green";
            a.style.height = "300px";
        }

       window.onload = function(){
            var zzz = document.getElementsByClassName("zzz");
            for (var i = 0; i < zzz.length; i++){
                zzz[i].onclick = function(){
                // 在事件中this指向当前正在操作的元素
                    abc(this);
                }
            }
        }  
    </script>
</head>
<body>
    <div class="zzz"></div>
    <div class="zzz"></div>
    <div class="zzz"></div>
    <div class="zzz"></div>
</body>
</html>

事件监听会自动转入正在操作的元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .zzz{
            width: 200px; height: 200px; float: left;
            background: red; margin-left: 10px;
        }
    </style>
    <script>
        function abc(){
            this.style.background = "green";
            this.style.height = "300px";
        }

       window.onload = function(){
            var zzz = document.getElementsByClassName("zzz");
            // 事件监听会自动传入正在操作的元素对象
            for (var i = 0; i < zzz.length; i++){
                zzz[i].addEventListener("click", abc);
            }
            
       }  
    </script>
</head>
<body>
    <div class="zzz"></div>
    <div class="zzz"></div>
    <div class="zzz"></div>
    <div class="zzz"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .zzz{
            width: 200px; height: 200px; float: left;
            background: red; margin-left: 10px;
        }
    </style>
    <script>
        function abc(a){
            a.style.background = "green";
            a.style.height = "300px";
        }
    </script>
</head>
<body>
    <!-- 事件会自动转入正在操作的元素对象 -->
    <div class="zzz" onclick="abc(this)"></div>
    <div class="zzz" onclick="abc(this)"></div>
    <div class="zzz" onclick="abc(this)"></div>
    <div class="zzz" onclick="abc(this)"></div>
</body>
</html>