97. dom查询练习

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
     <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>Untitled Document</title>
         <link rel=”stylesheet” type=”text/css” href=”style/css.css” />
         <script type=”text/javascript”>
        
             /*
              * 定义一个函数,专门用来为指定元素绑定单击响应函数
              *     参数:
              *         idStr 要绑定单击响应函数的对象的id属性值
              *         fun 事件的回调函数,当单击元素时,该函数将会被触发
              */
             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”);
                     //打印bj
                     //innerHTML 通过这个属性可以获取到元素内部的html代码
                     alert(bj.innerHTML);
                 };
                
                
                 //为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++){
                         alert(lis[i].innerHTML);
                     }
                 };
                
                
                 //为id为btn03的按钮绑定一个单击响应函数
                 var btn03 = document.getElementById(“btn03”);
                 btn03.onclick = function(){
                     //查找name=gender的所有节点
                     var inputs = document.getElementsByName(“gender”);
                    
                     //alert(inputs.length);
                    
                     for(var i=0 ; i<inputs.length ; i++){
                         /*
                          * innerHTML用于获取元素内部的HTML代码的
                          *     对于自结束标签,这个属性没有意义
                          */
                         //alert(inputs[i].innerHTML);
                         /*
                          * 如果需要读取元素节点属性,
                          *     直接使用 元素.属性名
                          *         例子:元素.id 元素.name 元素.value
                          *         注意:class属性不能采用这种方式,
                          *             读取class属性时需要使用 元素.className
                          */
                         alert(inputs[i].className);
                     }
                 };
                
                 //为id为btn04的按钮绑定一个单击响应函数
                 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);
                     }
                    
                 };
                
                 //为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);
                    
                     /*for(var i=0 ; i<cns.length ; i++){
                         alert(cns[i]);
                     }*/
                    
                     /*
                      * children属性可以获取当前元素的所有子元素
                      */
                     var cns2 = city.children;
                     alert(cns2.length);
                 };
                
                 //为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及以下的浏览器,
                      *     如果需要兼容他们尽量不要使用
                      */
                     //fir = phone.firstElementChild;
                    
                     alert(fir);
                 };
                
                 //为id为btn07的按钮绑定一个单击响应函数
                 myClick(“btn07”,function(){
                    
                     //获取id为bj的节点
                     var bj = document.getElementById(“bj”);
                    
                     //返回#bj的父节点
                     var pn = bj.parentNode;
                    
                     alert(pn.innerHTML);
                    
                     /*
                      * innerText
                      *     – 该属性可以获取到元素内部的文本内容
                      *     – 它和innerHTML类似,不同的是它会自动将html去除
                      */
                     //alert(pn.innerText);
                    
                    
                 });
                
                
                 //为id为btn08的按钮绑定一个单击响应函数
                 myClick(“btn08”,function(){
                    
                     //获取id为android的元素
                     var and = document.getElementById(“android”);
                    
                     //返回#android的前一个兄弟节点(也可能获取到空白的文本)
                     var ps = and.previousSibling;
                    
                     //previousElementSibling获取前一个兄弟元素,IE8及以下不支持
                     //var pe = and.previousElementSibling;
                    
                     alert(ps);
                    
                 });
                
                 //读取#username的value属性值
                 myClick(“btn09”,function(){
                     //获取id为username的元素
                     var um = document.getElementById(“username”);
                     //读取um的value属性值
                     //文本框的value属性值,就是文本框中填写的内容
                     alert(um.value);
                 });
                
                
                 //设置#username的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);
                    
                     //获取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”/>
                 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>

打赏

发布者

张 大鹏

北京理想国惠玩科技有限公司CEO

发表评论

电子邮件地址不会被公开。 必填项已用*标注