DOM查询练习

最新推荐文章于 2023-01-05 14:58:46 发布

Auroraɔ:

最新推荐文章于 2023-01-05 14:58:46 发布

阅读量200

点赞数 3

分类专栏：笔记前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_63050915/article/details/125209974

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

笔记

9 篇文章 0 订阅

订阅专栏

首先，我们看要求和页面。（跟着尚硅谷学JS的举爪爪@~@）

解析都放在代码里了，可以慢慢看

JS部分代码：

<script type="text/javascript">
        window.onload = function(){//在页面加载完成后执行函数
            
            var btn01 =document.getElementById("btn01");//先获取button标签
            btn01.onclick = function(){
                var bj = document.getElementById("bj");//获取id为bj的标签
                bj.style.backgroundColor = "yellow";//通过style属性值改变背景色
            }
            btn01.ondblclick = function(){//双击还原
                var bj = document.getElementById("bj");
                bj.style.backgroundColor = "rgb(41, 219, 17)";
            }
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){
                var lis = document.getElementsByTagName("li");
                for(var i = 0;i < lis.length ; i++){
                    lis[i].style.backgroundColor = "yellow";   
                }
            }
            btn02.ondblclick = function(){
                var lis = document.getElementsByTagName("li");
                for(var i = 0;i < lis.length ; i++){
                    lis[i].style.backgroundColor = "rgb(41, 219, 17)";  
                }
            }
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function(){
                var gen = document.getElementsByName("gender");
                for(var i=0;i<gen.length;i++){
                    alert(gen[i].value);
                }
                
            }
           var btn04 = document.getElementById("btn04");
           btn04.onclick = function(){
               var city = document.getElementById("city");
               var ct =  city.getElementsByTagName("li"); //获取li标签节点
               for(var i=0;i<ct.length;i++){
                   alert(ct[i].innerHTML);
               }

           }
           var btn05 = document.getElementById("btn05");
           btn05.onclick = function(){
               var city = document.getElementById("city");
               var ct =  city.childNodes; //获取所有子节点；
               for(var i=0;i<ct.length;i++){
                   alert(ct[i].innerHTML);
               }
           }
           var btn06 = document.getElementById("btn06");
           btn06.onclick = function(){
               var phone = document.getElementById("phone");
               var ph =  phone.firstChild; //firstChild获取第一个子节点，lastchild获取最后一个子节点
               alert(ph.innerHTML);
           }
           var btn07 = document.getElementById("btn07");
           btn07.onclick = function(){
               var bj = document.getElementById("bj");
               var p =  bj.parentNode; //获取父节点
               alert(p.innerText);//父节点的子元素
           }
           function myClick(idstr,fun){
                var btn = document.getElementById(idstr);
                btn.onclick = fun;
            }
            myClick("btn08",function(){
                var a = document.getElementById("android");
                var f = a.previousSibling;//获取该节点前一个节点（兄弟节点）
                alert(f.innerHTML);
            });
            // myClick("btn09",function(){
            //     var a = document.getElementById("android");
            //     var f = a.nextSibling;//获取该节点后一个节点（兄弟节点）
            //     alert(f.innerHTML);
            // });
            myClick("btn09",function(){
                var a = document.getElementById("username");
                alert(a.value);
            });
            myClick("btn10",function(){
                var a = document.getElementById("username");
                a.value = "你怎么这么好看！";
            });
            myClick("btn11",function(){
                var a = document.getElementById("bj");
                alert(a.innerHTML);
            });
        }
    </script>

全部代码：

<!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>
    <style>
        .a {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;  
        }
        .total {
            float: left; 
        }
        .bom {
            float: left;
            margin-left: 10px;
        }
        .bom div {
            margin-bottom: 14px;
        }
        .inner {
            padding: 10px;
            width: 450px;
            height: 290px;
            border: 1px solid black;
        }
        .inner1 {
            margin-top: 5px;
            padding: 10px;
            width: 450px;
            height: 70px;
            border: 1px solid black;
        }
        ul {
            margin-left: -36px;
        }
        li {
            padding: 0px 3px;
            float: left;
            margin-right: 10px;
            list-style: none;
            height: 30px;
            line-height: 30px;
            background-color: rgb(41, 219, 17);
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){//在页面加载完成后执行函数
            
            var btn01 =document.getElementById("btn01");//先获取button标签
            btn01.onclick = function(){
                var bj = document.getElementById("bj");//获取id为bj的标签
                bj.style.backgroundColor = "yellow";//通过style属性值改变背景色
            }
            btn01.ondblclick = function(){//双击还原
                var bj = document.getElementById("bj");
                bj.style.backgroundColor = "rgb(41, 219, 17)";
            }
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){
                var lis = document.getElementsByTagName("li");
                for(var i = 0;i < lis.length ; i++){
                    lis[i].style.backgroundColor = "yellow";   
                }
            }
            btn02.ondblclick = function(){
                var lis = document.getElementsByTagName("li");
                for(var i = 0;i < lis.length ; i++){
                    lis[i].style.backgroundColor = "rgb(41, 219, 17)";  
                }
            }
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function(){
                var gen = document.getElementsByName("gender");
                for(var i=0;i<gen.length;i++){
                    alert(gen[i].value);
                }
                
            }
           var btn04 = document.getElementById("btn04");
           btn04.onclick = function(){
               var city = document.getElementById("city");
               var ct =  city.getElementsByTagName("li"); //获取li标签节点
               for(var i=0;i<ct.length;i++){
                   alert(ct[i].innerHTML);
               }

           }
           var btn05 = document.getElementById("btn05");
           btn05.onclick = function(){
               var city = document.getElementById("city");
               var ct =  city.childNodes; //获取所有子节点；
               for(var i=0;i<ct.length;i++){
                   alert(ct[i].innerHTML);
               }
           }
           var btn06 = document.getElementById("btn06");
           btn06.onclick = function(){
               var phone = document.getElementById("phone");
               var ph =  phone.firstChild; //firstChild获取第一个子节点，lastchild获取最后一个子节点
               alert(ph.innerHTML);
           }
           var btn07 = document.getElementById("btn07");
           btn07.onclick = function(){
               var bj = document.getElementById("bj");
               var p =  bj.parentNode; //获取父节点
               alert(p.innerText);//父节点的子元素
           }
           function myClick(idstr,fun){
                var btn = document.getElementById(idstr);
                btn.onclick = fun;
            }
            myClick("btn08",function(){
                var a = document.getElementById("android");
                var f = a.previousSibling;//获取该节点前一个节点（兄弟节点）
                alert(f.innerHTML);
            });
            // myClick("btn09",function(){
            //     var a = document.getElementById("android");
            //     var f = a.nextSibling;//获取该节点后一个节点（兄弟节点）
            //     alert(f.innerHTML);
            // });
            myClick("btn09",function(){
                var a = document.getElementById("username");
                alert(a.value);
            });
            myClick("btn10",function(){
                var a = document.getElementById("username");
                a.value = "你怎么这么好看！";
            });
            myClick("btn11",function(){
                var a = document.getElementById("bj");
                alert(a.innerHTML);
            });
        }
    </script>
    </head>
<body>
    <div class="a">
        <div class="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>红警</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="inner1">
                gender:
                <input type="radio" name="gender" value="male">
                Male
                <input type="radio" name="gender" value="female">
                Female
                <br><br>
                name:
                <input type="text" name="name" id="username" value="abcde">
            </div>
        </div>
        <div class="bom">
            <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>
    </div>
</body>
</html>