JavaScript基础(24)_dom查询练习（一）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../browser_default_style/reset.css">
    <title>dom查询练习一</title>
    <style>
        .text {
            width: 380px;
            height: 500px;
            margin: 20px 0px 0px 20px;
            border: 1px black solid;
        }

        p {
            margin: 10px 0px 5px 10px;
        }

        li {
            float: left;
            background-color: aquamarine;
            list-style-type: none;
            font-size: smaller;
            margin: 5px 3px 5px 10px;
            padding: 3px;
        }

        #name,
        #sex,
        button,
        input {
            margin-left: 10px;
        }

        button {
            margin-top: 5px;
        }
    </style>
    <script>
        window.onload = function () {
            // 为按钮1绑定事件，通过 "类名" 获取 "某一个对象" 时记得带上数组下标【0】
            var btn1 = document.getElementsByClassName("btn1")[0];
            btn1.onclick = function () {
                var kongque = document.getElementById("kongque");
                alert(kongque.innerHTML);
            }

            // 为按钮2绑定事件
            var btn2 = document.getElementsByClassName("btn2")[0];
            btn2.onclick = function () {
                // 获取一组类数组对象
                var text_list = document.getElementsByTagName("li");
                for (i = 0; i < text_list.length; i++) {
                    alert(text_list[i].innerHTML);
                }
            }

            // 为按钮3绑定事件
            var btn3 = document.getElementsByClassName("btn3")[0];
            btn3.onclick = function () {
                // 获取 “紧挨着类名为question1下一个兄弟元素ul的子元素li”
                var title1_list = document.querySelectorAll(".question1 + ul > li");
                for (i = 0; i < title1_list.length; i++) {
                    alert(title1_list[i].innerHTML);
                }
            }

            // 为按钮4绑定事件
            var btn4 = document.getElementsByClassName("btn4")[0];
            btn4.onclick = function () {
                var title1 = document.getElementsByClassName("question1")[0];
                //  注意：以下方式也行，不过下一个兄弟节点只是空白文本节点，所以是下下一个。
                // var title1_list = title1.nextSibling.nextSibling.children;

                // 获取 “紧挨着类名为question1下一个兄弟元素ul的子元素li”
                var title1_list = title1.nextElementSibling.children;
                for (i = 0; i < title1_list.length; i++) {
                    // 等价于：alert(title1_list[i].firstChild.nodeValue);
                    alert(title1_list[i].innerHTML);
                }
            }

            // 为按钮5绑定事件
            var btn5 = document.getElementsByClassName("btn5")[0];
            btn5.onclick = function () {
                var title5_list = document.getElementsByName("sex");
                for (i = 0; i < title5_list.length; i++) {
                    alert(title5_list[i].value);
                }
            }

            // 为按钮6绑定事件
            var btn6 = document.getElementsByClassName("btn6")[0];
            btn6.onclick = function () {
                var title4_text = document.getElementsByTagName("input")[0];
                alert(title4_text.value);
            }

            // 为按钮7绑定事件
            var btn7 = document.getElementsByClassName("btn7")[0];
            btn7.onclick = function () {
                var title4_text = document.getElementsByTagName("input")[0];
                title4_text.value = "张三";
                alert(title4_text.value);
            }

        }
    </script>
</head>

<body>
    <div class="text">
        <p class="question1">1、你喜欢哪个动物?</p>
        <ul>
            <li>小猫</li>
            <li>公鸡</li>
            <li id="kongque">孔雀</li>
            <li>兔子</li>
        </ul>
        <br><br>
        <p class="question2">2、你喜欢哪个城市?</p>
        <ul>
            <li>北京</li>
            <li>广州</li>
            <li>上海</li>
            <li>武汉</li>
        </ul>
        <br><br>
        <p class="question3">3、你喜欢哪项运动?</p>
        <ul>
            <li>羽毛球</li>
            <li>跳水</li>
            <li>体操</li>
            <li>篮球</li>
        </ul>
        <br><br>
        <form action="">
            <p>4、您的姓名是：</p>
            <input type="text" id="username" value="">
            <p>5、您的性别是：</p>
            <input type="radio" name="sex" value="man">男
            <input type="radio" name="sex" value="woman">女
        </form>
        <br>
        <button class="btn1">通过 "id属性" 为参数，查找题目1中第三个选项</button>
        <br>
        <button class="btn2">通过 "标签名" 为参数，查找文档中所有列表选项</button>
        <br>
        <button class="btn3">通过 "css选择器" 为参数，查找题1中所有列表选项</button>
        <br>
        <button class="btn4">通过 "元素节点"为对象，查找题1中所有列表选项</button>
        <br>
        <button class="btn5">通过 "name属性" 为参数，查找题5有关性别的选项</button>
        <button class="btn6">获取题4中的文本内容</button>
        <button class="btn7">设置题4中的文本内容为 "张三"</button>
    </div>
</body>
</html>