JavaScript-DOM模型和事件

于 2022-08-13 13:53:24 发布
阅读量131 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiuyue_77/article/details/126289477
版权

第四章 JavaScript-DOM和事件

文章目录

一、DOM

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>
    <!-- 初始化标签 -->
    <ul>
        <li>这个li是自己在body里写的</li>
    </ul>
</body>

<script>

    // 这里使用DOM操作元素节点的方法生成标签
    // 生成一个元素节点，这个节点不会显示，因为没有把它加在网页里
    var li = document.createElement('li')
    // 由于这是个列表，所以我们把它加到ul中去
    // 要给ul加子元素，就要先找到ul
    var ul = document.querySelector('ul')
    // 把刚才生成的li加到ul里，由于li是ul的子元素，所以使用appendChild
    // 添加节点元素：appendChild(添加子元素) appendNode(添加父元素)
    // 添加完毕后会在网页里看到圆点，这表示我们生成的li已经加到ul里了，但是没有文本
    ul.appendChild(li)
    // 这里给li添加文本，要用到文本节点
    li.innerHTML = '这是通过DOM生成的li标签'


    // 上面的方法是往ul的后面添加节点，这里我们重新生成标签，加到ul里的第一个
    var li_first = document.createElement('li')
    // insertBefore添加到指定元素的前面，第一个参数是要添加的元素，第二个参数是位置（这里表示ul索引值为0的子元素）
    ul.insertBefore(li_first,ul.children[0])
    // 生成文本
    li_first.innerHTML = '我把他加到了li的最前面'


    // 删除节点的方法是remove，同样分子元素或父元素
    // 元素.removeChild(元素.children[索引值])  →   删除子元素


</script>


</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>
        div{
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>使用JS改变这个div的样式</div>
</body>

<script>

    // 使用DOM操作元素的样式属性

    var div = document.querySelector('div')
    // 变量.style.样式属性 = '值'
    div.style.backgroundColor = 'lightgray'
    // 多个单词组成的属性需要用驼峰的写法
    div.style.fontSize = '20px'
    // 单个单词
    div.style.color = 'white'



</script>


</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>
        div{
            width: 400px;
            height: 100px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div>这里显示当前时间</div>

    <p class="duanluo" id="duanluo">
        DOM是文档对象模型，通常也叫DOM树，分为3种节点：元素节点，属性节点，文本节点
        <br>
        以当前的p标签为例：
        <br>
        元素节点：指的是这个p标签本身
        <br>
        属性节点：属性节点指的是这个p标签的class和id，都有属性值与其对应
        <br>
        文本节点：指的是P标签里面的文本内容，也就是我们能看到的这些文字
        <br>
        DOM编程就是操作这3种节点来改变网页的表现形式
    </p>

</body>

<script>

    var div = document.querySelector('div')
    console.log(div)
    //  innerHTML,innerText都可以改变元素的文本
    // innerHTML可以自动解析标签，innerText不可以，会把标签当做字符串进行输出
    // div.innerText = '<b>能不能改变文本</b>'
    var date = new Date()
    div.innerHTML = date.toLocaleString()

</script>



</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的初始id是demo,所以不会显示这个样式，但是通过JS改变div的id后，这个样式就显示出来了 */
        /* 所以我们可以通过元素的默认显示样式，加上JS的DOM操作来做网页的功能，这种方法也是轮播图的制作方法之一 */
        #test {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 设置div的初始属性，其中id,class是语法中本身就有的，abc是自定义的 -->
    <div id="demo" class="d" index="1" abc="cba"></div>
</body>

<script>

    var div = document.querySelector('div')
    // 获取div的属性值
    console.log(div.id)
    // 获取div的属性值，getAttribute也可以获取到自定义的属性值
    console.log(div.getAttribute('class'))
    console.log(div.getAttribute('abc'))


    // 改变元素的属性
    // div的初始id是demo，我们把它改成test
    div.id = "test"
    // 重新获取div的id
    console.log(div.id)
    // 通过setAttribute来改变元素的属性值，第一个参数是属性，第二个参数是该属性对应的属性值
    div.setAttribute('index', '2')
    // 所以这里应该输出2
    console.log(div.getAttribute('index'))

    // 删除自定义属性，使用removeAttribute
    div.removeAttribute('index')
    // 删除后，div就没有了index这个属性，也就没有了对应的属性值，所以这里输出了null(空)
    console.log(div.getAttribute('index'))




</script>

</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>
</head>
<body>
    <button class="btn1">传统注册事件</button>
    <button class="btn2">方法监听注册事件</button>
</body>

<script>

    var btn1 = document.querySelector('.btn1')
    var btn2 = document.querySelector('.btn2')

    // btn1.onclick = function(){
    //     alert('传统1')
    // }
    // 传统点击事件一个元素只能注册一个，后面的会覆盖掉前面的
    // btn1.onclick = function(){
    //     alert('传统2')
    // }

    // 监听事件
    // 同一个元素可以注册多个点击事件，并且都会运行
    btn2.addEventListener('click',function(){
        alert('监听1')
    })

    btn2.addEventListener('click',function(){
        alert('监听2')
    })


</script>




</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>
        div{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<script>

    var div = document.querySelector('div')

    // 鼠标的移入事件
    div.onmousemove = function(){
        div.style.backgroundColor = 'red'
    }

    // 鼠标的移出事件
    div.onmouseleave = function(){
        div.style.backgroundColor = 'white'
    }



</script>


</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>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    
</body>

<script>

    // event 事件对象 可以简写成 e 或者 evt
    // 事件对象是事件的一系列相关数据的集合，跟事件相关，比如鼠标点击就包含了鼠标的相关信息

    document.addEventListener('click',function(e){
        // 获取可视区域的x,y坐标
        console.log(e.clientX)
        console.log(e.clientY)
    })



</script>


</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: 200px;
            height: 200px;
            background-color: rgb(165, 225, 76);
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<script>

    var div = document.querySelector('div')
    // 声明2个变量，代替div的宽高
    var width = 200
    var height = 200

    // 注册鼠标滚轮事件
    div.addEventListener('mousewheel',function(e){

        console.log(e.deltaX)
        console.log(e.deltaY)

        if(e.deltaY > 0){
            width -= 5
            height -= 5
        }else{
            width += 5
            height += 5
        }

        // 左边：获取div的宽高
        // 右边：变量拼接字符串‘px’
        // 相当于把拼接后的值赋给div的宽高
        div.style.width = width + 'px'
        div.style.height = height + 'px'

    })



</script>


</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>
</head>
<body>
    
</body>

<script>

    // 1.键盘按下时
    document.onkeydown = function(){
        console.log('你按下了键盘')
    }

    // 2.识别按键
    document.onkeypress = function(){
        console.log('识别按键中')
    }

    // 3.按键弹起时
    document.onkeyup = function(){
        console.log('按键弹起时')
    }


    // 识别按键，判断用户按下了哪个键（ASCLL值）
    document.addEventListener('keyup',function(e){
        console.log("keyup：" + e.keyCode)
    })
    // 上：38  下：40  左：37   右：39


</script>


</html>

6.焦点触发事件

<!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="password" autofocus>
    <img src="./images/jg.png">
    <span>请输入6-16位密码</span>
</body>

<script>

    var inp = document.querySelector('input')
    var img = document.querySelector('img')
    var span = document.querySelector('span')

    // 获取输入文本的长度
    // inp.value.length

    // 输入框失去焦点时触发的事件
    inp.onblur = function () {

        if(inp.value.length < 6 || inp.value.length > 16){
            // 密码输入错误的处理
            img.src = './images/cw.png'
            span.innerHTML = '输入错误'
            span.style.color = 'red'
        }else{
            img.src = './images/zq.png'
            span.innerHTML = '输入正确'
            span.style.color = 'aqua'
        }

    }



</script>


</html>

7.密码显示状态切换

<!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>
        img{
            width: 40px;
            height: 30px;
            position: relative;
            top: 10px;
        }
    </style>
</head>
<body>
    <input type="password">
    <img src="./images/yanjing-guan.png">
</body>

<script>

    var inp = document.querySelector('input')
    var img = document.querySelector('img')
    // 定义一个开关
    var fay = 1

    // 给img注册点击事件
    img.onclick = function(){
        
        if(fay == 1){
            // 通过改变元素的属性（路径），从而改变要显示的图片
            img.src = './images/yanjing-kai.png'
            // 改变input的type
            inp.type = 'text'
            // 只要点击，就需要给fay切换状态
            fay = 0
        }else{
            // 通过改变元素的属性（路径），从而改变要显示的图片
            img.src = './images/yanjing-guan.png'
            // 改变input的type
            inp.type = 'password'
            // 只要点击，就需要给fay切换状态
            fay = 1
        }

    }




</script>



</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>

<body>
    <div>别复制，需要收费</div>
</body>

<script>

    // 禁止复制文字
    document.addEventListener('selectstart', function (e) {
        e.preventDefault()
    })

    // 禁止使用右键菜单
    document.addEventListener('contextmenu',function(e){
        e.preventDefault()
    })



</script>


</html>

总结

掌握DOM模型和事件

jiuyue_77
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiuyue_77

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值