DOM查詢

TZQ_DO_Dreamer發表於2014-09-14
<!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">
            
            window.onload = function(){
        
                 var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                     //★查詢#bj 節點
                     var bjEle = document.getElementById("bj");
                     var bjText = showText (bjEle);
                    alert (bjText);
                 };
                 var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
                     //★查詢所有li節點
                     var liEles = document.getElementsByTagName("li");
                    alert (liEles.length );
                 };
                 //★查詢#city 下所有 li節點
                 //獲取子節點的常用方法，原因是：這個方法有針對性，而且不包含空格和換行。
                doClidk ("btn03" , function(){
                     //alert("I clicked btn03!");
                     var cityEle = document.getElementById("city");
                     var cities = cityEle.getElementsByTagName("li");
                     //alert(cities.length);
                     for(var i = 0 ; i < cities.length ; i++) {
                        alert (showText(cities[ i]));
                     }
                 });
                 //★查詢name=gender 的所有節點
                doClidk ("btn04" , function(){
                     var genders = document.getElementsByName("gender");
                    alert (genders.length );
                     /*
                    //DOM 標準封裝 HTML標籤時，同時會封裝 HTML屬性
                    //HTML 標籤的屬性就會成為元素節點物件的屬性
                    // 單選按鈕有 value屬性，那麼單選按鈕元素物件也有 value屬性
                    alert(genders[0].value);
                    alert(genders[1].value);
                    // 操作HTML標籤的屬性可以直接使用“ .”操作，讀寫都可以
                    // 獲取name=name的元素節點物件（文字框）
                    var textEles = document.getElementsByName("name");
                    alert(textEles[0].value);
                    textEles[0].value = "Hello Text"; */
                 });
                 //返回#city 的所有子節點
                doClidk ("btn05" , function(){
                     var cityEle = document.getElementById("city");
                     //注意：childNodes 是一個屬性，不是函式——不要在後面加 ()
                     //childNodes屬性是包含“換行”和“空格”的
                     var childList = cityEle.childNodes;
                    alert (childList.length );//9  因為換行也是一個節點（空白文字節點）
                     var phone = document.getElementById("phone");
                     var phones = phone.childNodes ;
                    alert (phones.length );//3 無換行
                 });
                 //☆返回#bj 的父節點
                doClidk ("btn06" , function(){
                     var bjEle = document.getElementById("bj");
                     var parentEle = bjEle.parentNode; //注意：這也是一個屬性，不要當成方法
                    alert (parentEle.id );
                     //只有元素節點，才有可能有子節點
                 });
                 //☆返回#phone 的第一個子節點
                doClidk ("btn07" , function(){
                     var phone = document.getElementById("phone");
                     var fc = phone.firstChild ;
                    alert (showText(fc));
                 });
                 //返回#phone 的最後一個節點
                doClidk ("btn08" , function(){
                     var phone = document.getElementById("phone");
                     var lc = phone.lastChild ;
                    alert (showText(lc));
                 });
                 //返回#username 的value屬性節點
                doClidk ("btn09" , function(){
                     var username = document.getElementById("username");
                     var attrNode = username.getAttributeNode("value");
                    alert (attrNode.nodeName +" "+attrNode.nodeType +" " +attrNode.nodeValue );
                 });
                 //通過屬性節點返回#username的 value屬性值
                doClidk ("btn10" , function(){
                     //通過屬性節點獲取屬性值的方式較為繁瑣，通常不採用。
                     var username = document.getElementById("username");
                     var attrNode = username.getAttributeNode("value");
                    alert (" 屬性值 ="+attrNode.nodeValue );
                 });
                 //通過屬性節點設定#username的 value屬性值
                doClidk ("btn12" , function(){
                     //通過屬性節點設定屬性值的方式較為繁瑣，通常不採用。
                     var username = document.getElementById("username");
                     var attrNode = username.getAttributeNode("value");
                    attrNode.nodeValue = "NEW VALUE";
                 });
                 //★直接返回#username的 value屬性值
                doClidk ("btn13" , function(){
                     var username = document.getElementById("username");
                     //讀取元素節點物件的屬性直接使用“ .”加上屬性名即可，這是我們將來經常使用的方式
                    alert (username.value );
                     //alert(username.id);
                 });
                 //★直接設定#username的 value屬性值
                doClidk ("btn14" , function(){
                     var username = document.getElementById("username");
                     //設定元素的屬性，直接給屬性名賦值即可
                    username.value = "SUPER VALUE";
                 });
                 //★返回#bj 的文字值
                doClidk ("btn15" , function(){
                     /* var bjEle = document.getElementById("bj");
                    //1. 獲取文字節點
                    var textNode = bjEle.firstChild;
                    //alert(textNode.nodeName+" "+textNode.nodeType+" "+textNode.nodeValue);
                    //2. 獲取文字節點的節點值
                    var text = textNode.nodeValue;
                    alert("text="+text); */
                     var bjEle = document.getElementById("bj");
                     //3.常用寫法
                     var text = bjEle.firstChild.nodeValue;
                    alert (text+"~" );
                 });
                
                 //☆返回#android 的前一個兄弟節點
                doClidk ("btn16" , function(){
                     var android = document.getElementById("android");
                     var ps = android.previousSibling ;
                    alert (showText(ps));
                 });
                 //☆返回#android 的後一個兄弟節點
                doClidk ("btn17" , function(){
                     var android = document.getElementById("android");
                     var ns = android.nextSibling ;
                    alert (showText(ns));
                 });
                
                 function showText( ele){
                     return ele.firstChild.nodeValue;
                 }
                
             }
            
             function doClidk(id ,fun) {
                 var btn = document.getElementById (id);
                btn.onclick = fun;
             }
        
         </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 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>
         <div id= "btnList">
             <ul>
                 <li><button id= "btn01">查詢 #bj節點</button></li>
                 <li><button id= "btn02">查詢所有 li節點</button></li>
                 <li><button id= "btn03">查詢 #city下所有li節點</button></li>
                 <li><button id= "btn04">查詢 name=gender的所有節點</button></li>
                 <li><button id= "btn05">返回 #city的所有子節點</button></li>
                 <li><button id= "btn06">返回 #bj的父節點</button></li>
                 <li><button id= "btn07">返回 #phone的第一個子節點</button></li>
                 <li><button id= "btn08">返回 #phone的最後一個節點</button></li>
                 <li><button id= "btn09">返回 #username的value屬性節點</button></li>
                 <li><button id= "btn10">通過屬性節點返回 #username的value屬性值</button></li>
                 <li><button id= "btn12">通過屬性節點設定 #username的value屬性值</button></li>
                 <li><button id= "btn13">直接返回 #username的value屬性值</button></li>
                 <li><button id= "btn14">直接設定 #username的value屬性值</button></li>
                 <li><button id= "btn15">返回 #bj的文字值</button></li>
                 <li><button id= "btn16">返回 #android的前一個兄弟節點</button></li>
                 <li><button id= "btn17">返回 #android的後一個兄弟節點</button></li>
             </ul>
         </div>
    </body>
</html>

相關文章