machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							<!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>

        /**
         * 定义一个函数，专门用来为指定元素绑定单击响应函数
         * 参数：
         *      idStr   要绑定单击响应函数的对象的id属性值
         *      fun     事件的回调函数，当单击元素时，该函数将会被触发
        */
        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

        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()    可以根据标签名来获取一组元素节点对象
                //这个方法会给我返回一个类数组对象，所有查询到的元素都会封装到对象中
                //即使查询到的元素只有一个，也会封装到数组中返回
                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节点
            //为id为btn04的按钮绑定一个单击响应函数
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                //获取id为city的元素
                var city = document.getElementById("city");
                //查找#city下所有li节点
                var lis = city.getElementsByTagName("li");
                // alert(lis.length);
                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                };

            };

            //返回#city的所有子节点
            //为id为btn05的按钮绑定一个单击响应函数
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                //获取id为city的节点
                var city = document.getElementById("city");
                //返回#city的所有子节点
                /**
                 * childNodes属性会获取包括文本节点在内的所有节点
                 * 根据DOM标签，标签间的空白也会被当成文本节点
                 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
                 *  所以该属性在IE8中会返回4个子元素，而其他浏览器是9个
                */
                var cns = city.childNodes;
                // alert(cns.length);//输出为9，包含了标签间的空白文本（换行符）
                // for(var i=0;i<cns.length;i++){
                //     alert(cns[i]);
                // }
                /**
                 * children属性可以获取当前元素的所有子元素
                 *  不包含空白标签，且所有浏览器都兼容
                */
                var cns2 = city.children;
                alert(cns2.length);
            };


            //返回#phone的第一个子节点
            //为id为btn06的按钮绑定一个单击响应函数
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                //获取id为phone的元素
                var phone = document.getElementById("phone");
                //返回#phone的第一个子节点
                // phone.childNodes[0];
                //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                // var fir = phone.firstChild;

                /**
                 * firstElementChild获取当前元素的第一个子元素（不包括空白文本）
                 *  firstElementChild不支持IE8及以下的浏览器，
                 *  如果需要兼容它们，尽量不要使用
                */
                var fir = phone.firstElementChild;
                alert(fir);
                alert(fir.innerHTML);
            };


            //返回#bj的父节点
            //为id为btn07的按钮绑定一个单击响应函数
            myClick("btn07", function () {
                // alert("hello");
                //获取id为bj的节点
                var bj = document.getElementById("bj");
                //返回#bj的父节点
                var pn = bj.parentNode;
                // alert(pn);
                // alert(pn.innerHTML);
                /**
                 * innerText
                 *  -该属性可以获取到元素内部的文本内容
                 *  -它和innerHTML类似，不同的是它会自动将html去除
                */
                alert(pn.innerText);

            });


            //返回#android的前一个兄弟节点
            //为id为btn08的按钮绑定一个单击响应函数
            myClick("btn08", function () {
                //获取id为android的元素
                var and = document.getElementById("android");
                //返回#android的前一个兄弟节点(也可能获取到空白的文本)
                // var ps = and.previousSibling;
                // alert(ps);
                // alert(ps.innerHTML);
                
                //还有一个方法
                //previousElementSibling获取前一个兄弟元素，但是IE8及以下不支持
                var pe = and.previousElementSibling;
                alert(pe);
                alert(pe.innerHTML);
            });


            //读取#username的value属性值
            myClick("btn09", function () {
                //获取id为username的元素
                var um = document.getElementById("username");
                //读取um的value属性值
                //文本框的value属性值，就是文本框中填写的内容
                alert(um.value);
            });
            //设置#usernane的value属性值
            myClick("btn10", function () {
                //获取id为username的元素
                var um = document.getElementById("username");
                um.value = "你好";
            });


            //返回#bj的文本值
            myClick("btn11", function () {
                //获取id为bj的元素
                var bj = document.getElementById("bj");
                // alert(bj.innerHTML);
                // alert(bj.innerText);//本例也可以使用innerText，结果是一样的

                //获取bj中的文本节点
                // var fc = bj.firstChild;
                // alert(fc.nodeValue);
                //更多的是写成下面的格式，但是这种方法比较少用
                alert(bj.firstChild.nodeValue);
            });
        };

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