DOM入门及增删查改

最新推荐文章于 2023-08-31 09:55:22 发布

「已注销」

最新推荐文章于 2023-08-31 09:55:22 发布

阅读量314

点赞数 2

分类专栏： js 文章标签： js javascript w3c dom jar

本文链接：https://blog.csdn.net/xing_kai_kai/article/details/107265771

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

什么是DOM

DOM全称Document Object Model文档对象模型
Js中通过DOM来对HTML文件进行操作，只要理解DOM就可以随心所欲的操作WEB页面
文档
- 文档表示的就是整个HTMl网页文档
对象
- 对象表示将网页中的每一个部分都转换为了一个对象
模型
- 使用模型来表示对象之间的关系，这样方便我们获取对象

模型

HTML DOM 模型被结构化为对象树：

DOM树

节点

节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。

比如: html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点,但是实际上他们的具体类型是不同的。

比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
节点的类型不同,属性和方法也都不尽相同。
常用节点分为四类：
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容

浏览器已经为我们提供了文档节点，对象这个对象是window属性可以在页面中直接使用，文档节点代表的是整个网页

获取/修改对象

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        //获取到button对象
        var btn = document.getElementById("btn");//输出“我是一个按钮”按钮
        //修改按钮的文字
        btn.innerHTML = "按钮";//输出“按钮”按钮
    </script>
</body>

事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript与HTML之间的交互式通过事件实现的
对于web来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方，按下键盘上某个按键，等等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            我们可以在事件对应的属性中设置一些js代码，
                这样当事件被触发时，这些代码将会执行

            这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
        -->
        <!--<button id="btn" οnmοusemοve="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
        <button id="btn">我是一个按钮</button>
        <script type="text/javascript">

            /*
             * 事件，就是用户和浏览器之间的交互行为，
             *     比如：点击按钮，鼠标移动、关闭窗口。。。
             */



            //获取按钮对象
            var btn = document.getElementById("btn");

            /*
             * 可以为按钮的对应事件绑定处理函数的形式来响应事件
             *     这样当事件被触发时，其对应的函数将会被调用
             */

            //绑定一个单击事件
            //像这种为单击事件绑定的函数，我们称为单击响应函数
            btn.onclick = function(){
                alert("你还点~~~");
            };


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

例举一些事件的用法

onload

为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            /*
             * 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
             *     读取到一行就运行一行,如果将script标签写到页面的上边，
             *     在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
             *     会导致无法获取到DOM对象
             */



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


        </script>
    </head>
    <body>

        <button id="btn">点我一下</button>

        <!--<script type="text/javascript">

            /*
             * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
             */
            //获取id为btn的按钮
            var btn = document.getElementById("btn");
            //为按钮绑定一个单击响应函数
            btn.onclick = function(){
                alert("hello");
            };

        </script>-->

    </body>
</html>

获取元素节点

通过document对象调用

1、getElementById() —通过id属性获取一个元素节点对象

2、getElementByTagName()—通过标签名获取一组元素节点对象

3、getElementByName() —通过name属性获取一组元素节点对象
通过具体的元素节点调用

1、getElrmentsByTagName()—方法，返回当前节点的指定标签名后代节点

2、childNodes —属性，表示当前节点的所有子节点

3、firstChild —属性，表示当前节点的第一个子节点

4、lastChild —属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用

1、parentNode —属性，表示当前节点的父节点

2、previousSibling —属性，表示当前节点的前一个兄弟节点

3、nextSibling —属性，便是当前节点的后一个兄弟节点

DOM查询一

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style/css.css" />
        <script type="text/javascript">

            /*
             * 定义一个函数，专门用来为指定元素绑定单击响应函数
             *     参数：
             *         idStr 要绑定单击响应函数的对象的id属性值
             *         fun 事件的回调函数，当单击元素时，该函数将会被触发
             */
            function myClick(idStr , fun){
                var btn = document.getElementById(idStr);
                btn.onclick = fun;
            }

            window.onload = function(){

                //为id为btn01的按钮绑定一个单击响应函数
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                    //查找#bj节点
                    var bj = document.getElementById("bj");
                    //打印bj
                    //innerHTML 通过这个属性可以获取到元素内部的html代码
                    alert(bj.innerHTML);
                };


                //为id为btn02的按钮绑定一个单击响应函数
                var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
                    //查找所有li节点
                    //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                    //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
                    //即使查询到的元素只有一个，也会封装到数组中返回
                    var lis = document.getElementsByTagName("li");

                    //打印lis
                    //alert(lis.length);

                    //变量lis
                    for(var i=0 ; i<lis.length ; i++){
                        alert(lis[i].innerHTML);
                    }
                };


                //为id为btn03的按钮绑定一个单击响应函数
                var btn03 = document.getElementById("btn03");
                btn03.onclick = function(){
                    //查找name=gender的所有节点
                    var inputs = document.getElementsByName("gender");

                    //alert(inputs.length);

                    for(var i=0 ; i<inputs.length ; i++){
                        /*
                         * innerHTML用于获取元素内部的HTML代码的
                         *     对于自结束标签，这个属性没有意义
                         */
                        //alert(inputs[i].innerHTML);
                        /*
                         * 如果需要读取元素节点属性，
                         *     直接使用 元素.属性名
                         *         例子：元素.id 元素.name 元素.value
                         *         注意：class属性不能采用这种方式，
                         *             读取class属性时需要使用 元素.className
                         */
                        alert(inputs[i].className);
                    }
                };

                //为id为btn04的按钮绑定一个单击响应函数
                var btn04 = document.getElementById("btn04");
                btn04.onclick = function(){

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

                    //查找#city下所有li节点
                    var lis = city.getElementsByTagName("li");

                    for(var i=0 ; i<lis.length ; i++){
                        alert(lis[i].innerHTML);
                    }

                };

                //为id为btn05的按钮绑定一个单击响应函数
                var btn05 = document.getElementById("btn05");
                btn05.onclick = function(){
                    //获取id为city的节点
                    var city = document.getElementById("city");
                    //返回#city的所有子节点
                    /*
                     * childNodes属性会获取包括文本节点在呢的所有节点
                     * 根据DOM标签标签间空白也会当成文本节点
                     * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
                     *     所以该属性在IE8中会返回4个子元素而其他浏览器是9个
                     */
                    var cns = city.childNodes;

                    //alert(cns.length);

                    /*for(var i=0 ; i<cns.length ; i++){
                        alert(cns[i]);
                    }*/

                    /*
                     * children属性可以获取当前元素的所有子元素
                     */
                    var cns2 = city.children;
                    alert(cns2.length);
                };

                //为id为btn06的按钮绑定一个单击响应函数
                var btn06 = document.getElementById("btn06");
                btn06.onclick = function(){
                    //获取id为phone的元素
                    var phone = document.getElementById("phone");
                    //返回#phone的第一个子节点
                    //phone.childNodes[0];
                    //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                    var fir = phone.firstChild;

                    //firstElementChild获取当前元素的第一个子元素
                    /*
                     * firstElementChild不支持IE8及以下的浏览器，
                     *     如果需要兼容他们尽量不要使用
                     */
                    //fir = phone.firstElementChild;

                    alert(fir);
                };

                //为id为btn07的按钮绑定一个单击响应函数
                myClick("btn07",function(){

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

                    //返回#bj的父节点
                    var pn = bj.parentNode;

                    alert(pn.innerHTML);

                    /*
                     * innerText
                     *     - 该属性可以获取到元素内部的文本内容
                     *     - 它和innerHTML类似，不同的是它会自动将html去除
                     */
                    //alert(pn.innerText);


                });


                //为id为btn08的按钮绑定一个单击响应函数
                myClick("btn08",function(){

                    //获取id为android的元素
                    var and = document.getElementById("android");

                    //返回#android的前一个兄弟节点（也可能获取到空白的文本）
                    var ps = and.previousSibling;

                    //previousElementSibling获取前一个兄弟元素，IE8及以下不支持
                    //var pe = and.previousElementSibling;

                    alert(ps);

                });

                //读取#username的value属性值
                myClick("btn09",function(){
                    //获取id为username的元素
                    var um = document.getElementById("username");
                    //读取um的value属性值
                    //文本框的value属性值，就是文本框中填写的内容
                    alert(um.value);
                });


                //设置#username的value属性值
                myClick("btn10",function(){
                    //获取id为username的元素
                    var um = document.getElementById("username");

                    um.value = "今天天气真不错~~~";
                });


                //返回#bj的文本值
                myClick("btn11",function(){

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

                    //alert(bj.innerHTML);
                    //alert(bj.innerText);

                    //获取bj中的文本节点
                    /*var fc = bj.firstChild;
                    alert(fc.nodeValue);*/

                    alert(bj.firstChild.nodeValue);


                });

            };


        </script>
    </head>
    <body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>

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

                <br>
                <br>

                <p>
                    你喜欢哪款单机游戏?
                </p>

                <ul id="game">
                    <li id="rl">红警</li>
                    <li>实况</li>
                    <li>极品飞车</li>
                    <li>魔兽</li>
                </ul>

                <br />
                <br />

                <p>
                    你手机的操作系统是?
                </p>

                <ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
            </div>

            <div class="inner">
                gender:
                <input class="hello" type="radio" name="gender" value="male"/>
                Male
                <input class="hello" type="radio" name="gender" value="female"/>
                Female
                <br>
                <br>
                name:
                <input type="text" name="name" id="username" value="abcde"/>
            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">查找#bj节点</button></div>
            <div><button id="btn02">查找所有li节点</button></div>
            <div><button id="btn03">查找name=gender的所有节点</button></div>
            <div><button id="btn04">查找#city下所有li节点</button></div>
            <div><button id="btn05">返回#city的所有子节点</button></div>
            <div><button id="btn06">返回#phone的第一个子节点</button></div>
            <div><button id="btn07">返回#bj的父节点</button></div>
            <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
            <div><button id="btn09">返回#username的value属性值</button></div>
            <div><button id="btn10">设置#username的value属性值</button></div>
            <div><button id="btn11">返回#bj的文本值</button></div>
        </div>
    </body>
</html>

DOM查询二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            window.onload = function(){

                //获取body标签，获取的是一个伪数组
                //var body = document.getElementsByTagName("body")[0];
                console.log(body);
                /*
                 * 在document中有一个属性body，它保存的是body的引用
                 */
                var body = document.body;

                /*
                 * document.documentElement保存的是html根标签
                 */
                var html = document.documentElement;

                //console.log(html);
                var html= document.getElementsByTagName("html")[0]
                console.log(html);

                /*
                 * document.all代表页面中所有的元素(现已被废弃)
                 */
                var all = document.all;

                console.log(all, all.length)//HTMLAllCollection(7) [html, head, meta, meta, title, body, script, viewport: meta] 7

                /*for(var i=0 ; i<all.length ; i++){
                    console.log(all[i]);
                }*/

                //all = document.getElementsByTagName("*");
                //console.log(all.length);


                /*
                 * 根据元素的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()但是可以使用querySelector()代替
                 *     - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
                 */
                var div = document.querySelector(".box1 div");

                var box1 = document.querySelector(".box1")

                console.log(div.innerHTML);

                console.log(box1.innerText);//我是box1中的div,我是box1中的div,
                                    //我是box1中的div
                console.log(box1.innerHTML);// 我是box1中的div,我是box1中的div,
                                    // <div>我是box1中的div</div>

                /*
                 * document.querySelectorAll()
                 *     - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
                 *     - 即使符合条件的元素只有一个，它也会返回数组
                 */
                box1 = document.querySelectorAll(".box1");
                // box1 = document.querySelectorAll("#box2");
                console.log(box1);
                console.log(box1[0]);

            };


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

        <div></div>
    </body>
</html>

DOM增删改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style/css.css" />
        <script type="text/javascript">

            window.onload = function() {

                //创建一个"广州"节点,添加到#city下
                myClick("btn01",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前面
                myClick("btn02",function(){
                    //创建一个广州
                    var li = document.createElement("li");
                    var gzText = document.createTextNode("广州");
                    li.appendChild(gzText);

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

                    //获取city
                    var city = document.getElementById("city");

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


                });


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

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

                    //获取city
                    var city = document.getElementById("city");

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


                });

                //删除#bj节点
                myClick("btn04",function(){
                    //获取id为bj的节点
                    var bj = document.getElementById("bj");
                    //获取city
                    var city = document.getElementById("city");

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

                    bj.parentNode.removeChild(bj);
                });


                //读取#city内的HTML代码
                myClick("btn05",function(){
                    //获取city
                    var city = document.getElementById("city");

                    alert(city.innerHTML);
                });

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

                myClick("btn07",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);

                });


            };

            function myClick(idStr, fun) {
                var btn = document.getElementById(idStr);
                btn.onclick = fun;
            }


        </script>

    </head>
    <body>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>

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

            </div>
        </div>
        <div id="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>

图片切换练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 500px;
                margin: 50px auto;
                padding: 10px;
                background-color: greenyellow;
                /*设置文本居中*/
                text-align: center;
            }
        </style>

        <script type="text/javascript">

            window.onload = function(){

                /*
                 * 点击按钮切换图片
                 */

                //获取两个按钮
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");

                /*
                 * 要切换图片就是要修改img标签的src属性
                 */

                //获取img标签
                var img = document.getElementsByTagName("img")[0];

                //创建一个数组，用来保存图片的路径
                var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];

                //创建一个变量，来保存当前正在显示的图片的索引
                var index = 0;

                //获取id为info的p元素
                var info = document.getElementById("info");
                //设置提示文字
                info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";


                //分别为两个按钮绑定单击响应函数
                prev.onclick = function(){

                    /*
                     * 切换到上一张，索引自减
                     */
                    index--;

                    //判断index是否小于0
                    if(index < 0){
                        index = imgArr.length - 1;
                    }

                    img.src = imgArr[index];

                    //当点击按钮以后，重新设置信息
                    info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
                };

                next.onclick = function(){

                    /*
                     * 切换到下一张是index自增
                     */
                    index++;

                    if(index > imgArr.length - 1){
                        index = 0;
                    }

                    //切换图片就是修改img的src属性
                    //要修改一个元素的属性 元素.属性 = 属性值
                    img.src = imgArr[index];

                    //当点击按钮以后，重新设置信息
                    info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";

                };


            };


        </script>
    </head>
    <body>
        <div id="outer">

            <p id="info"></p>

            <img src="img/1.jpg" alt="冰棍" />

            <button id="prev">上一张</button>
            <button id="next">下一张</button>

        </div>
    </body>
</html>

「已注销」

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM入门及增删查改

什么是DOMDOM全称Document Object Model文档对象模型Js中通过DOM来对HTML文件进行操作，只要理解DOM就可以随心所欲的操作WEB页面文档文档表示的就是整个HTMl网页文档对象对象表示将网页中的每一个部分都转换为了一个对象模型使用模型来表示对象之间的关系，这样方便我们获取对象模型HTML DOM 模型被结构化为对象树：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nr5Kg2d-15943831242
复制链接

扫一扫

专栏目录