machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!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>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script>

        window.onload = function () {
            //查找#bj节点
            //为id为btn01的按钮绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                // alert("hello");
                //查找#bj节点
                var bj = document.getElementById("bj");
                // alert(bj);
                //打印bj
                //innerHTML 通过这个属性可以获取到元素内部的html代码
                alert(bj.innerHTML);//输出为“北京”
            };

            //查找所有li节点
            //为id为btn02的按钮绑定一个单击响应事件
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //查找所有li节点
                //getElementsByTagName()    可以根据标签名来获取一组元素节点对象
                //这个方法会给我返回一个类数组对象，所有查询到的元素都会封装到对象中
                //即使查询到的元素只有一个，也会封装到数组中返回
                //查找所有li节点
                var lis = document.getElementsByTagName("li");
                //打印lis
                // alert(lis.length);
                //遍历lis
                for (var i = 0; i < lis.length; i++) {
                    console.log(lis[i].innerHTML);
                };
            };

            //查找name=gender的所有节点
            //为btn03的按钮绑定一个单击响应函数
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                
                //查找name=gender的所有节点
                var inputs = document.getElementsByName("gender");
                // alert(inputs);
                // alert(inputs.length);
                for (var i = 0; i < inputs.length; i++) {
                    /**
                     * innerHTML 用于获取元素内部的HTML代码的
                     *   对于自结束标签，这个属性没有意义                        
                    */
                    console.log(inputs[i].innerHTML);
                    /**
                     * 如果要读取元素节点的属性，直接使用：元素.属性名
                     *  比如：元素.id   元素.name   元素.value
                     *  注意：class属性不能采用这种方式，
                     *      读取class属性时需要使用：元素.className
                    */
                    console.log(inputs[i].value);
                    console.log(inputs[i].className);
                };
            };


            //查找#city下所有li节点
            //返回#city的所有子节点
            //返回#phone的第一个子节点
            //返回#bj的父节点
            //返回#android的前一个兄弟节点
            //读取#username的value属性值
            //设置#usernane的value属性值
            //返回#bj的文本值
        };

    </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 class="hello" type="radio" name="gender" value="male" />
            Male
            <input class="hello" type="radio" name="gender" value="female" />
            Fremale
            <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">设置#usernane的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
</body>

</html>