DOM事件的元素属性操作

最新推荐文章于 2022-04-10 21:33:57 发布

程序媛Render

最新推荐文章于 2022-04-10 21:33:57 发布

阅读量404

点赞数 4

分类专栏：前端学习 JavaScript 文章标签： dom js

本文链接：https://blog.csdn.net/qq_46492364/article/details/117253429

版权

前端学习同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 1 订阅

订阅专栏

文章目录

一、事件
二、非表单元素属性操作
三、表单元素属性
- 1.表单元素
四、自定义属性操作
- 1.自定义属性
五、style样式属性操作
- 1.style样式属性
- 2.样式属性操作选择
总结

# 前言

这部分学习DOM的一些基本事件。

一、事件

绑定事件的三要素：
（1）事件源，给谁绑定事件
（2）事件类型，绑定什么类型的事件（click单击事件）
（3）事件函数，事件发生后执行什么内容，写在函数内部
常用事件监听方法：
（1）绑定HTML元素属性
（2）绑定DOM对象属性

<!-- html元素内部属性 -->
<!-- <input type="button" value="点我有惊喜" onclick="alert('恭喜你，中奖了')"> -->

<input type="button" value="点我有惊喜" id="btn">
<script>
    //DOM对象内部属性
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("很遗憾，你没有中奖");
    }
</script>

常见的鼠标事件
在这里插入图片描述

二、非表单元素属性操作

1.非表单元素

调用方式:元素对象打点调用属性名，例如obj.href。（例如:href、title、id、src等。）
注意:部分的属性名跟关键字和保留字冲突，会更换写法。
class → className
for → htmlFor
rowspan→rowSpan

<a href="https://www.baidu.com/" id="link" title="跳转到百度页面">跳转</a>
<img src="images/a.jpg" alt="美女" class="pic" id="pic">
<script>
    //获取元素
    var link = document.getElementById("link");
    var pic = document.getElementById("pic");
    //调用元素中的属性，从而操作HTML中的标签属性
    console.log(link.id);//只可以读，不可以更改
    console.log(link.title);
    console.log(link.href);
    console.log(pic.className);
    console.log(pic.alt);
    //切换图片
    pic.src= "images/b.jpg";
</script>

案例1：点击按钮切换图片案例

<!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="button" value="点击" id="btn"><br>
    <img src="images/a.jpg" id="pic">
    <script>
        //获取元素
        var btn = document.getElementById("btn");
        var pic = document.getElementById("pic");
        //定义一个变量，如果值为1代表此时是a图片，如果是2代表是b图片
        var a_b = 1;
        //点击切换图片事件
        btn.onclick = function () {
            if (a_b == 1) {
                pic.src = "images/b.jpg";
                a_b = 2;
            } else {
                pic.src = "images/a.jpg";
                a_b = 1;
            }
        };
    </script>
</body>
</html>

案例2：点击按钮显示隐藏元素案例

<!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;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <input type="button" id="btn" value="点击隐藏">
    <div id="box"></div>
    <script>
        //获取元素
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        //点击切换隐藏显示事件
        btn.onclick = function () {
            //判断当前是显示还是隐藏
            if (btn.value == "点击隐藏") {
                box.className = "hide";
                btn.value = "点击显示";
            } else {
                box.className = "show";
                btn.value = "点击隐藏";
            }
        }
    </script>
</body>
</html>

2.事件函数的内部this

在事件函数内部有一个this，指向事件源。
不同函数内部this的指向：
（1）普通函数：window对象
（2）构造函数：生成的实例对象
（3）对象的方法：指的是对象的本身
（4）事件函数：指向事件源
案例3：美女画廊

<!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>
    <h2>美女画廊</h2>
    <div id="imagesgallery">
        <a href="images/1.jpg" title="美女A">
            <img src="images/1-small.jpg" width="100px">
        </a>
        <a href="images/2.jpg" title="美女B">
            <img src="images/2-small.jpg" width="100px">
        </a>
        <a href="images/3.jpg" title="美女C">
            <img src="images/3-small.jpg" width="100px">
        </a>
        <a href="images/4.jpg" title="美女D">
            <img src="images/4-small.jpg" width="100px">
        </a>
    </div>
    <div style="clear: both;"></div>
    <img src="images/placeholder.png" id="image" width="450px">
    <p id="des">选择一个图片</p>
    <script>
        //获取元素
        var imagesgallery = document.getElementById("imagesgallery");
        var link = imagesgallery.getElementsByTagName("a");
        var image = document.getElementById("image");
        var des = document.getElementById("des");


        //遍历数组添加点击事件
        for (var i = 0;i < link.length;i++) {
            link[i].onclick = function () {
                //更改image内部src属性值切换图片
                image.src = this.href;
                //更改des内的文字内容
                des.innerText = this.title;
                //取消a标签的跳转效果
                return false;
            };
        }
    </script>
</body>
</html>

3.获取标签内部内容的属性

innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。
可以通过两个属性给双标签内部去更改内容:
innerHTML 设置属性值，有标签的字符串，会按照HTML 语法中的标签加载。innerText设置属性值，有标签的字符串，会按照普通的字符加载。
innerText:在设置纯字符串时使用。
innerHTML:在设置有内部子标签结构时使用。

<div id="box">
    这是一个div标签
    <span>这是一个sapn标签</span>
</div>
<script>
    //获取元素
    var div = document.getElementById("box");
    //调用标签内部内容
    console.log(box.innerHTML);
    console.log(box.innerText);

    //设置标签内容
    div.innerText = "<h2>js 学习js </h2>";
    // div.innerHTML = "<h2>js 学习js </h2>";
</script>

三、表单元素属性

1.表单元素

在这里插入图片描述
注意:在DOM 中元素对象的属性值只有一个时，会被转成布尔值显示。例如:txt. disabled = true ;

<input type="button" value="按钮" id="btn"><br>
<input type="text" id="txt" disabled="disabled">
<select id="list">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>
<script>
  // 获取元素
  var btn = document.getElementById("btn");
  var txt = document.getElementById("txt");
  var list = document.getElementById("list");
  var opts = list.getElementsByTagName("option");

  //调用value
  console.log(btn.value);
  console.log(txt.value);
  console.log(opts[0].value);
  console.log(opts[0].innerHTML);

  //设置value
  btn.value = "点击";
  txt.value = "请选择地址";

  //表单元素特有的一些属性
  console.log(txt.disabled);
  btn.disabled = "true";
  </script>

案例1：检测用户名和密码案例
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

<!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>
        .bg {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="name"><br>    
    <input type="text" id="pw"><br>
    <input type="button" id="btn" value="提交">
    <script>
        //检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
        //获取元素
        var btn = document.getElementById("btn");
        var username = document.getElementById("name");
        var pw = document.getElementById("pw");
        //添加点击事件，如果用户名或密码输入错误就高亮显示
        btn.onclick = function () {
            //判断用户名
            if (username.value.length < 3 || username.value.length > 6) {
                username.className = "bg";
                return;
            } else {
                username.className = "";
            }
            //判断密码
            if (pw.value.length < 6 || pw.value.length > 8) {
                pw.className = "bg";
                return;
            } else {
                pw.className = "";
            }
            console.log("数据已经提交");
        };
    </script>
</body>
</html>

案例2：随机设置下拉菜单中的选中项

<!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="button" value="选择" id="btn">
    <br>
    <select id="food">
        <option>烤肉</option>
        <option>拉面</option>
        <option>麻辣烫</option>
        <option>小龙虾</option>
        <option>火锅</option>
        <option>外卖</option>
    </select>
    <script>
        //获取元素
        var btn = document.getElementById("btn");
        var food = document.getElementById("food");
        var opts = food.getElementsByTagName("option");
        //给按钮添加点击事件
        btn.onclick = function () {
            //获取到opts数组的随机下标n
            var n = Math.floor(Math.random() * opts.length);
            //将得到的数组下标的那个选项进行选中
            opts[n].selected = true;
        }
    </script>
</body>
</html>

案例3：搜索文本框案例

<!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>
        .gray {
          color: gray;
        }
    
        .black {
          color: black;
        }
      </style>
</head>
<body>
    <input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
    <input type="button" value="搜索" id="btnSearch">
    <script>
        //获取元素
        var txtSearch = document.getElementById("txtSearch");
        //添加焦点事件
        txtSearch.onfocus = function () {
            if (this.value === "请输入搜索关键字") {
                this.value = "";
                this.className = "black";
            }
        };
        //添加失去焦点事件
        txtSearch.onblur = function () {
            if (this.value == "请输入搜索关键字" || this.value == "") {
                this.value = "请输入搜索关键字";
                this.className = "gray";
            }
        };        
    </script>
</body>
</html>

案例4：反选和全选

<!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>
        * {
            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="all" />
                  </th>
                  <th>商品</th>
                  <th>价钱</th>
              </tr>
            </thead>
            <tbody id="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>
        <input type="button" value="  反 选  " id="btn">
    </div>    
    <script>
        //获取元素
        var all = document.getElementById("all");
        var tb = document.getElementById("tb");
        var tb_inputs = tb.getElementsByTagName("input");
        var btn = document.getElementById("btn");
        //1.添加全选点击事件
        all.onclick = function () {
            for (var i = 0;i < tb_inputs.length;i++) {
                tb_inputs[i].checked = this.checked;
            }
        };
        //2.单独选择子项过程
        for (var i = 0;i < tb_inputs.length;i++) {
            //给每一个子选项添加点击事件
            tb_inputs[i].onclick = function () {
                //调用函数
                allChecked();
            };
            
        }
        //反选
        btn.onclick = function () {
            for (var i = 0;i < tb_inputs.length;i++) {
                tb_inputs[i].checked = !tb_inputs[i].checked;
            }
            //调用函数
            allChecked();
        };

        //判断All是否被选中的函数
        function allChecked() {
            //定义一个变量用来表示判断是否全选 默认是true是全选
            var isAllChecked = true;
                for (var j = 0;j < tb_inputs.length;j++) {
                    //如果有一个是没选中的，就让变量变为false
                    if (tb_inputs[j].checked == false) {
                        isAllChecked = false;
                        //走到这里说明肯定不是全选，不需要再往下执行
                        break;
                    }
                }
            all.checked = isAllChecked;
        }
        
    </script>
</body>
</html>

四、自定义属性操作

1.自定义属性

getAttribute(name）获取标签行内属性
setAttribute(name,value)设置标签行内属性
removeAttribute(name)移除标签行内属性

 <div id="box" age="22" sex="male">小明</div>
 <script>
     var box = document.getElementById("box");
     //只能调用自有属性
     console.log(box.id);
     //调用自定义属性和自有属性的方法
     console.log(box.getAttribute("age"));
     //更改自定义属性值，或者添加新的自定义属性
     console.log(box.setAttribute("age","20"));
     console.log(box.setAttribute("city","haerbin"));
     //删除自定义属性
     console.log(box.removeAttribute("sex"));
 </script>

五、style样式属性操作

1.style样式属性

使用style属性方式设置的样式显示在标签行内。
element.style属性的值，是所有行内样式组成的一个样式对象。

<!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>
        .bg{
            background-color: pink;
        }
    </style>
    <script src="common.js"></script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
    <div id="box" style="width: 100px" class="bg">文字</div>
    <script>
        //调用函数获取元素
        var btn =my$("btn");
        var box =my$("box");
        //两种方式更改样式
        //1.通过更改类名的方式更改样式 className
        //2.通过对象的style属性去操作样式(只能获取行内的样式)
        // console.log(btn);
        console.log(box.style);
        console.log(box.style.width);
        //更改样式内容
        box.style.width = "200px";
        //如果使用的是复合单一属性，那么需要驼峰命名，省略-
        console.log(box.style.backgroundColor);
    </script>
</body>
</html>

样式对象可以继续点语法调用或更改css 的行内样式属性，例如width、height等属性。
注意1:类似background-color这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书写backgroundColor。
注意2:通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px等单位。

2.样式属性操作选择

如果是一条或很少的样式需要更改，那么就用style方法，如果需要的更改的样式很多，那么使用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>
    <style>
        .cls {
          width: 100px;
          height: 100px;
          background-color: pink;
        }
    </style>
    <script src="common.js"></script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
    <div id="box">文字</div>
    <script>
        // 问题：实际工作中我们应该选择哪种方法？
        // 获取元素
        var btn = my$("btn");
        var box = my$("box");
        //添加点击按钮有背景颜色的点击事件
        btn.onclick = function () {
        //1.className
        // box.className = "cls";
        //2.style
        box.style.width = "100px";
        box.style.height = "200px";
        box.style.backgroundColor = "pink";
        };

        
    </script>
</body>
</html>

案例1：开关灯案例

<!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>
    <script src="common.js"></script>
</head>
<body>
    <input type="button" id="btn" value="开灯">
    <script>
        //调用获取元素
        var btn = my$("btn");
        //添加点击按钮开关灯事件
        btn.onclick = function () {
            if (this.value === "开灯") {
                document.body.style.backgroundColor = "black";
                this.value = "关灯"; 
            } else {
                document.body.style.backgroundColor = "white";
                this.value = "开灯"; 
            }
        };
    </script>
</body>
</html>

案例2：显示隐藏二维码案例

<!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: 50px;
            height: 50px;
            background: url(images/bgs.png) no-repeat -159px -51px;
            position: fixed;
            right: 10px;
            top: 40%;
        }
        .erweima {
            position: absolute;
            top: 0;
            left: -150px;
        }
        .box a {
            display: block;
            width: 50px;
            height: 50px;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="erweima hide" id="er">
            <img src="images/456.png" alt=""/>
        </div>
    </div>
    <script src="common.js"></script>
    <script>
        //获取元素
        var box = my$("box");
        var er = my$("er");
        //添加鼠标移上事件
        box.onmouseover = function () {
            er.className = er.className.replace("hide","show");
        };
        //添加鼠标移开事件
        box.onmouseout = function () {
            er.className = er.className.replace("show","hide");
        };        
    </script>
</body>
</html>

案例3：文本框高亮显示案例

<!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"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <button id="btn">按钮</button>    
    <script>
        //获取元素
        var txts = document.getElementsByTagName("input");
        //给每个input添加焦点事件
        for (var i = 0;i < txts.length;i++) {
            txts[i].onfocus = function () {
                //排他思想：排除所有的
                for (var j = 0;j < txts.length;j++) {
                    txts[j].style.backgroundColor = "";
                }
                //改变自己
                this.style.backgroundColor = "yellow";
            }
        }
    </script>
</body>
</html>

案例4：设置元素大小和位置案例

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }  
        .new {
            position: absolute;
            left: 200px;
            top: 200px;
            width: 200px;
            height: 200px;
        }       
    </style>
</head>
<body>
    <input type="button" value="按钮" id="btn">
    <div id="box"></div>
    <script src="common.js"></script>
    <script>
        //获取元素
        var btn = my$("btn");
        var box = my$("box");
        //添加点击事件
        btn.onclick = function () {
            //两种方法
            //添加类名
            box.className = "new";
            //通过style属性值方法
            // box.style.width = "200px";
            // box.style.height = "200px";
            // box.style.top = "200px";
            // box.style.left= "200px";
            // box.style.position = "absolute";
        }
    </script>
</body>
</html>

案例5：表格隔行变色和高亮显示

<!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>
        td{
            width: 100px;
            height: 40px;
        }
    </style>
</head>
<body>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>   
    <script>
        //获取所有行的tr
        var trs = document.getElementsByTagName("tr");
        //隔行变色
        for (var i = 0;i < trs.length;i++) {
            //判断如果是偶数行为粉色，奇数行为灰色
            if (i % 2 == 0) {
                trs[i].style.backgroundColor = "pink";
            } else {
                trs[i].style.backgroundColor = "lightgray";
            }
            //定义一个变量用录默认的颜色
            var bgc;
            //鼠标移上高亮显示
                trs[i].onmouseover = function () {
                    bgc = this.style.backgroundColor;
                    this.style.backgroundColor = "skyblue";
                };
            //鼠标离开恢复默认
                trs[i].onmouseout = function () {
                    this.style.backgroundColor = bgc;
                };
        }


    </script>
</body>
</html>

案例5：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;}
        ul {
            list-style-type: none;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd {
            height: 45px;
        }
        .hd span {
            display:inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        .hd span.current {
            background-color: skyblue;
        }
        .bd div {
            height: 255px;
            background-color: skyblue;
            display: none;
        }
        .bd div.current {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="hd" id="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>
    </div>
    <script src="common.js"></script>
    <script>
        //获取元素
        var hd = my$("hd");
        var spans = hd.getElementsByTagName("span");
        var bd = my$("bd");
        var divs = bd.getElementsByTagName("div");
        //给每个选项添加鼠标移上事件
        for (var i = 0;i < spans.length;i++) {
            spans[i].index = i;
            spans[i].onmouseover = function () {
                //排他思想
                for (var j = 0;j < spans.length;j++) {
                    //排除所有，将所有的span都设置为粉色
                    spans[j].className = "";
                    divs[j].className = "";
                }
                //设置自己
                this.className = "current";
                divs[this.index].className = "current";
            };
        }
    </script>
</body>
</html>

总结

这部分学习了DOM事件的相关学习，表单属性的操作，非表单元素的操作，自定义属性的操作，style样式的操作。
在这里插入图片描述

程序媛Render

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
DOM事件的元素属性操作

文章目录一、事件1.简介2.非表单元素属性操作二、获取元素的方法1.根据id获取元素总结# 前言这部分学习DOM的一些基本事件。一、事件1.简介绑定事件的三要素：（1）事件源，给谁绑定事件（2）事件类型，绑定什么类型的事件（click单击事件）（3）事件函数，事件发生后执行什么内容，写在函数内部常用事件监听方法：（1）绑定HTML元素属性（2）绑定DOM对象属性<!-- <input type="button" va
复制链接

扫一扫