今天的码农女孩做了关于DOM查询的剩余方法及练习

最新推荐文章于 2024-10-18 17:51:23 发布

丁丁丁dingdingding

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量147

点赞数

分类专栏：小练习笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/123753183

版权

笔记同时被 2 个专栏收录

91 篇文章 0 订阅

订阅专栏

小练习

47 篇文章 0 订阅

订阅专栏

笔记的形式我写在了编译器里

<!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>
    <script>
        window.onload=function(){
            //获取body标签
            var body=document.getElementsByTagName("body")[0];
            //在documemt中有一个属性body,它保存的是body的引用
            var body=document.body;
            //documemt.documentElement保存的是html标签
            var html=document.documentElement;
            //document.all代表页面所有元素html head meta title script body有一个算一个
            var all=document.all;
            //*表示所有元素
            all=document.getElementsByTagName("*")
            //根据元素的class属性值查询一组元素节点对象
            //getElementsByClassName该方法不支持IE8一下的浏览器
            var box1=document.getElementsByClassName("box1");
            //获取页面所有的div
            var divs=document.getElementsByTagName("div");
            //获取box1里面的div
            //document.querySelector需要选择器的字符串作为参数，根据css选择器查询一个元素节点对象
            //虽然IE8中没有getElementsByClassName但是可以使用document.querySelector使用该方法会返回唯一的元素如果有多个就返回第一个
            var div=document.querySelector(".box1 div");
            //document.querySelectorAll会将符号条件的元素封装在一个数组中返回，即使符号条件的元素只有一个也会返回数组
            var box2=document.querySelectorAll("#box2");
        }
    </script>
</head>
<body>
    <div id="box2"></div>
    <div class="box1">
        <div>我是box1中的</div>
    </div>
    <div></div>
</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>
    <script>
        function myClick(idStr,fun){
            var btn=document.getElementById(idStr);
            btn.onclick=fun;
        }
        window.onload=function(){
            //创建一个广州节点添加到#city下
            myClick("btn01",function(){
                //创建li节点
               // document.createElement()可用于创建一个元素节点对象
               var li=document.createElement("li");
               //创建广州文本节点
               //document.createTextNode()创建一个文本节点对象，并将新的节点返回
               var gzText=document.createTextNode("广州");
               //将gzText设置li的子节点
               //appendChild()向父节点中添加一个新的子节点，用法：父节点.appendChild(子节点)
               li.appendChild(gzText);
               //将广州添加到city下
               var city=document.getElementById("city");
               city.appendChild(li);
            })
            //将广州节点插入到#bj前面
            myClick("btn02",function(){
                var li=document.createElement("li");
                var gzText=document.createTextNode("广州");
                li.appendChild(gzText);
                var bj=document.getElementById("bj");
                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);
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                // replaceChild可以在指定的子节点替换已有的子节点，用法：父节点.replaceChild(新节点，旧节点)
                city.replaceChild(li,bj);
            })
            //删除#bj节点
            myClick("btn04",function(){
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                // removeChild可以删除一个子节点，用法：父节点.removeChild(子节点)
                city.removeChild(bj);
                // bj.parentNode.removeChild(bj)更简单
            })
             //读取#city内的html代码
             myClick("btn05",function(){
                var city=document.getElementById("city");
                alert(city.innerHTML);
            })
             //修改#bj内的HTML代码
             myClick("btn06",function(){
                var bj=document.getElementById("bj");
                bj.innerHTML="昌平";
            })
            //同btn01更简单方法，但是会一般两种方法结合使用
            myClick("btn07",function(){
                //向city添加广州
                var city=document.getElementById("city");
                // city.innerHTML+="<li>广州</li>";
                var li=document.createElement("li");
                li.innerHTML="广州";
                city.appendChild(li);
            })
        };
        
    </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>