DOM查询练习

最新推荐文章于 2022-11-15 23:21:14 发布

黑入腾讯的小龙女

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量53

点赞数

分类专栏： JavaWeb 文章标签： css dom

本文链接：https://blog.csdn.net/weixin_55856743/article/details/119595025

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM查询练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript">
        window.onload = function () {
            //1.查找#bj节点
            document.getElementById("btn01").onclick = function () {
                var bjObj = document.getElementById("bj");
                alert(bjObj.innerHTML);
            }
            //2.查找所有li节点
            var btn02Ele = document.getElementById("btn02");
            btn02Ele.onclick = function(){
                var lis = document.getElementsByTagName("li");
                alert(lis.length)
            };
            //3.查找name=gender节点
            var btn03Ele = document.getElementById("btn03");
            btn03Ele.onclick = function(){
                var genders = document.getElementsByName("gender");
                alert(genders.length);
            };
            //4.查找#city下所有li节点
            var btn04Ele = document.getElementById("btn04");
            btn04Ele.onclick = function(){
                //1.获取id为city的节点
                //2.通过city节点.getElementsByTagName按标签名查子节点
                var lis = document.getElementById("city").getElementsByTagName("li")
                alert(lis.length)
            }
            //5.返回#city的所有子节点
            var btn05Ele = document.getElementById("btn05");
            btn05Ele.onclick = function(){
                //1.获取id为city的节点
                //2.通过city获取所有子节点
                alert(document.getElementById("city").childNodes.length)
            }
            //6.返回#phone的第一个节点
            var btn06Ele = document.getElementById("btn06");
            btn06Ele.onclick = function(){
                //1.查找id为phone的节点
                alert(document.getElementById("phone").firstElementChild.innerHTML)
            }
            //7.返回#bj的父节点
            var btn07Ele = document.getElementById("btn07");
            btn07Ele.onclick = function(){
                //1.查找id为bj的节点
                //2.bj节点获取父节点
                alert(document.getElementById("bj").parentElement.innerHTML)
            }
            //8.返回#android的前一个父节点
            var btn08Ele = document.getElementById("btn08");
            btn08Ele.onclick = function(){
                //1.获取id为Android的节点
                //2.通过android节点获取前面兄弟节点
                alert(document.getElementById("android").previousElementSibling.innerHTML)
            }
            //9.返回#username的value属性值
            var btn09Ele = document.getElementById("btn09");
            btn09Ele.onclick = function(){
                alert(document.getElementById("username").value)
            }
            //10.设置#username的value属性值
            var btn10Ele = document.getElementById("btn10");
            btn10Ele.onclick = function(){
               document.getElementById("username").value = "入秋的第一杯奶茶";
           }
            //11.返回#bj的文本值
            var btn11Ele = document.getElementById("btn11");
            btn11Ele.onclick = function(){
                alert(document.getElementById("bj").innerHTML)
            }

        }
    </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 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 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>

CSS

@CHARSET "UTF-8";

body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

button {
    width: 300px;
    margin-bottom: 10px;
}

#btnList {
    float:left;
}

#total{
    width: 450px;
    float:left;
}

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.inner li{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float:left;
}

.inner{
    width:400px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    padding: 10px;
    float: left;
}

黑入腾讯的小龙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM查询练习

DOM查询练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css.css"> <script type="text/javascript"> windo
复制链接

扫一扫

专栏目录