Dom对象总结案例实操(第二十课)（一）-阿里云开发者社区

第一部分 Dom对象知识点回顾效果不去展示重点在后面的案例上

Demo1 Dom元素中的节点操作和方法操作

<!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>Dom元素的节点操作</title>
</head>
<body>
    <!-- !div元素格式 -->
    <div class="box">
        <h1>我是标题有些节点操作你知道吗</h1>
        <div class="container">我是div元素的信息</div>
        <div class="dest">我是一个段落标签</div>
        <div class="dest">我是第二个段落标签</div>
        <span>我是Span元素的镖旗</span>
    </div>
    <!-- !表格元素导行 -->
    <table>
        <tr>
            <td class="one">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="one">2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td class="one">3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td class="nav_li">我是nav_li元素</td>
            <td>2</td>
            <td>
                <li>我是li标签</li>
                <li>我是li标签</li>
                <li>我是li标签</li>
            </td>
            <td class="one">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="nav">我是id选择器</td>
            <td>3</td>
            <td>4</td>
            <td class="one">5</td>
        </tr>
        <caption>我是caption的元素内容</caption>
        <thead>我是thead的元素的内容</thead>
        <tbody>123</tbody>
    </table>
    <!-- !表单的元素信息 -->
    <form action="index.html" method="" id="form">
        <table>
            <tr>
                <td><input type="text" placeholder="手机号/邮箱/账号名"></input></td>
            </tr>
            <tr>
                <td><input type="password" name="password" onclick="btn()" id="psw" placeholder="请输入登录的用户密码">
                    <!-- <img src="img/11 (2).png" / style="width: 30px;"> -->
                    <p style="color: black;opacity: 0.5;"><a href="">短信验证码登录页面</a></p>
            </tr>
            <tr>
                <td><input type="submit" value="登录按钮"></td>
            </tr>
            <tr>
                <td colspan="2" id="test">
                    <p style="float: left;"><a href="">短信验证手机</a></p>
                    <p style="float: right;"><a href="">快速注册</a></p>
                </td>
            </tr>
        </table>
    </form>
    <script>
        // 获取元素的信息
        // 文档声明
        var DOCTYPE = document.doctype
        console.log(DOCTYPE)
        // html
        var html = document.documentElement
        console.log(html);
        html.style.background = 'pink'
        // head
        var head = document.head
        console.log(head)
        head.style.background = "yellow"
        var body = document.body
        console.log(body)
        console.log(body.parentNode)
        console.log(head.parentNode) //head的父节点 Html
        console.log(body.previousSibling) //前兄弟节点 #text
        console.log(head.nextSibling) //后兄弟节点  #text
        console.log(head.childNodes) //head子节点 NodeList(9) [text, meta, text, meta, text, meta, text, title, text]
        console.log(body.firstChild)
        console.log(body.lastChild)
        console.log(body.childNodes[0])
        console.log(body.childNodes[1])
        console.log(body.childNodes[2])
        var body = document.body
        console.log("/获取了元素的body元素")
        console.log(body)//获取了元素的body元素
        // body.style.background = 'green'
        console.log("获取body的第一个孩子为 style")
        console.log(body.children[0])//获取body的第一个孩子为 style
        console.log("获取body的第二个孩子为 table")
        console.log(body.children[1])//获取body的第二个孩子为 table
        body.children[1].background = 'yellow'
        console.log("获取body的第三个孩子为 script")
        console.log(body.children[2])//获取body的第三个孩子为 script
        console.log("获取所有的tr")
        console.log(body.children[1].rows) //所有的tr
        var table = document.body.children[0]
        console.log(table)
        // 获取表格的信息
        var table = document.querySelector("table")
        console.log(table)
        console.log(table.rows)
        console.log(table.caption)
        console.log(table.tHead)
        console.log(table.tFoot)
        console.log(table.tBodies)
        console.log(table.rows)
        var td = document.body.children[1].rows
        console.log(td)
        var getclass = document.getElementsByClassName('one')
        console.log(getclass)
        //querySelector() — 精准的获取某个元素 
        var f = document.querySelector(".one")
        //uerySelectorAll()获取符合类名或者标签名等条件的的所有元素
        var g = document.querySelectorAll('.one')
        console.log(f)
        // 获取表单的信息
        var form = document.querySelector("#form")
        var from = document.forms[0]
        console.log(from)
        console.log(from.elements);//获取所有元素
        console.log(from.emil)//通过name属性获得焦点
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        var nav_li = document.getElementsByClassName('nav_li')
        console.log(nav_li)
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>
</html>

重点代码

    // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        var nav_li = document.getElementsByClassName('nav_li')
        console.log(nav_li)
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);

Demo2 attribute的操作对属性的增删改查

<!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>attribute的操作</title>
    <!-- 增加 修改 删除 判断  查询 -->
</head>
<body>
    <div class="box" id="main" name="wer" sex="男" age="67" data-srt="我较上周"></div>
    <script>
        // 获取元素的值的属性值
        var classEl = document.querySelector('#main')
        // 控制台打印输出
        console.log(classEl)
        // 判断该属性是否age存在
        var flag = classEl.hasAttribute("age")
        console.log(flag)
        var flag1 = classEl.hasAttribute("name")
        console.log(flag1)
        // 获取某个值
        var name = classEl.getAttribute("name")
        console.log(name)
        var age = classEl.getAttribute("age")
        console.log(age)
        // 自己定义的属性 data-*
        var srt = classEl.getAttribute("srt")
        console.log(srt)
        // 设置元素的值
        var setName = classEl.setAttribute("setName", "我是设置的元素值")
        var getName = classEl.getAttribute("setName")
        console.log("获取姓名为"+getName)
        // 设置元素的值二
        var setWeight=classEl.setAttribute("setWeight","我的体重200kg")
        // 获取元素的值
        var getWeight=classEl.getAttribute("setWeight")
        console.log("获取体重的值"+getWeight)
        // 删除属性值元素
        var delteName = classEl.removeAttribute("setName")
        console.log(delteName)
        var attrs =classEl.attributes  //获取所有的属性
        console.log(attrs)
        for (var item of attrs) {
            console.log(item)
        }
        // 
        console.log(classEl.className)
        console.log(classEl.id)
    </script>
</body>
</html>

重点代码

// 判断该属性是否age存在
 var flag = classEl.hasAttribute("age")
 // 获取某个值
 var name = classEl.getAttribute("name")
 console.log(name)
// 设置元素的值
var setName = classEl.setAttribute("setName", "我是设置的元素值")
var getName = classEl.getAttribute("setName")
console.log("获取姓名为"+getName)
  // 删除属性值元素
  var delteName = classEl.removeAttribute("setName")
  console.log(delteName)

Demo3 classlist使用动态的对类名增伤改查

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态的style样式的增删改查</title>
    <style>
        button{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .mystyle {
            width: 500px;
            height: 50px;
            padding: 15px;
            border: 1px solid black;
        }
        .anotherClass {
            border: 1px solid red;
            background-color: lightblue;
            color: white;
        }
        .thirdClass {
            text-transform: uppercase;
            text-align: center;
            font-size: 25px;
        }
        .newClassName{
            background-color: darkturquoise;
            color: red;
            height: 300px;
            width: 200px;
        }
    #id{
      overflow: hidden;
    }
    </style>
</head>
<body>
    <a onclick="insertinto()">点我我是一个增加class选择器的类名</a>
    <div id="myDIV">123 </div>
    <script>
        function insertinto() {
            // 增加一个类名
            document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
            alert("增加几个类名")
            var all = document.querySelector("#myDIv")
            removes()
        }
        function removes() {
            document.getElementById("myDIV").classList.remove("mystyle");
            alert("删除的元素thirdClass")
            toggle()
        }
        function toggle(){
            document.getElementById("myDIV").classList.toggle("newClassName");
            // 调用函数
            contains()
        } 
        function contains(){
            var x = document.getElementById("myDIV").classList.contains("anotherClass");
            console.log(x)
            var y = document.getElementById("myDIV").classList.contains("mystyles");
            console.log(y)
        }
    </script>
</body>
</html>

重点代码

  document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
 document.getElementById("myDIV").classList.remove("mystyle");
 document.getElementById("myDIV").classList.toggle("newClassName");
  var x = document.getElementById("myDIV").classList.contains("anotherClass");
  console.log(x)
  var y = document.getElementById("myDIV").classList.contains("mystyles");
  console.log(y)

Demo4 自己定义属性值

<!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 class='box' data-name="why"  data-age="23">我是属性值的内容信息</div>
    <script>
        var boxEl=document.querySelector(".box")
        console.log(boxEl.age)
        console.log(boxEl.name)
        console.log(boxEl.dataset.name)
        console.log(boxEl.dataset.age)
    </script>
</body>
</html>

Demo5 元素的属性修改

<!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{
            height: 200px;
            width: 200px;
            background-color: rgb(110, 223, 140);
            color: crimson;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 300px;">我是元素修改的属性信息</div>
    <script>
        var boxEl=document.querySelector('.box')
        console.log(boxEl)
        // 修改属性值
      var  s=  boxEl.style.width="600px"
      var  d=boxEl.style.display=''
      console.log(d)
      console.log(s)
    //   全局函数获取内容
    console.log(getComputedStyle(boxEl).width)
    </script>
</body>
</html>

Demo6 Dom对象的基础事件

<!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>事件的文件基础信息</title>
    <style>
        * {
            background-color: rgb(0, 232, 232);
        }
        #input_text {
            border: 2px solid paleturquoise;
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: red;
            color: white;
            border-radius: 12px;
            font-size: 30px;
        }
        #input_text1 {
            border: 2px solid rgb(20, 20, 20);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(247, 9, 9);
            border-radius: 12px;
            font-size: 30px;
        }
        .input_text1 {
            border: 2px rgb(255, 0, 0);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(255, 0, 0);
            border-radius: 12px;
            font-size: 30px;
        }
        .input_text2 {
            border: 1px rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(255, 255, 255);
            border-radius: 12px;
            font-size: 30px;
            display: block;
        }
    </style>
</head>
<body onload="checkCookies()">
    <!--  事件三要素
    - 事件源（谁）：触发事件的元素
    - 事件类型（什么事件）： 例如 click 点击事件
    - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 -->
    <!-- 事件一 鼠标单机事件 -->
    <!-- onclick鼠标单机左边生效 -->
    <button id="input_text">我是用户的单机事件</button>
    <script>
        var btn = document.getElementById("input_text")
        console.log(btn)
        btn.onclick = function () {
            var ss=document.querySelector("#input_text")
            ss.textContent="我是自定义的函数的单机事件信息内容"
            alert("我是用户实现的单机事件")
            btn.style.backgroundColor = 'pink'
            btn.style.color = 'red'
            btn.addEventListener("click",function(){
                console.log("btn.addEventListener 创建单机事件")
            })
        }
    </script>
    <!-- ondblclick 鼠标双击时 鼠标 -->
    <button id="input_text1">我是用户的鼠标两次单机的事件</button>
    <script>
        var btn1 = document.querySelector("#input_text1")
        console.log(btn1)
        btn1.ondblclick = function () {
            confirm("我是用户的鼠标两次单机的事件")
            btn1.style.backgroundColor = 'green'
        }
        // onkeydown  键盘按下  键盘
        btn1.onkeydown = function () {
            window.alert("键盘按下的事件")
            btn1.style.height = '100px'
        }
        // onkeypress 键盘按键（含按下与抬起）  键盘
        btn1.onkeypress = function () {
            console.log("键盘按键（含按下与抬起） 键盘 事件")
            btn1.style.backgroundColor = 'yellow'
        }
    </script>
    <button class="input_text1">键盘抬起</button>
    <script>
        var btn2 = document.querySelector(".input_text1")
        // onkeyup  键盘抬起  键盘
        btn2.onkeyup = function () {
            alert("键盘抬起来使用的事件")
            btn2.style.height = '200px'
            btn2.style.color = 'black'
        }
        // onmousedown  鼠标按下时 鼠标
        btn2.onmousedown = function () {
            alert("onmousedown  鼠标按下时 鼠标")
            btn2.style.backgroundColor = 'yellow'
        }
        // 鼠标的移入移出事件 移出时
        // onmousemove  鼠标移动时 鼠标onmouseup 鼠标抬起时 鼠标onmouseout  鼠标移出时 鼠标 onmouseover  鼠标移入时 鼠标
        btn2.onmousemove = function () {
            btn2.style.backgroundColor = 'orange'
            btn2.style.height = '250px'
        }
        // 移出
        btn2.onmouseout = function () {
            btn2.style.backgroundColor = 'red'
            btn2.style.height = '400px'
            btn2.style.color = ' white'
        }
    </script>
    <button class="input_text2" onmouseover=sut()>鼠标移入事件</button>
    <script>
        function all() {
            var btn3 = document.querySelector(".input_text2")
            btn3.onmouseover = function () {
                btn3.style.backgroundColor = 'red'
                btn3.style.color = 'white'
            }
            // 移出
            btn3.onmouseout = function () {
                btn3.style.height = '400px'
                btn3.style.color = ' white'
                btn3.style.display = 'none'
            }
        }
        function sut() {
            all()
        }
    </script>
    <script>
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("Cookies 可用")
            } else {
                alert("Cookies 不可用")
            }
        }
    </script>
</body>
</html>

Demo7 Dom事件的冒泡

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 200px;
        }
        span {
            border: 3px solid red;
            background-color: aliceblue;
            background-color: antiquewhite;
            height: 100%;
        }
        p {
            background-color: aquamarine;
            color: red;
        }
        body {
            background-color: aliceblue;
        }
    </style>
    <div>我是div
        <span>我是span
            <p>我是p标签的内容信息</p>
        </span>
    </div>
    <script>
        var body = document.body;
        var divel = document.querySelector("div");
        var spanel = document.querySelector("span");
        var pel = document.querySelector("p")
        pel.onclick = function () {
            console.log(this.textContent);
        }
        spanel.onclick = function () {
            console.log(this.textContent);
        }
        divel.onclick = function () {
            console.log(this.textContent);
        }
        body.onclick = function () {
            console.log(this)
        }
        document.onclick = function () {
            console.log(this)
        }
        window.onclick = function () {
            console.log(this)
        }
    </script>
</body>
</html>

Demo8 Dom对象事件捕获

<!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>
<script>
    window.onload=function(){
    }
</script>
<body>
    <style>
        div {
            width: 100%;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 200px;
        }
        span {
            display: block;
            border: 3px solid red;
            background-color: aliceblue;
            background-color: antiquewhite;
            height: 100%;
        }
        p{
            background-color: aquamarine;
            color: red;
        }
        body {
            background-color: aliceblue;
        }
    </style>
    <div>我是div
        <span>我是span
            <p>我是p标签的内容信息</p>
        </span>
    </div>
    <script>
        var body = document.body;
        var divel = document.querySelector("div");
        var spanel = document.querySelector("span");
        var pel=document.querySelector("p")
        divel.addEventListener("click",function(){
            window.dispatchEvent(new Event("ghjkl"))
        })
        window.addEventListener("ghjkl",function(e){
            console.log(e)
        })
        pel.onclick=function(){
            console.log(this.textContent);
        }
        spanel.onclick = function () {
            console.log(this.textContent);
        }
        divel.onclick = function (e) {
            console.log("当前处理的事件")
            console.log(e.target)   //当前处理事件
            console.log("当前处理的事件是div")
            console.log(e.currentTarget)
            console.log(this.textContent);
            console.log(this==divel)
            console.log(this===divel)
            e.stopPropagation()
            alert("组织")
        }
        body.onclick = function () {
            console.log(this)
        }
        document.onclick = function () {
            console.log(this)
        }
        window.onclick = function () {
            console.log(this)
        }
        // 事件捕获
        // 先捕获到目标事件然后在mao
        body.addEventListener("click", function (e) {
            console.log(this)
            // 判断该事件的类型
            console.log(e.type) 
            //客户端的x y的距离
            console.log(e.clientX, e.clientY)
            // 处理的事件是当前处理的事件是什么
            console.log(e.target)   //当前处理事件
            console.log(e.currentTarget)  //当前处理事件
            console.log(e.eventPhase)      //事件所处在的阶段
            console.log(e.offsetX, e.offsetY)  //事件发生的元素内
            console.log(e.pageX, e.pageY)   //事件发生在document的位置
            console.log(e.screenX, e.screenY)  // 相对屏幕的位置
        }, true)
        divel.addEventListener("click", function () {
        }, true)
        spanel.addEventListener("click", function (e) {
        }, true)
        document.addEventListener("click", function (e) {
        }, true)
        window.addEventListener("click", function (e) {
        }, true)
    </script>
</body>
</html>

重点代码

  body.addEventListener("click", function (e) {
            console.log(this)
            // 判断该事件的类型
            console.log(e.type) 
            //客户端的x y的距离
            console.log(e.clientX, e.clientY)
            // 处理的事件是当前处理的事件是什么
            console.log(e.target)   //当前处理事件
            console.log(e.currentTarget)  //当前处理事件
            console.log(e.eventPhase)      //事件所处在的阶段
            console.log(e.offsetX, e.offsetY)  //事件发生的元素内
            console.log(e.pageX, e.pageY)   //事件发生在document的位置
            console.log(e.screenX, e.screenY)  // 相对屏幕的位置
        }, true)

第二部分案例实操

案例一案例一轮番消息 HTml+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>
  <!-- ! CSS样式 -->
  <style>
    .tip-bar {
      /* margin: auto; */
      display: inline-flex;
      align-items: center;
      height: 100%;
      background-color: rgba(0, 0, 0, .4);
      border-radius: 16px;
      background-color: aqua;
    }
    img {
      background-repeat: no-repeat;
      height: 200px;
      width: 200px;
      border-radius: 50%;
      margin-right: 5px;
    }
    span {
      font-size: 20px;
      color: rgb(255, 0, 0);
      margin-right: 8px;
    }
    button {
      margin: auto;
      height: 200px;
      width: 200px;
      text-align: center;
      align-items: center;
    }
  </style>

 function all() {
   console.log("执行函数信息")
   // 调用函数
   FenZhuang()
 }
 function FenZhuang() {
   // 创建数组  在数组中创建对象 
   var user = [
     {
       Name: '我叫上三对这张图片感兴趣哦',
       imgUrl: './img/1.jpeg'
     },
     {
       Name: '我叫上四对这张图片感兴趣哦',
       imgUrl: './img/2.jpeg'
     },
     {
       Name: '我叫上五对这张图片感兴趣哦',
       imgUrl: './img/3.jpeg'
     },
     {
       Name: '我叫上六对这张图片感兴趣哦',
       imgUrl: './img/4.jpeg'
     },
   ]
   // 获取图片的信息
   var img = document.querySelector("img")
   console.log(img)
   // 获取div的信息
   var div = document.querySelector(".tip_bar")
   console.log(div)
   // 获取Span元素信息
   var span = document.querySelector("span")
   console.log(span)
   var i = 1
   setInterval(function () {
     img.src = user[i].imgUrl
     // 改变图片的地址
     var imghu = div.style.backgroundImage = `url("${user[i].imgUrl}")`
     console.log(imghu)
     span.textContent = user[i].Name
     i++
     if (i == user.length) i == 0
   }, 1000)
 }
 all()

案例二案例二表格转动

<!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>
        /* 头部导航样式 */
        .header_tab {
            width: 100%;
            height: 35px;
            margin-top: 10px;
            background-color: #3B99FC;
            /* border: 1px solid red; */
        }
        .tab_List {
            width: 80%;
            height: 35px;
            /* border: 1px solid red; */
            margin: auto;
            line-height: 35px;
        }
        .tab_List_txt {
            list-style: none;
            color: white;
            font-size: 14px;
            text-align: center;
        }
        .tab_List_txt li {
            float: left;
            height: 35px;
            margin-left: 2%;
            width: 10%;
        }
        .tab_List_txt li:hover {
            cursor: pointer;
            border-radius: 3px;
            background-color: #2676E3;
        }
        /* 高亮元素 */
        .active {
            background-color: #1476ff;
            border-radius: 3px;
        }
        .actives {
            background-color: #f2b6f1;
            border-radius: 3px;
            opacity: 0.9;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="header_tab">
        <div class="tab_List">
            <ul class="tab_List_txt">
                <li class="item active">首页</li>
                <style>
                    /* 多了这个元素信息 */
                    .roSpan {
                        display: inline-block;
                        transition: transform 0.5s ease;
                    }
                </style>
                <li class="item">车票&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">团购服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">会员服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">车站服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">商旅服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">出行指南&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">信息查询&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
            </ul>
        </div>
    </div>

  // 获取ul
  var ulEl = document.querySelector("ul")
  // 获取到当前高亮的元素
  var activeEl = ulEl.children[0]
  var flag = false
  // console.log(activeEl);
  // 绑定鼠标移入事件
  ulEl.onmouseover = function (e) {
      // 判断是否点击的是li元素
      if (e.target !== this) {
          // 是否有高亮，有就删除
          if (activeEl) activeEl.classList.remove("active")
          // 给当前移入的元素添加高亮
          e.target.classList.add("active")
          var spanEl = e.target.firstElementChild
          if (spanEl) spanEl.style.transform = `rotate(-180deg)`
          // 赋值给下一次需要删除的高亮元素
          activeEl = e.target
      }
  }
  ulEl.onclick = function (e) {
      // 判断是否点击的是li元素
      if (e.target !== this) {
          // 是否有高亮，有就删除
          if (activeEl) activeEl.classList.remove("active")
          // 给当前移入的元素添加高亮
          e.target.classList.add("actives")
          var spanEl = e.target.firstElementChild
          if (spanEl) spanEl.style.transform = `rotate(-180deg)`
          // 赋值给下一次需要删除的高亮元素
          activeEl = e.target
      }
  }
  // 给li绑定移出事件
  ulEl.onmouseout = function (e) {
      var spanEl = e.target.firstElementChild
      if (e.target.tagName === "LI") {
          if (spanEl) spanEl.style.transform = `rotate(0deg)`
      }
  }

Dom对象总结案例实操(第二十课)（一）

第一部分 Dom对象知识点回顾效果不去展示重点在后面的案例上

Demo1 Dom元素中的节点操作和方法操作

重点代码

Demo2 attribute的操作对属性的增删改查

Demo3 classlist使用动态的对类名增伤改查

重点代码

Demo4 自己定义属性值

Demo5 元素的属性修改

Demo6 Dom对象的基础事件

Demo7 Dom事件的冒泡

Demo8 Dom对象事件捕获

重点代码

第二部分案例实操

案例一案例一轮番消息 HTml+CSS结构

案例二案例二表格转动

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Dom对象总结案例实操(第二十课)（一）

第一部分 Dom对象知识点回顾 效果不去展示重点在后面的案例上

Demo1 Dom元素中的节点操作和方法操作

重点代码

Demo2 attribute的操作 对属性的增删改查

Demo3 classlist使用动态的对类名增伤改查

重点代码

Demo4 自己定义属性值

Demo5 元素的属性修改

Demo6 Dom对象的基础事件

Demo7 Dom事件的冒泡

Demo8 Dom对象事件捕获

重点代码

第二部分 案例实操

案例一 案例一轮番消息 HTml+CSS结构

案例二 案例二表格转动

热门文章

最新文章

相关课程

相关电子书

相关实验场景

第一部分 Dom对象知识点回顾效果不去展示重点在后面的案例上

Demo2 attribute的操作对属性的增删改查

第二部分案例实操

案例一案例一轮番消息 HTml+CSS结构

案例二案例二表格转动