JavaScript 之 DOM [ Document物件 ]

weixin_33766168發表於2018-08-27
JavaScript物件

DOM

描述

  • DOM表示文件物件模型
  • DOM是獨立於任何語言的
  • DOM是用於操作HTML頁面的內容(文字、影象、等等...)、結構（元素標籤）和樣式（CSS屬性）

引入JavaScript檔案

  • 可以在html頁面新增JavaScript程式碼

  • 方式分為：

    • 內嵌樣式：可以在 <head>元素 中使用 <script>元素（閉合元素）在裡面書寫JS程式碼

      • 內嵌樣式存在的問題：

        • 由於將 <script>元素 寫在html頁面元素上面時，瀏覽器會先執行JavaScript程式碼，在執行html程式碼。 會導致JavaScript程式碼中對html程式碼修改的內容無法顯示（html程式碼還沒有被執行）
        • 解決問題：window.onload = function() { } 機制 將先執行html程式碼，後執行JS程式碼
    • 內嵌樣式的另一種方式：可以在 <body>元素 中使用<script>元素（閉合元素）“建議寫在最後面”
    • 外聯樣式：可以在 <script>元素 新增 src屬性 來引入JavaScript檔案

Document物件

描述

  • 表示為JavaScript程式碼提供了一個訪問HTML頁面的橋樑
  • 並且提供了訪問和修改頁面內容的屬性和方法

Document物件獲取頁面元素

  • Document物件提供了可以獲取頁面元素的方法

    • getElementById()方法
    • getElementsByName()方法
    • getElementsByTagName()方法
    • getElementsByClassName()方法
    • querySelector()方法
    • querySelectorAll()方法

getElementById()方法

  • 以查詢 ID屬性 的方式來定位指定元素的位置
  • 由於 ID屬性 的唯一性，得到的元素只能有一個
<body>
<p id="p1">獲取有ID屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>

<!-- 通過<script>元素來書寫JavaScript程式碼 -->
<script>
/*
    getElementById()方法
     * 以查詢 ID屬性 的方式來定位指定元素的位置
     * 由於 ID屬性 的唯一性，得到的元素只能有一個
 */
var s1 = document.getElementById( 'p1' );
console.log( s1 );// 顯示 <p id="p1">獲取有ID屬性的元素</p>
</script>
</body>

getElementsByName()方法

  • 以查詢 name屬性 的方式來定位指定元素的位置
  • 會得到全部帶有 name屬性 的元素，以類陣列表示得到的元素（ NodeList型別 ）
<body>
<p id="p1">獲取有ID屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>

<!-- 通過<script>元素來書寫JavaScript程式碼 -->
<script>
/*
    getElementsByName()方法
     * 以查詢 name屬性 的方式來定位指定元素的位置
     * 會得到全部帶有 name屬性 的元素，以類陣列表示得到的元素（ NodeList型別 ）
 */
var s2 = document.getElementsByName( 'p2' );
console.log( s2 );// 顯示 NodeList(3) [p, p, p]
</script>
</body>

getElementsByClassName()方法

  • 以查詢 class屬性值 的方式來定位指定元素的位置
  • 會得到全部帶有 class屬性 的元素，以類陣列表示得到的元素（ HTMLCollection型別 ）
<body>
<p id="p1">獲取有ID屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>

<!-- 通過<script>元素來書寫JavaScript程式碼 -->
<script>
/*
    getElementsByClassName()方法
     * 以查詢 class屬性值 的方式來定位指定元素的位置
     * 會得到全部帶有 class屬性 的元素，以類陣列表示得到的元素（ HTMLCollection型別 ）
 */
var s3 = document.getElementsByClassName( 'p3' );
console.log( s3 );// 顯示 HTMLCollection(3) [p.p3, p.p3, p.p3]
</script>
</body>

getElementsByTagName()方法

  • 以查詢 元素名 的方式來定位指定元素的位置
  • 會得到全部 被指定的元素，以類陣列表示得到的元素（ HTMLCollection型別 ）
<body>
<p id="p1">獲取有ID屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>

<!-- 通過<script>元素來書寫JavaScript程式碼 -->
<script>
/*
    getElementsByTagName()方法
     * 以查詢 元素名 的方式來定位指定元素的位置
     * 會得到全部 被指定的元素，以類陣列表示得到的元素（ HTMLCollection型別 ）
 */
var s4 = document.getElementsByTagName( 'p' );
console.log( s4 );// 顯示 HTMLCollection(7) [p#p1, p, p, p, p.p3, p.p3, p.p3, p1: p#p1, p2: p]
</script>
</body>

querySelector()方法

  • 以查詢 對應的CSS選擇器 的方式來定位指定元素的位置
  • 會得到 第一個對應該CSS選擇器 的元素 - 只有一個
<body>
<p id="p1">獲取有ID屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>

<!-- 通過<script>元素來書寫JavaScript程式碼 -->
<script>
/*
    querySelector()方法
     * 以查詢 對應的CSS選擇器 的方式來定位指定元素的位置
     * 會得到 第一個對應該CSS選擇器 的元素 - 只有一個
 */
var s5 = document.querySelector( '#p1' );
console.log( s5 );// 顯示 <p id="p1">獲取有ID屬性的元素</p>
</script>
</body>

querySelectorAll()方法

  • 以查詢 對應的CSS選擇器 的方式來定位指定元素的位置
  • 會得到 對應該CSS選擇器 的全部元素，以類陣列表示得到的元素（ NodeList型別 ）
<body>
<p id="p1">獲取有ID屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p name= "p2" >獲取有Name屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>
<p class="p3">獲取有Class屬性的元素</p>

<!-- 通過<script>元素來書寫JavaScript程式碼 -->
<script>
/*
    querySelectorAll()方法
     * 以查詢 對應的CSS選擇器 的方式來定位指定元素的位置
     * 會得到 對應該CSS選擇器 的全部元素，以類陣列表示得到的元素（ NodeList型別 ）
 */
var s6 = document.querySelectorAll( '.p3' );
console.log( s6 );// 顯示 NodeList(3) [p.p3, p.p3, p.p3]
</script>
</body>

Document物件建立頁面節點

  • 可以使用Document物件提供的屬性或方法來在html頁面中建立新節點

    • createElement()方法
    • createTextNode()方法
    • createAttribute()方法

createElement()方法

  • 用於建立新的元素節點
<body>
<script>
    /* 建立一個<p>元素 */
    var p = document.createElement( 'p' );

    /* 根據DOM節點樹的關係將建立的新元素新增到HTML頁面程式碼中 */
    /* 獲取建立新元素的父級節點 */
    var body = document.body;

    /* 將新建立的元素節點做為指定父級節點的子級節點進行新增 - 通過appendChild()方法進行新增 */
    body.appendChild( p );
</script>
</body>

createTextNode()方法

  • 用於建立新的文字節點
<body>
<script>
    /* 建立一個<p>元素 */
    var p = document.createElement( 'p' );

    /* 為新建立的元素節點新增文字節點 */
    var text = document.createTextNode( '建立文字節點' );

    /*
        根據DOM節點樹的關係
         * 將建立的元素節點新增到HTML頁面程式碼中
         * 將建立的文字節點新增到指定元素節點中
     */

    /* 獲取建立新元素的父級節點 */
    var body = document.body;

    /* 將建立的文字節點新增到指定的元素節點中 - 通過appendChild()方法進行新增 */
    p.appendChild( text );
    /* 將新建立的元素節點做為指定父級節點的子級節點進行新增 - 通過appendChild()方法進行新增 */
    body.appendChild( p );
</script>
</body>

createAttribute()方法

  • 用於建立屬性節點

    • 注意：該方法只能接收一個引數，做為屬性節點的屬性名，屬性值使用 nodeValue 建立
<body>
<script>
    /* 建立一個<p>元素 */
    var p = document.createElement( 'p' );

    /* 為新建立的元素節點新增文字節點 */
    var text = document.createTextNode( '建立文字節點' );

    /* 為新建立的元素節點新增屬性節點 */
    var attr = document.createAttribute( 'id' );
    /* 為屬性節點新增屬性值 */
    attr.nodeValue = 'p1';

    /*
        根據DOM節點樹的關係
         * 將建立的元素節點新增到HTML頁面程式碼中
         * 將建立的文字節點新增到指定元素節點中
         * 將建立的屬性節點新增到指定元素節點中
     */

    /* 獲取建立新元素的父級節點 */
    var body = document.body;

    /* 將建立的文字節點新增到指定的元素節點中 - 通過appendChild()方法進行新增 */
    p.appendChild( text );

    /* 將建立的屬性節點新增到指定的元素節點中 - 通過setAttributeNode()方法進行新增 */
    p.setAttributeNode( attr );

    /* 將新建立的元素節點做為指定父級節點的子級節點進行新增 - 通過appendChild()方法進行新增 */
    body.appendChild( p );
</script>
</body>

類陣列物件

  • 在使用JavaScript程式碼對html頁面中的元素進行定位置並顯示元素資料內容時，會將資料內容集合到一個相似陣列的 “類陣列物件”

  • 類陣列分為

    • HTMLCollection型別

      • 動態集合
      • 是一個元素的集合（html的標籤）
      • 會根據HTML元素變化而變化

    • NodeList型別

      • 靜態集合
      • 是一個節點的集合（節點指元素節點、屬性節點及文字節點）
      • 不會根據HTML元素變化而變化
<body>
<p class="p" id="p1">獲取有Class屬性的元素</p>
<p class="p">獲取有Class屬性的元素</p>
<p class="p">獲取有Class屬性的元素</p>
<p class="p">獲取有Class屬性的元素</p>
<p class="p">獲取有Class屬性的元素</p>

<script>
    /* 獲取頁面的body元素 */
    var body = document.body;

    /* 動態集合 - HTMLCollection */
    /* 通過指定類名獲取指定資料 */
    var pclass1 = document.getElementsByClassName( 'p' );
    console.log( pclass1 );// 顯示 HTMLCollection(5) [p.p3, p.p3, p.p3, p.p3, p.p3]
    /* 獲取類陣列長度 */
    console.log( pclass1.length );// 顯示 5
    /* 通過指定ID獲取指定資料 */
    var p1 = document.getElementById( 'p1' );
    /* 刪除指定節點中的子級節點 */
    body.removeChild( p1 );
    /* 獲取類陣列長度 */
    console.log( pclass1.length );// 顯示 4


    /* 靜態集合 - NodeList */
    /* 通過CSS選擇器獲取指定資料 */
    var pclass2 = document.querySelectorAll( '.p' );
    console.log( pclass2 );// 顯示 NodeList(5) [p.p3, p.p3, p.p3, p.p3, p.p3]
    /* 獲取類陣列長度 */
    console.log( pclass2.length );// 顯示 5
    /* 通過CSS選擇器獲取指定資料 */
    var p2 = document.querySelector( '.p' );
    /* 刪除指定節點中的子級節點 */
    body.removeChild( p2 );
    /* 獲取類陣列長度 */
    console.log( pclass2.length );// 顯示 5
</script>
</body>

相關文章