JavaScript 7—DOM

DOM全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲地操作web页面

Document（文档）- 整个的HTML网页文档
Object（对象）- 将网页中的每一个部分都转换为了一个对象
Model（模型）- 使用模型来表示对象之间的关系，这样方便我们获取对象

节点

节点Node ,是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如: html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点,但是实际上他们的具体类型是不同的。比如：标签我们称为元素节点属性称为属性节点、文本称为文本节点文档称为文档节点。节点的类型不同，属性和方法也都不尽相同。

常用节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        /*
            浏览器已经为我们提供了 文档节点对象 这个对象是window属性
                可以在页面中直接使用，文档节点代表的是整个网页
        */
        console.log(document);//object HTMLDocument

        //获取到button对象
        var btn = document.getElementById("btn");
        console.log(btn);//object HTMLButtonElement

        //修改按钮的文字
        console.log(btn.innerHTML);//我是一个按钮
        btn.innerHTML = "I am Button.";
    </script>
</body>

</html>

获取元素节点

getElementById() - 通过id属性获取一个元素节点对象
- 通过innerHTML属性可以获取到元素内部的html代码，对于自结束标签这个属性没有意义
getElementsByTagName() - 通过标签名获取一组元素节点对象
- 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到该数组中，即使查询到的元素只有一个，它也会保存到数组中
getElementsByName() - 通过name属性获取一组元素节点对象

如果需要读取元素节点属性，可以直接使用元素.属性名

　　例子：元素.id 元素.name 元素.value

　　注意：class属性不能采用这种方法，读取class时，需要使用元素.className

获取元素节点的子节点

通过具体的元素节点调用

getElementsByTagName() - 方法,返回当前节点的指定标签名后代节点
childNodes - 属性,表示当前节点的所有子节点
- 根据DOM标签间空白也会被当成文本节点，该属性会获取包含文字节点在内的所有节点
- 注意：IE8及以下的浏览器中，不会讲空白文本当成子节点
- 可以使用children属性来表示当前节点所有子元素
firstChild - 属性,表示当前节点的第一个子节点（包括文本，空格）
- firstElementChild获取当前元素的第一个子元素，但是它不支持IE8及以下的浏览器
lastChild - 属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用

parentNode - 属性，表示当前一节点的父节点
- innerText - 该属性可以获取元素内部文本内容，它和innerHtml类似，不同的是，它会自动将HTML标签去除
previousSibling - 属性，表示当前节点的前一个兄弟节点
- 也可能获取到空白文本
- previousElementSibling可以获取前一个兄弟元素，不包括空白文本IE8及以下不支持
nextSibling - 属性，表示当前节点的后一个兄弟节点

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            //获取body标签
            // var body = document.getElementsByTagName("body")[0];
            // 在document中有一个属性body，它保存的是body的引用
            var body = document.body;
            console.log(body);

            // document.documentElement保存的是html根标签
            var html = document.documentElement;
            console.log(html);

            // document.all代表页面中的所有元素
            var all = document.all;
            console.log(all);// 可能会是undifined
            for (var i = 0; i < all.length; i++) {
                console.log(all[i]);
            }

            all = document.getElementsByTagName("*");

            /*
                根据元素的class属性值查询一组元素节点对象
                getElementsByClassName可以根据class属性值获取一组元素节点对象
                 但是该方法不支持IE8及以下的浏览器
            */
            var box1 = document.getElementsByClassName("box1");
            console.log(box1.length);

            //获取页面中的所有的div
            var divs = document.getElementsByTagName("div");
            //获取class为box1中的所有的div
            // .box1 div
            /*
                document.querySelector();
                    需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
                    虽然IE8中没有getElementsByClassName()但是可以使用qurrySelector()代替
                    使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
            */
            var div = document.querySelector(".box1 div");
            console.log(div.innerHTML);

            var box1 = document.querySelector(".box1");
        }
          /*
            document.querySelectorAll();
                该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
                即使符合条件的元素只有一个，它也会返回数组
        */
        box1 = document.querySelectorAll(".box1");
    </script>
</head>

<body>
    <div class="box1">
        我是第一个box1
        <div>我是box1中的div</div>
        <div></div>
        <div></div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件实现的。

对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 
        我们可以在事件对应的属性中设置一些JS代码，
            这样当事件被触发时，这些代码将会被执行 
        
        这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
    -->
    <!-- <button id="btn" ondbclick="alert('讨厌，你点我干嘛')">我是一个按钮</button> -->
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        /*
            事件，就是用户和浏览器之间的交互行为
             比如：点击按钮、鼠标移动、关闭窗口。
        */

        //获取对象
        var btn = document.getElementById("btn");
        /*
            可以为按钮的对应时间绑定处理函数的形式来响应事件
             这样当事件被触发时，其对应的函数将会被调用
        */
        //绑定一个单击事件
        //像这种为单击事件绑定的函数，我们称为单击响应函数
        btn.onclick = function () {
            alert("你还点~~~");
        }
    </script>
</body>

</html>

script标签的位置和文档的加载

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            浏览器在加载一个页面时，是按照自上向下的顺序加载的
             读取到一行就运行一行，如果将script标签写到页面的上边，
             在代码执行时，页面还没有加载，DOM对象也没有加载
             会导致无法获取到DOM对象

            将js代码写到页面的下部，就是为了可以在页面加载完毕之后再执行js代码

        */
        // //获取对象
        // var btn = document.getElementById("btn");
        // //绑定一个单击响应函数
        // btn.onclick = function () {
        //     alert("你还点~~~");
        // }

        /*
            onload事件会在整个页面加载完成之后才会触发
             为window绑定一个onload
                该事件对应的响应函数将会在页面加载完成之后执行
                这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
        */
        window.onload = function () {
            // alert("hello");

            //获取对象
            var btn = document.getElementById("btn");
            //绑定一个单击响应函数
            btn.onclick = function () {
                alert("你还点~~~");
            }
        }
    </script>
</head>

<body>
    <button id="btn">我是一个按钮</button>
</body>

</html>

DOM增删改

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM查询</title>
    <style>
        .w {
            width: 940px;
            margin: 10px auto;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .total {
            float: left;
        }

        .inner {
            margin-top: 50px;
            padding: 20px;
            width: 400px;
            border: 1px solid black;
        }

        li {
            width: 40px;
            height: 100%;
            background-color: aquamarine;
            float: left;
            list-style: none;
            border: 1px solid;
            margin: 0 10px;
            font-size: 15px;
        }

        .btnList {
            margin: 0 40px;
            padding: 20px;
            float: left;
            width: 300px;
        }

        button {
            margin-top: 10px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            //创建一个“广州”节点，添加到#city下
            btn01.onclick = function () {
                // 创建广州节点 <li>广州</li>

                // 创建li元素节点
                /*
                    document.createElement()
                        可以用于创建一个元素节点对象
                        它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
                        并将创建好的对新对象作为返回值返回
                */
                var li = document.createElement("li");

                // 创建广州文本节点
                /*
                    document.createTextNode()
                        可以用来创建一个文本节点对象
                        需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                */
                var gzText = document.createTextNode("广州");

                //将gzText设置li的子节点
                /*
                    appendChild()
                        向一个父节点中添加一个新的子节点
                        用法：父节点，appendChild(子节点)
                */
                li.appendChild(gzText);

                // 获取id为city的节点
                var city = document.getElementById("city");

                // 将广州添加到city下
                city.appendChild(li);
            };


            //将“广州”节点插入到#bj前面
            btn02.onclick = function () {
                // 创建一个广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                // 获取id为bj的节点
                var bj = document.getElementById("bj");

                var city = document.getElementById("city");

                /*
                    insertBefore()
                        可以在指定的子节点前插入新的子节点
                        语法：
                            父节点.insertBefore(新节点,旧节点);
                */
                city.insertBefore(li, bj);
            }


            //使用“广州”节点替换#bj节点
            btn03.onclick = function () {
                // 创建一个广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                // 获取id为bj的节点
                var bj = document.getElementById("bj");

                var city = document.getElementById("city");

                /*
                    replaceChild()
                        可以使用指定的子节点替换已有的子节点
                        语法：
                            父节点.replaceChild(新节点,旧节点);
                */
                city.replaceChild(li, bj);
            }


            //删除#bj节点
            btn04.onclick = function () {
                // 创建一个广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                // 获取id为bj的节点
                var bj = document.getElementById("bj");

                var city = document.getElementById("city");

                /*
                    removeChild()
                        可以删除一个子节点
                        语法：
                            父节点.removeChild(子节点);
                    
                        子节点.parentNode.removeChild(子节点);
                */
                // city.removeChild(bj);

                bj.parentNode.removeChild(bj);
            }


            //读取#city内的HTML代码
            btn05.onclick = function () {
                // 获取city
                var city = document.getElementById("city");
                alert(city.innerHTML);
            }


            //设置#bj内的HTML代码
            btn06.onclick = function () {
                // 获取city
                var bj = document.getElementById("bj");
                bj.innerHTML = "昌平";
            }


            btn07.onclick = function () {
                // 向city中添加广州
                var city = document.getElementById("city");

                /*
                    使用innerHTML也可以完成DOM的增删改的相关操作
                     一般我们会两种方式结合使用
                */
                // city.innerHTML+="<li>广州</li>";

                // 创建一个li
                var li = document.createElement("li");
                // 向li中设置文本
                li.innerHTML = "广州";
                // 将li添加到city中
                city.appendChild(li);
            }
        }

    </script>
</head>

<body class="w">
    <div class="total">
        <div class="inner clearfix">

            <p>你喜欢那个城市？</p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

        </div>
    </div>

    <div class="btnList">
        <div><button id="btn01">创建一个“广州”节点，添加到#city下</button></div>
        <div><button id="btn02">将“广州”节点插入到#bj前面</button></div>
        <div><button id="btn03">使用“广州”节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个“广州”节点，添加到#city下</button></div>
    </div>
</body>

</html>

posted @ 2020-07-29 12:19 我等着你阅读(130) 评论(0) 收藏举报

刷新页面返回顶部

老顽固小可爱