date1102DOM操作以及事件处理

雨声筱筱
67 阅读1分钟

一、操作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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        /*
            操作DOM
                常规意义上的操作DOM，就是增、删、改、查

                1.创建(创建完成之后，页面并不会存在)
                    创建了的话 只能说在JavaScript中有了 在页面中是不存在的
                    
                2.增删改查
                
        */
        const oUl = document.querySelector('ul');
        const oLi = document.querySelectorAll('ul>li')[0];
        const oLi1 = document.querySelectorAll('ul>li')[1];

        var oli5 = document.createElement('li');

        oli5.innerHTML = '555';

        oUl.appendChild(oli5);

        oUl.insertBefore(oli5 , oUl.firstElementChild);
        oUl.insertBefore(oli5 , null);

        oUl.removeChild()

        oUl.removeChild(oUl.firstElementChild);


        // 修改操作
        
        // 节点的创建 增加 

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

二、克隆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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        /*
            克隆DOM
                克隆一个节点操作，并且将其添加到父元素的子节点中去
        */

        const oUl = document.querySelector('ul');
        const oLi = document.querySelector('ul>li');

        console.log(oUl);
        console.log(oLi);



        // 在oUl添加oLi节点
        // 添加节点只会讲oLi节点进行移动到最后oUl位置上
        // oUl.appendChild(oLi);



        // 没有true只会克隆一个节点  没有内容
        // var cloneLi = oLi.cloneNode();
        // oUl.appendChild(cloneLi)
        // console.log(cloneLi);



        // 没有true会克隆一个节点 并且有内容
        var cloneLi = oLi.cloneNode(true);
        oUl.appendChild(cloneLi)
        console.log(cloneLi);

    </script>
</body>

</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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: yellow;
            /* position: relative; */
            margin-top: 50px;
            margin-left: 50px;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: orange;
            position: absolute;
            top: 102px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        /*
            元素偏移量
        */

        const oBox1 = document.querySelector('.box1');
        const oBox2 = document.querySelector('.box2');

        // 没有定位的时候 获取的是body祖先级定位
        // console.log(oBox2.offsetParent);

        // .box2有定位.box1的定位  那么父级.box1就是.box2的定位
        console.log(oBox2.offsetParent);

        // 有.box1父级的相对定位时候 获取的是100 100
        // console.log(oBox2.offsetLeft);
        // console.log(oBox2.offsetTop);


        // 没有.box1父级的相对定位时
        console.log(oBox2.offsetLeft);
        console.log(oBox2.offsetTop);



    </script>
</body>
</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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 20px;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const oDiv = document.querySelector('div');
        console.log(oDiv);



        // 获取元素尺寸 .offsetWidth  .offsetHeight
        // 实际宽度 + padding(左和右，也就是20px*2) + border(10px*2)
        console.log(oDiv.offsetWidth);
        console.log(oDiv.offsetHeight);



        // .clientWidth  .clientHeight
        // 实际宽度 + padding(左和右，也就是20px*2)
        // 如果不计算边框border 那么就可以用这个.clientWidth
        console.log(oDiv.clientWidth);
        console.log(oDiv.clientHeight);


        // 页面可视范围的宽高 包括滚动条的宽高
        console.log('window.innerWidth:' , window.innerWidth);
        console.log('window.innerHeight:' , window.innerHeight);

        
        // 页面可视范围的宽高 不包括滚动条的宽高
        console.log('document.documentElement.clientWidth' , document.documentElement.clientWidth);
        console.log('document.documentElement.clientHeigth' , document.documentElement.clientHeight);
    </script>
</body>
</html>

五、JS事件

<!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;
        }
        .box,
        .box1
        {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <script>
        /*
            事件
                在某一时刻 用户(在页面)做了某件事 我要给我的反馈

                时间的三要素
                    1.事件源
                    2.事件类型
                    3.事件处理函数

                DOM 0级事件绑定    事件源.on + 事件类型 = 事件处理函数
                    弊端：无法绑定多个同类型的事件，后边新写的事件会覆盖前面原有的事件

                DOM 2级事件绑定(事件监听)     事件源.addEventListener('事件类型' , 事件处理函数 , 第三个参数是可选的)

                1级事件绑定已经被淘汰了  也就是取消了
        */

        // 0级事件绑定
        // 后写入的点击事件会覆盖前面的点击事件
        // 不可以同时在同一个标签对象绑定多个事件
        // 下面之后触发最后写入的那个
        const oBox = document.querySelector('.box');
        oBox.onclick = function(){
            console.log(1111);
        }
        oBox.onclick = function(){
            console.log(2222);
        }



        // 2级点击事件
        // 可以在同一个标签对象同时绑定多个点击事件
        // 下面两个都会触发到
        const oBox1 = document.querySelector('.box1');
        oBox1.addEventListener('click' , function(){
            console.log(3333);
        })

        oBox1.addEventListener('click' , function(){
            console.log(4444);
        })
    </script>
</body>
</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>1111</div>
    <script>
        /*
            1.滚动事件
        */
        // var oDiv = document.querySelector('div');
        // console.log(oDiv);          //null

        window.onload = function(){


            // 当页面所有资源加载完毕后执行
            var oDiv = document.querySelector('div');
            console.log(oDiv);
        }
    </script>
</body>
</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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>羽生</p>
    </div>
    <script>
        const oBox1 = document.querySelector('.box1');

        // 鼠标单击事件
        // 一个完整的单击事件：左键按下和抬起
        oBox1.addEventListener('click' , function(){
            console.log('鼠标单击事件');
        })
        

        // // 鼠标双击事件
        // // 也就是连续两次鼠标单击
        // oBox1.addEventListener('dblclick' , function(){
        //     console.log('鼠标双击事件');
        // })


        // // 鼠标右键单击
        // // 一个完整的右键事件：右键按下和抬起
        // oBox1.addEventListener('contextmenu' , function(){
        //     console.log('鼠标右键单击事件');
        // })


        // // 鼠标移动事件
        // oBox1.addEventListener('mousemove' , function(){
        //     console.log('鼠标移动事件');
        // })



        // // 鼠标按下事件
        // oBox1.addEventListener('mousedown' , function(){
        //     console.log('鼠标按下事件');
        // })


        // // 鼠标抬起事件
        // oBox1.addEventListener('mouseup' , function(){
        //     console.log('鼠标抬起事件');
        // })


        // 鼠标移入事件1
        oBox1.addEventListener('mouseenter' , function(){
            console.log('鼠标移入事件1');
        })


        // 鼠标移入事件2
        // 
        oBox1.addEventListener('mouseover' , function(){
            console.log('鼠标移入事件2');
        })


        // // 鼠标移出事件1
        // oBox1.addEventListener('mouseleave' , function(){
        //     console.log('鼠标移出事件1');
        // })


        // // 鼠标移出事件2
        // oBox1.addEventListener('mouseout' , function(){
        //     console.log('鼠标移出事件2');
        // })
        
    </script>
</body>
</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const oDiv = document.querySelector('div');


        // 键盘按下事件
        document.onkeydown = function(){
            console.log('键盘按下事件');
        }

        // 键盘抬起事件
        document.onkeyup = function(){
            console.log('键盘抬起事件');
        }

        // 键盘按下抬起事件
        document.onkeypress = function(){
            console.log('键盘按下抬起事件');
        }


    </script>
</body>

</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>
    输入框：<input type="text" id="ipt">
    <script>
        /*
            表单事件
                获取焦点：标签对象.onfocus = function(){};
                失去焦点：标签对象.onblur = function(){};
                改变内容：标签对象.onchange = function(){};
                输入内容：标签对象.oninput = function(){};
        */

        
       const oIpt = document.querySelector('#ipt');

       //获取焦点
       oIpt.onfocus = function(){
        console.log('获取焦点');
       }


       //失去焦点
       oIpt.onblur = function(){
        console.log('失去焦点');
       }


       //改变内容
       oIpt.onchange = function(){
        console.log('改变内容');
       }


       //输入内容
       oIpt.oninput = function(){
        console.log('输入内容');
       }
    </script>
</body>
</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        </style>
</head>
<body>
    <div></div>
    <script>
        const oDiv = document.querySelector('div');


        oDiv.onclick = function(event){
            console.log(event);
        }
    </script>
</body>
</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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            margin-top: 50px;
        }
        body{
            height: 5000px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var oDiv = document.querySelector('div');

        
        oDiv.onclick = function(event){

            // 相对于事件源的位置
            console.log('相对于事件源X轴的位置：' , event.offsetX);
            console.log('相对于事件源Y轴的位置：' , event.offsetY);

            // 获取相对于页面的坐标点
            console.log('获取相对于页面X轴的坐标点：' , event.pageX);
            console.log('获取相对于页面Y轴的坐标点：' , event.pageY);

            // 获取相对于浏览器窗口的位置
            console.log('获取相对于浏览器窗口的X轴：' , event.clientX);
            console.log('获取相对于浏览器窗口的Y轴：' , event.clientY);
        }
    </script>
</body>
</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>
    <input type="text" class="ipt">
    <script>
        /*
            键盘按键
                e.key   返回按下的按键
                e.keyCode    返回按下的按键的进制码
                    已经被移除 但是很多主流浏览器还能正常使用
        */
       const oIpt = document.querySelector('.ipt');

       oIpt.onkeyup = function(event){

            // 打印出按下的键
            console.log(event.key);

            
            // if(event.key === 'a'){
            //     console.log('此时按下a键');
            // }

            // event.ctrlKey 表示按下ctrl键
            // if(event.ctrlKey && event.key === 'a' ){
            //     console.log('此时按下ctrl+a组合键');
            // }
       }
    </script>
</body>
</html>
avatar
文章
阅读
粉丝