JavaScript | DOM事件与节点操作持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

前言

JavaScript是基础并且是非常重要的一部分，现在项目基本都靠框架开发，很多原生方法得不到使用就会慢慢忘记，所以借着6月更文好好复习一下基础知识，今天开始DOM的事件与节点操作。

DOM事件

焦点事件

失去焦点 onfocus
获取焦点 onblur 点击事件
左键单击 onclick
左键双击 ondblclick
右键点击 oncontextmenu (右键单击的时候，会默认有菜单，需要阻止默认事件) 键盘事件
键盘抬起 onkeyup
键盘按下 onkeydown 表单改变事件
oninput 当表单内容发生变化的时候触发
onchange 当表单内容发生变化的时候并失去焦点的时候触发 鼠标事件
鼠标按下 onmousedown
鼠标抬起 onmouseup
鼠标移动 onmousemove
鼠标移入 onmouseover
鼠标移出 onmouseout 滚动条事件
window.onscroll 检测滚动条是否滚动 window.onload 事件
可以书写在任意位置，不要考虑等待代码的执行
等待页面中的DOM节点以及所有的资源（图片音频视频程序等等）全部加载完毕以后才触发事件 window.onresize 事件
窗口大小重置的时候触发，只能针对于窗口大小

通过DOM事件简单做一个经典的Tab栏操作的案例

效果图

代码示例

    <body>
        <div class="outer">
            <!-- tab切换 -->
            <div class="tab">
                <!-- 标题 -->
                <header class="title">
                    <h2 class="active">标题1</h2>
                    <h2>标题2</h2>
                    <h2>标题3</h2>
                </header>
                <!-- 内容 -->
                <div class="con">
                    <section class="show">内容一</section>
                    <section>内容二</section>
                    <section>内容三</section>
                </div>
            </div>
        </div>
    </body>

    <script>
        var oH2s = document.querySelectorAll('.title h2');
        var oSections = document.querySelectorAll('.con section');
        
        //外层的for循环只是为了遍历所有的h2 然后给所有的h2绑定点击事件，不会对里边内容有任何影响
        for (var i = 0; i < oH2s.length; i++) {
            oH2s[i].onclick = function () {
                //每一个元素对象都有一个classList属性，这个属性上有add、remove、toggle、has等操作类名的方法
                //内部的for循环 只是为了遍历所有的h2，判断哪一个是用户点击的，从而做出相应的操作
                for (var i = 0; i < oH2s.length; i++) {
                    if (oH2s[i] === this) {
                        oH2s[i].classList.add("active")
                        oSections[i].classList.add("show")
                    } else {
                        oH2s[i].classList.remove("active")
                        oSections[i].classList.remove("show")
                    }
                }
            }
        }
    </script>


 <style>
        .tab {
            width: 600px;
            margin: 50px auto 0;
            border: 1px solid #000;
        }

        .tab .title {
            display: flex;
        }

        .title h2 {
            width: 198px;
            border: 1px solid #000;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 26px;
        }

        .title h2.active {
            background-color: pink;
            color: #fff;
        }

        .con section {
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;

            display: none;
        }

        .con section.show {
            display: block;
        }
    </style>

节点操作

创建节点 document.createElement("元素名");
插入节点 document.getELementById().appendChild("元素名");
复制节点 document.getELementById().cloneNode(布尔值) 参数是一个布尔值：

false是浅复制只复制当前元素
true是深复制复制当前元素及内部所有元素

删除节点 document.getELementById().removeChild('元素名') 删除子元素
替换元素 document.getELementById().replaceChild(new,old) 注意：

获取的元素是new和old的父元素
new不一定非要是一个新创建的元素，也可以是已经存在的元素

如下示例

<body>
    <button id="btn">替换</button>
    <ul class="box">
        <li>1 <a href="###">旧的</a></li>
    </ul>
 </body>
 
    <script>
        var oBox = document.querySelector('.box');
        var oBtn = document.getElementById('btn');
        var oLis = document.querySelectorAll('.box li');

        oBtn.onclick = function () {
            var newLi = document.createElement("li");
            newLi.textContent = "新"
            oBox.replaceChild(newLi, oLis[0])
        }
    </script>

好了，以上就是本篇文章的分享，感谢阅读！