JavaScript-DOM（重点）

Posted 2021-03-06 小小荧

DOM

概念

所谓DOM，其实就是 Document Object Model文档对象模型，毫无疑问，这个东西是让我们去操作对象的，那什么是对象呢？其实就是文档的对象。，在文档中一切皆为对象，比如html,body, p,div等等这些都是文档的对象。通过操作这些对象我们可以对这些文档对象进行有趣的操作，比如点击div然后div随机变换背景色。

解析过程

HTML加载完成，渲染引擎会在内存中把html生成一个DOM树，我们可以通过js的选择节点操作去获取DOM上的元素节点，然后就可以对这个元素进行一系列的操作，最后又会被渲染树渲染后页面中。

DOM树一切皆为节点

在上图HTML中就可以显示出一切皆为节点

• 元素节点:HTML标签
• 属性节点:标签的属性
• 文本节点:标签中的文字

DOM可以做什么？

• 找对象(元素节点)
• 设置元素属性值
• 设置元素样式
• 动态创建和删除元素
• 事件的触发响应：事件源、事件、事件的驱动

获取DOM结构

• 获取文档对象：document
• 获取html：document.documentElement
• 获取body: document.body

获取其他的DOM节点

        // id选择器
        var box = document.getElementById("box");
        // 类选择器
        var box = document.getElementsByClassName("box");
        // 标签选择器
        var box = document.getElementsByTagName("div");
        // css通用选择器
        var box = document.querySelector(".box");

事件

事件三要素

• 事件源(引起事件的标签)
• 事件(js已定义好的事件)
• 事件驱动程序(对节点的操作)

常用的事件如下:

绑定事件的方式

直接绑定匿名函数

        // id选择器
        var box = document.getElementById("box");
        box.onclick = function(){
            alert("我触发了点击事件");
        }

先单独定义函数，在绑定

        var box = document.getElementById("box");
        box.onclick = click();
        function click() {
            alert("我触发了点击事件");
        }

行内绑定(不推荐)

    <div id="box" class="box" onclick="click();"></div>
    <script>
        function click() {
            alert("我触发了点击事件");
        }
    </script>

javascript入口函数 window.onload()

此函数调用，是当页面加载完毕(文档图片)，触发onload函数

<script type="text/javascript">
    window.onload = function () {
        console.log("alex");  //等页面加载完毕时，打印字符串
    }
</script>

样式属性操作

    <div id="box" class="box" onclick="click();"></div>
    <script>
        var box = document.getElementById("box");
        box.onclick = function(){
            // 设置盒子的背景颜色
            this.style.backgroundColor = "blue";
        }
</script>

值得操作

值得操作又分为双标签和单标签

• 双标签 我们可以使用innerHTML和innerText
• 单标签 只能使用value获取值和设置值

<div id='box'></div>
<input type='text' value = 'alex' id='user'>
<script>
    window.onload = function(){
        //1.获取事件源(事件对象，在文档中一切的标签都是对象)
        var oDiv = docuement.getElementById('box');
         var oInput = docuement.getElementById('user');
        //2.事件
        oDiv.onclick = function(){
            //3.事件驱动程序  
            oDiv.innerText = 'alex'；//仅仅设置文本内容
            oDiv.innerHTML = '<h1>alex</h1>';//将标签和文本内容一起解析
        };

        //2.事件
        oInput.onclick = function(){
            //3.事件驱动程序   只有有value属性的 才能使用value赋值和设置值
            oInput.value = 'hhhh'；
        }
    };

</script>

标签属性操作

<script>
        //window.onload页面加载完毕以后再执行此代码
        window.onload = function () {
            //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
            //步骤：
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源
            var oImg = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            oImg.onmouseover = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd2.png";
//                this.src = "image/jd2.png";
            }

            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            oImg.onmouseout = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd1.png";
            }
        }
    </script>

节点操作

创建节点

新的标签（元素节点） = document.createElement("标签名");

<script type="text/javascript">
    var a1 = document.createElement("li");   //创建一个li标签
    var a2 = document.createElement("adbc");   //创建一个不存在的标签

    console.log(a1);
    console.log(a2);

    console.log(typeof a1);
    console.log(typeof a2);
</script>

插入节点

父节点.appendChild(新的子节点);

    <div id="parent">
        <div id="child">我是儿子</div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var ele = document.createElement("p");
        ele.innerHTML = "我是追加元素"
        // 会在父元素内的某位添加一个节点
        parent.appendChild(ele);
    </script>

父节点.insertBefore(新的子节点，参考节点);

    <div id="parent">
        <div id="child">我是儿子</div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var ele = document.createElement("p");
        var child = document.getElementById("child");
        ele.innerHTML = "我是追加元素"
        //会在父节点下的以一个节点为参考，添加到这个参考元素的前面
        parent.insertBefore(ele, child);
    </script>

删除节点

父节点.removeChild(子节点);

    <div id="parent">
        <div id="child">我是儿子</div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var ele = document.createElement("p");
        var child = document.getElementById("child");
        // 删除子节点
        parent.removeChild(child);
    </script>

兄弟节点

• 节点.nextSibling
• 节点.previousSibling
• 节点.nextElementSibling
• 节点.previousElementSibling

    <div id="parent">
        <div>我是前兄弟</div>
        <div id="child">我是儿子</div>
        <div>我是后兄弟</div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var ele = document.createElement("p");
        var child = document.getElementById("child");
        ele.innerHTML = "我是DOM节点"
        console.log(child.nextSibling);
        console.log(child.nextElementSibling);
        console.log(child.previousSibling);
        console.log(child.previousElementSibling);
    </script>

DOM的案例

模态框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.3);
            }
            #content{
                position: relative;
                top: 150px;
                width: 400px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                color: red;
                background-color: #fff;
                margin: auto;
            }
            #span1{
                position: absolute;
                background-color: red;
                top: 0;
                right: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;

            }
        </style>
    </head>
    <body>
        <button id="btn">弹出</button>
    </body>
    <script type="text/javascript">
        //获取dom元素 1.获取事件源
        var oBtn = document.getElementById('btn');
        //创建弹出模态框的相关DOM对象
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');


        // 设置属性
        oDiv.id = 'box';
        oP.id = 'content'
        oP.innerHTML = '模态框成功弹出'
        oSpan.innerHTML = 'X';
        oSpan.id = 'span1'

        // 追加元素
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        // 点击弹出按钮 弹出模态框
        oBtn.onclick = function(){
            //动态的添加到body中一个div
            this.parentNode.insertBefore(oDiv,oBtn)

        }
        // 点击X 关闭模态框
        oSpan.onclick = function(){
            // 移除oDiv元素
            oDiv.parentNode.removeChild(oDiv)
        }   

    </script>
</html>

tab选项卡

<!DOCTYPE html>
<!--
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-06 21:20:00
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-06 22:43:35
 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            margin: 0 auto;
        }

        .content {
            text-align: center;
            position: relative;
        }

        .content .box {
            width: 100%;
            height: 100%;
            font-size: 100px;
            line-height: 100px;
            position: absolute;
            display: none;
        }

        .btn.active {
            color: aliceblue;
            background: #000000;
        }

        .box.active {
            display: block;
            z-index: 1;
        }
    </style>
</head>

<body>

    <div id="box">
        <button class="btn active">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <div class="content">
            <div class="box active">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>

    </div>
    <script>
        // 3.tab选项卡效果
        /* 
            按钮选中时会在按钮上设置一个active的classname，这样就会具有active的样式，同时我们在将原牛对应的内容设置classname和之前的对应的按钮内容的classname的active清除
         */
        /**
         * @name: removeClassName
         * @test: 
         * @msg: 删除之前的含有active的classname
         * @param {type} 
         * @return: 
         */
        function removeClassName(btns, contents, classname) {
            // 循环遍历
            for (var i = 0; i < btns.length; i++) {
                // 获取每一个按钮的classnanmes
                var btn_class_names = btns[i].getAttribute("class").split(" ");
                var content_class_name = contents[i].getAttribute("class").split(" ");
                // 如果找到了和这个class那么说明就是之前的那个active，我们需要把它的active的属性值删除然后重新为他设置未选中状态的属性值
                var btn_index = btn_class_names.indexOf(classname);
                var content_index = content_class_name.indexOf(classname);
                if (btn_index !== -1) {
                    btn_class_names.splice(btn_index, 1);
                    // 处理完成之后我们在吧处理好的classname重新设置给按钮的class
                    btns[i].className = btn_class_names.join(" ");
                }
                if (content_index !== -1) {
                    content_class_name.splice(content_index, 1);
                    contents[i].className = content_class_name.join(" ");
                }
            }
        }
        /**
         * @name: toggleTab
         * @test: 
         * @msg: 切换选项卡
         * @param {type} 
         * @return: 
         */
        function toggleTab() {
            //  获取按钮的节点
            var btns = document.getElementsByClassName("btn");
            // 获取按钮下方的内容
            var contents = document.querySelectorAll(".box");
            // 循环监听按钮点击
            for (var i = 0; i < btns.length; i++) {
                btns[i].onclick = function (e) {
                    // 首先我们需要把清除之前的actIve的classname
                    removeClassName(btns, contents, "active");
                    // 将点击的这个按钮的class追加active属性值
                    this.className += " active";
                    // 按钮状态设置完成之后在将按钮对应的内容显示出来,但是我们需要找到选中按钮对用的内容
                    var index = Array.from(btns).indexOf(this);
                    contents[index].className += " active";
                }
            }
        }

        // 调用切换选项卡函数
        toggleTab();
    </script>
</body>

</html>

使用js完成伪元素标签的变色效果

<!DOCTYPE html>
<!--
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-07 22:07:31
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-07 22:07:32
 -->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current {
            background-color: red;
        }
    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    //需求：鼠标放到哪个button上，改button变成黄色背景（添加类）


    var btnArr = document.getElementsByTagName("button");
    //绑定事件
    for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
        btnArr[i].onmouseover = function () {
            //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
            //排他思想和for循环连用
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";  //【重要】核心代码
        }
    }

    //鼠标离开current时，还原背景色
    for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
        btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
            this.className = "";
        }
    }

</script>

</body>


</html>