web前端：16_DOM与BOM操作（下）

最新推荐文章于 2024-10-08 12:21:22 发布

weixin_45906368

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量26

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45906368/article/details/131728379

版权

1，DOM的元素的增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p id="active">访问  违法 未覆盖去</p>
    </div>

    <script>
        let box = document.getElementById('box')
        let active = document.getElementById('active')

        let new_stu = document.createElement('b')  //新建一个标签元素
        new_stu.innerText = "gwfu,egrw,gqf"   //标签中创建了元素， 遵从<b>标签

        box.appendChild(new_stu)   //给box新增一个子元素     -给盒子添加儿子（元素）

        box.removeChild(new_stu)   //删除子元素

        let j = document.createElement('a')
        j.innerText = '点我去学习'
        j.href = 'https://www.cnblogs.com/'

        // 修改子元素（新元素，老元素）
        box.replaceChild(j,active) 


    </script>

</body>
</html>

2，鼠标悬浮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>和摧毁</p>
    </div>

    <script>
        let box = document.getElementById('box')
        let p = document.getElementsByTagName('p')[0]
        let drink = document.createElement('h1')

        box.onmouseover = function(){
            // 当鼠标放上盒子时，触发函数内容
            this.style.backgroundColor = '#6cf'
            box.replaceChild(drink,p)
        }
        // 当鼠标离开盒子时，触发函数内容
        box.onmouseout = function(){
            box.style.backgroundColor = 'red'
        }
    </script>
</body>
</html>

3, 鼠标悬浮案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
             }

        li{
            float: left;
            margin: 12px;
        }

        .active{
            border: 3px solid #096;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <img src="img/1.jpg" alt="" id="bigPic" width="500" height="500"  class="active">
    <ul>
        <li><img src="img/2.jpg" alt="" width="70" height="70" class="smallPic"></li>
        <li><img src="img/3.jpg" alt="" width="70" height="70" class="smallPic"></li>
        <li><img src="img/4.png" alt="" width="70" height="70" class="smallPic"></li>
        <li><img src="img/5.jpg" alt="" width="70" height="70" class="smallPic"></li>
        <li><img src="img/6.jpg" alt="" width="70" height="70" class="smallPic"></li>
        <li><img src="img/7.jpg" alt="" width="70" height="70" class="smallPic"></li>
    </ul>

    <script>
        // 当鼠标放在小T图片时  1，大图换成小图  2，给当前小图加上边框  3，取消之前的边框
        let bigPic = document.getElementById('bigPic')
        let smallPic = document.getElementsByClassName('smallPic')

        // 1，遍历小图片，添加悬浮事件
        for(let i=0;i<smallPic.length;i++){
            smallPic[i].onmouseover = function(){
                // alert('我鼠标在小图片里了')
                // 2,清除下小图片的边框样式  找到图片的父级，把它的类名设为空
                for(let j=0;j<smallPic.length;j++){
                    smallPic[j].parentNode.className = ''
                }
                // 3,把大图片 换为小图片
                bigPic.src = this.src
                // 4,给小图片加上边框  --给当前小图片的父级，加个 active 这个类名
                this.parentNode.className = 'active'
            }
        }
        
    </script>
    
</body>
</html>

4,DOM表单交互事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <p id="name">
            用户名：
            <input type="text" name="" id="userName">
        </p>
        <p id="pw">
            密码：
            <input type="password"  id="pwd">
        </p>
    </form>

    <script>
        let userName = document.getElementById("userName")
        let pwd = document.getElementById('pwd')

        let msg = document.createElement('span')   //创建一个元素后，后面用这个元素作为输入人提醒
        // 当用户点击输入框时，聚焦  促发函数功能
        userName.onfocus = function(){
            msg.innerText = '请输入你的姓名'
            this.parentNode.append(msg)  //给自己添加一个兄弟  - 选择父级，新增一个子元素
        }

        // 当用户离开输入框时， 失焦 促发函数功能
        pwd.onblur = function(){
            msg.innerText = '请记住你的密码'
            this.parentNode.append(msg)
        }

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

5，定时器操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn"> 多喝岩浆</button>

    <!-- BOM 通过js和游览器进行交互 --弹窗，刷新，跳转，加载  都属于同一个对象  window(当前窗口页面)
        --alert,prompt 控制游览器弹出来  window.alert()  window.prompt()
     -->

     <!-- 定时器   -- 可以让网页里的一段内容，过一阵子再运行/显示
        setInterVal(功能函数，时间间隔)  间隔单位为毫秒，1秒 = 1000毫秒    周期性定时器，隔一阵子就运行一次
        setTimeOut()  一次性定时器，执行一次就结束 -->

        <script>
            // setInterval(function(){
            //     alert('多喝热水')
            // },2000)

            let btn = document.getElementById('btn')
            btn.onclick = function(){
                setTimeout(function(){
                    alert("多喝岩浆")
                },1000)
            }

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