JavaScript練習——Document物件

DOM查詢練習

目標：

掌握CSS樣式的書寫；
掌握按照id name tagname三種查詢方法，針對document物件和結點
瞭解結點的屬性：

childNodes 屬性，獲取當前節點的所有子節點
firstChild 屬性，獲取當前節點的第一個子節點
lastChild屬性，獲取當前節點的最後一個子節點
parentNode 屬性，獲取當前節點的父節點
nextSibling屬性，獲取當前節點的下一個節點 (兄弟節點)
previousSibling 屬性，獲取當前節點的上一個節點 (兄弟節點)
className 用於獲取或設定標籤的 class 屬性值

innerHTML 屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText 屬性，表示獲取/設定起始標籤和結束標籤中的文字

程式碼介面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-13</title>

    <!--定義樣式-->
    <style type="text/css">
        body 
 {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }   /*margin：使body排版自動設定偏左偏右,處於適當位置*/
        button {
            width: 300px;
            margin-bottom: 20px;
        } /*使下面的按鈕與上面的按鈕20個畫素位置*/
        #btnList {
            float: left;   /* margin_left:0px*/ 

        }  /*左對齊，不和已有內容部分重疊，選擇當前最左的位置，margin_left也是*/
        #total {
            width: 450px;
            float:left;
        }/* #的是序號選擇器 */
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }/*margin 外邊界  padding 內邊界*/
        li{
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            margin: 5px;
            background-color: #99ff99;
            float:left;
        }
        .inner{
            width:400px;
            border-style: solid;
            border-width: 1px;
            margin-bottom: 10px;
            padding: 10px;
            float: left;
        }/* .的是類選擇器 */
    </style>

    <!--JS部分-->
    <script type="text/javascript">
        window.onload=function () {//和前面的例子不同，以前是在外面寫onclock函式，現在是在window.onload函式中寫各自id的onclick函式
            //1.查詢 #bj 節點                                //靜態註冊            //動態註冊
            var btnObj=document.getElementById("btn01");   //先對應按鈕
              btnObj.onclick=function (){                  //再定義按鈕的onclick函式
                  var bjObj=document.getElementById("bj");
                  alert(bjObj.innerText);  //輸出標籤中的內容
              }
            //2.查詢所有 li 節點
            document.getElementById("btn02").onclick=function (){
                var LiObjs=document.getElementsByTagName("li");
                alert(LiObjs.length);
                for (var i=0;i<LiObjs.length;++i){
                    alert(LiObjs[i].innerText);
                }
            }
            //3.查詢 name=gender 的所有節點
            document.getElementById("btn03").onclick=function (){
                  var genders=document.getElementsByName("gender");
                  alert(genders.length);
                for (var i=0;i<genders.length;++i){
                    alert(genders[i].value); //這裡就不能用innerText來顯示了
                }
            }
            //4.查詢#city 下所有 li 節點，需要在2的基礎上進行變形，先找到city節點，再往下找
            document.getElementById("btn04").onclick=function (){
                var LiObjs=document.getElementById("city").getElementsByTagName("li");
                alert(LiObjs.length);
                for (var i=0;i<LiObjs.length;++i){
                    alert(LiObjs[i].innerText);
                }
            }
            //5.返回#city 的所有子節點，節點的屬性：childNodes屬性，獲得當前節點的所有子節點
            document.getElementById("btn05").onclick=function (){
                  var subcity=document.getElementById("city").childNodes;
                  alert(subcity.length);
                  for (var i=0;i<subcity.length;++i){
                      alert(subcity[i].innerText);   //操作的時候具體看看這個結果是什麼！！和你想象的有出:回車 空格都會算作一個節點
                  }
            }
            //6.返回#phone 的第一個子節點 ,用firstChild屬性
            document.getElementById("btn06").onclick=function (){
                  var fs=document.getElementById("phone").firstChild;//為了避免得到的第一個子節點是回車或者空格，
                  alert(fs.innerText);                               // 看我們下面body中Idw為phone對應的書寫形式
            }
            //7.返回#bj 的父節點，用parentNode屬性
            document.getElementById("btn07").onclick=function (){
                  var pn=document.getElementById("bj").parentNode;
                  alert(pn.innerText);
                  alert(pn.innerHTML);  //比較二者的不同,是否保持HTML程式碼 還是隻輸出文字內容
            }
            //8.返回#android 的兄弟節點，previousSibling屬性，前一個兄弟節點；nextSibling屬性，當前節點的後一個兄弟節點。
            document.getElementById("btn08").onclick=function (){
                  var android=document.getElementById("android");
                  alert(android.previousSibling.innerText);
                  alert(android.nextSibling.innerText);
            }
            //9.讀取#username 的 value 屬性值
            document.getElementById("btn09").onclick=function (){
                  alert(document.getElementById("username").value);
            }
            //10.設定#username 的 value 屬性值
            document.getElementById("btn10").onclick=function (){
                document.getElementById("username").value="陸億行2021-01-14"
            }
            //11.返回#bj 的文字值
            document.getElementById("btn11").onclick=function (){
                  alert(document.getElementById("bj").innerText);
            }
        }
    </script>

</head>
<body>

<div id="total">
    <div id="分支一" 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 id="apple">IOS</li><li id="android">Android</li><li id="windows">Windows Phone</li>
        </ul>                    <!-- 為了避免得到的兄弟節點不是回車 空格 -->
    </div>

    <div id="分支二" 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">
    <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>
    <!-- #代指id，#bj是指id==bj -->
</div>

</body>
</html>

JavaScript練習——Document物件

DOM查詢練習

JavaScript練習——Document物件

【JavaScript練習】封裝自己的Math物件，包括PI值和最大值最小值

全新java大資料教程之JavaScript的DOM物件（Document Object Model 文件物件模型）

JavaScript物件之document物件

JS document物件簡單用法完整示例

JavaScript基於面向物件實現的無縫滾動輪播示例

JavaScript Window視窗物件屬性和使用方法

javascript使用Blob物件實現的下載檔案操作示例

JavaScript變數Dom物件的所有屬性

JavaScript內建物件之Array的使用小結

JavaScript Window瀏覽器物件模型原理解析

JavaScript如何判斷物件有某屬性

JavaScript 中JSON 物件的陣列

JavaScript Math 數字物件執行任務

JavaScript學習——面向物件（一）——建立物件（工廠模式和構造器模式）

javascript基礎DOM物件

javascript基礎DOM物件6.1

JavaScript-07 Date物件

JavaScript-08 String物件

理解JavaScript中的物件

JavaScript練習——Document物件

DOM查詢練習

相關推薦