JavaScript练习—DOM查询

<!doctype html>
<html>

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

        .total{
            float: left;
        }

        .inner1,
        .inner2 {
            padding: 20px;
            width: 300px;
            border: 1px solid black;
        }

        li {
            width: 60px;
            height: 100%;
            background-color: aquamarine;
            list-style: none;
            border: 1px solid;
            margin-right: 2px;
            margin-bottom: 10px;
            font-size: 15px;
        }

        .btnList {
            margin: 0 40px;
            padding: 20px;
            float: left;
            width: 300px;
            border: 1px solid black;
        }
    </style>

    <script>
        /*
        定义一个函数 ，专门用来为指定元素绑定单击响应函数
        参数：
            idstr 要绑定单击响应函数的对象的id属性值
        */
        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");
                alert(bj.innerHTML);
            }

            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //查找所有li的节点
                //这个方法会给我们返回一个类数组对象，所有查询到的元素都会分装到对象中
                var li = document.getElementsByTagName("li");
                for (var i = 0; i <= li.length; i++) {
                    alert(li[i].innerHTML);
                    /*
                    innerHTML用于获取内部的HTML代码的
                    对于自结束标签，这个属性没有意义
                    */
                }
            }

            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                //查找name=gender的节点
                var gender = document.getElementsByName("gender");
                for (var i = 0; i <= gender.length; i++) {
                    alert(gender[i].value);
                    /*
                    如果要读取元素节点属性
                    直接使用元素.属性名
                    例如：元素.name 元素.id
                    注意class属性不能采用这种方式
                    读取class属性时需要使用元素.className
                    */
                }
            }

            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);
                }
            }

            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                //返回#city下所有子节点
                var city = document.getElementById("city");
                var cns = city.childNodes;
                /*
                childNodes属性会获取包括文本节点在内的所有节点
                根据Dom标签之间的空白会当成文本节点
                */
                alert(cns.length);  //返回 9

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

            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                //返回#phone的第一个子节点
                var phone = document.getElementById("phone");
                var ph = phone.firstChild;
                alert(ph.innerHTML);
            }

            var btn07 = document.getElementById("btn07");
            btn07.onclick = function () {
                //返回#bj的父节点
                var bj = document.getElementById("bj");
                var beijing = bj.parentNode;
                //alert(beijing.innerHTML);
                /*
                innerText 
                该属性可以获取到元素内部的文本内容
                和inner HTML类似 但是会将标签去除
                */
                alert(beijing.innerText);
            }

            Myclick("btn08", function () {
                //返回#android的前一个兄弟节点
                var android = document.getElementById("android");
                var Ad = android.previousSibling;
                alert(Ad.innerText);
            })

            Myclick("btn09", function () {
                //返回#username的value属性值
                var username = document.getElementById("username");
                alert(username.value);
            })

            Myclick("btn10", function () {
                //设置#username的value属性值
                var username = document.getElementById("username");
                username.value = "臭猪";
            })

            Myclick("btn11", function () {
                //返回#bj的文本值
                var bj = document.getElementById("bj");
                alert(bj.innerText);
            })
        }
    </script>
</head>

<body class="w">
    <div class="total">
        <div class="inner1">

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

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

            <p>你喜欢那款单机游戏？</p>

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

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

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

        <div class="inner2">
            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><br>

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

</html>
posted @ 2020-07-29 14:10 我等着你阅读(315) 评论(0) 收藏举报
刷新页面返回顶部
老顽固小可爱

JavaScript练习—DOM查询

公告
