JavaScript 之 DOM [ Node對象 ]

時間 2020-02-07

標籤 javascript dom node 對象欄目 JavaScript 简体版

原文原文鏈接

Node對象

描述

Node對象是用於解析DOM節點樹的入口
Node對象提供了對節點操做的屬性和方法

判斷節點類型

節點類型分爲：html
- 元素節點
- 屬性節點
- 文本節點
- 文檔節點
判斷方式分爲：node
- nodeName - 節點名稱
- nodeType - 節點類型
- nodeValue - 節點的值

<body>
<p id="p1" name="text">我是誰，我在那，我要幹啥</p>
<script>
    /* 獲取指定元素節點 */
    var p = document.getElementById( 'p1' );
    /* 判斷指定節點的名稱 - 顯示標籤名稱 */
    console.log( p.nodeName );// 顯示 P(大寫)
    /* 判斷指定節點的類型 */
    console.log( p.nodeType );// 顯示 1(元素節點)
    /* 判斷指定節點的屬性值 */
    console.log( p.nodeValue );// 顯示 null

    /* 獲取指定元素節點的文本節點 */
    var text = p.firstChild;
    /* 判斷指定節點的名稱 */
    console.log( text.nodeName );// 顯示 #text(文本節點的固定寫法)
    /* 判斷指定節點的類型 */
    console.log( text.nodeType );// 顯示 3(文本節點)
    /* 判斷指定節點的屬性值 */
    console.log( text.nodeValue );// 顯示 我是誰，我在那，我要幹啥(文本內容)

    /* 獲取指定元素節點的屬性節點 */
    var shuxing = p.getAttributeNode( 'name' );
    /* 判斷指定節點的名稱 */
    console.log( shuxing.nodeName );// 顯示 name(屬性名)
    /* 判斷指定節點的類型 */
    console.log( shuxing.nodeType );// 顯示 2(屬性節點)
    /* 判斷指定節點的屬性值 */
    console.log( shuxing.nodeValue );// 顯示 text(屬性值)
    
    /* 判斷節點的類型 - 文檔節點 */
    // document對象 表示html文檔（html頁面）
    console.log( document.nodeName );// 顯示節點的名稱 - #document（document對象）
    console.log( document.nodeType );// 顯示節點的類型 - 9（文檔節點）
    console.log( document.nodeValue );// 顯示節點的值 - null
</script>
</body>

獲取父節點

經過定位子節點，來獲取父節點

parentNode屬性

表示獲取父節點，等到的不必定的元素節點，也多是Document對象

<div id="d">
    <p>手機</p>
    <p id="p">手錶</p>
    <p>電腦</p>
</div>
<script>
    /* 獲取指定元素節點 */
    var p = document.getElementById( 'p' );

    /* 經過parentNode來獲取指定元素節點的父節點 */
    var div1 = p.parentNode;
    console.log( div1 );
</script>
</body>

parentElement屬性

表示獲取父元素節點，等到的必定是元素節點

<div id="d">
    <p>手機</p>
    <p id="p">手錶</p>
    <p>電腦</p>
</div>
<script>
    /* 獲取指定元素節點 */
    var p = document.getElementById( 'p' );

    /* 經過parentElement來獲取指定元素節點的父元素節點 */
    var div2 = p.parentElement;
    console.log( div2 );
</script>
</body>

獲取子節點

經過定位父節點來獲取子節點
childNodes：表示獲取全部子節點
firstChild：表示獲取第一個子節點
lastChild：表示獲取最後一個子節點
在獲取子節點時也會一同獲取到「空白節點（多是空的文本節點）」

<body>
<div id="d">
    <p>手機</p>
    <p id="p">手錶</p>
    <p>電腦</p>
</div>
<script>
    /* 獲取指定元素節點 */
    var div = document.getElementById( 'd' );

    /*
        在獲取指定元素節點的子節點時，會出現空白節點，空白節點會影響獲取的結果
     */

    /* 經過childNodes來獲取指定元素節點的全部子節點 */
    var ps = div.childNodes;
    console.log( ps );// 顯示 NodeList(7) [text, p, text, p#p, text, p, text](帶有空白節點)

    /* 經過firstChild來獲取指定元素節點中的第一個子節點 */
    var p1 = div.firstChild;
    console.log( p1 );// 顯示 #text(空白節點 - 應該顯示第一個元素節點)

    /* 經過lastChild來獲取指定元素節點中的最後一個子節點 */
    var p2 = div.lastChild;
    console.log( p2 );// 顯示 #text(空白節點 - 應該顯示最後一個元素節點)
</script>
</body>

獲取相鄰兄弟節點

previousSibling：表示獲取前面的兄弟節點
nextSibling：表示獲取後面的兄弟節點
在獲取相鄰兄弟節點的時候也存在「空白節點（多是空的文本節點）」的問題

<body>
<div id="d">
    <p>手機</p>
    <p id="p">手錶</p>
    <p>電腦</p>
</div>
<script>
    /* 獲取指定元素節點 */
    var p = document.getElementById( 'p' );

    /*
        在獲取指定元素節點的相鄰兄弟節點時，會出現空白節點，空白節點會影響獲取的結果
     */

    /* 獲取指定元素節點的前一個相鄰兄弟節點 */
    var p1 = p.previousSibling;
    console.log( p1 );// 顯示 #text(空白節點)

    /* 獲取指定元素節點的後一個相鄰兄弟節點 */
    var p2 = p.nextSibling;
    console.log( p2 );// 顯示 #text(空白節點)
</script>
</body>

空白節點

在瀏覽器解析DOM節點樹結構時，會產生空白節點，使獲得的數據結果出現問題
空白節點是經過在編寫HTML代碼時因爲元素換行或空格產生的
空白節點通常會顯示爲文本節點(多是空的文本節點)

處理獲取子節點時產生的空白節點

<body>
<div id="d">
    <p>手機</p>
    <p id="p">手錶</p>
    <p>電腦</p>
</div>
<script>
    /* 獲取指定元素節點 */
    var div = document.getElementById( 'd' );

    /* 在獲取指定元素節點的子節點時，會出現空白節點，空白節點會影響獲取的結果 */
    /* 經過childNodes來獲取指定元素節點的全部子節點 */
    var ps = div.childNodes;
    console.log( ps );// 顯示 NodeList(7) [text, p, text, p#p, text, p, text](帶有空白節點)

    /* 經過firstChild來獲取指定元素節點中的第一個子節點 */
    var p1 = div.firstChild;
    console.log( p1 );// 顯示 #text(空白節點 - 應該顯示第一個元素節點)

    /* 經過lastChild來獲取指定元素節點中的最後一個子節點 */
    var p2 = div.lastChild;
    console.log( p2 );// 顯示 #text(空白節點 - 應該顯示最後一個元素節點)

    /* 處理獲取子節點時產生的空白節點 */
    /*
        * 能夠經過循環遍歷獲得所有節點數據
        * 在經過判斷進行篩選
     */
    /* 定義一個空數組 */
    var arr = [];
    /* 經過循環獲取全部子節點數據 */
    for ( var i=0; i<ps.length; i++ ) {
        /* 將全部的數據賦值給一個變量 */
        var s = ps[i];
        /* 判斷全部節點的類型是否爲元素節點 */
        if ( s.nodeType === 1 ) {
            /* 將獲得的元素節點添加到指定數組中 */
            arr.push( s );
        }
    }
    /* 獲得全部子節點中的有效數據 */
    console.log( arr );// 顯示 (3) [p, p#p, p]

    /*
        * 因爲空白節點與子節點是相鄰兄弟關係
        * 能夠經過獲取相鄰兄弟節點的方法來獲取第一個或最後一個子節點
     */
    /* 獲取第一個子節點後在獲取下一個相鄰兄弟節點，來獲得正確顯示結果 */
    p1 = p1.nextSibling;
    console.log( p1 );// 顯示 <p>手機</p>
    /* 獲取最後一個子節點後在獲取前一個相鄰兄弟節點，來獲得正確顯示結果 */
    p2 = p2.previousSibling;
    console.log( p2 );// 顯示 <p>電腦</p>
</script>
</body>

處理相鄰兄弟節點中的空白節點

<body>
<div id="d">
    <p>手機</p>
    <p id="p">手錶</p>
    <p>電腦</p>
</div>
<script>
    /* 在獲取指定元素節點的相鄰兄弟節點時，會出現空白節點，空白節點會影響獲取的結果 */
    /* 獲取指定元素節點 */
    var p = document.getElementById( 'p' );

    /* 獲取指定元素節點的前一個相鄰兄弟節點 */
    var p3 = p.previousSibling;
    console.log( p3 );// 顯示 #text(空白節點)

    /* 獲取指定元素節點的後一個相鄰兄弟節點 */
    var p4 = p.nextSibling;
    console.log( p4 );// 顯示 #text(空白節點)

    /* 處理相鄰兄弟節點中的空白節點 */
    /*
        * 因爲空白節點與子節點是相鄰兄弟關係
        * 能夠經過連續獲取兩次相鄰兄弟節點來獲得正常顯示節點
     */
    /* 在獲取前一個相鄰兄弟元素 */
    p3 = p3.previousSibling;
    console.log( p3 );// 顯示 <p>手機</p>
    /* 在獲取後一個相鄰兄弟元素 */
    p4 = p4.nextSibling;
    console.log( p4 );// 顯示 <p>電腦</p>
</script>
</body>

替換節點

replaceChild數組
- 表示對指定的元素節點進行替換

<body>
<div id="d1">
    <p id="p1">手機</p>
    <p id="p2">手錶</p>
    <p id="p3">電腦</p>
</div>
<script>
    /*
        替換節點 - replaceChild
        表示對指定的元素節點進行替換
     */
    /* 建立元素節點 */
    var p = document.createElement( 'p' );
    /* 建立文本節點 */
    var ps = document.createTextNode( '遊戲機' );
    /* 將建立的文本節點插入到建立的元素節點中 */
    p.appendChild( ps );
    /* 定位父節點位置 */
    var d1 = document.getElementById( 'd1' );
    /* 定位被替換節點的位置 */
    var p2 = document.getElementById( 'p2' );
    /* 進行替換節點（兩個節點值  建立元素節點、被替換的節點位置） */
    d1.replaceChild( p, p2 );
</script>
</body>

插入節點

表示在指定位置插入節點
appendChild（）：表示在指定父節點中最後的位置插入節點
insertBefore（）：表示在指定目標節點的前面插入節點

<body>
<div id="d1">
    <p id="p1">手機</p>
    <p id="p2">手錶</p>
    <p id="p3">電腦</p>
</div>
<script>
    /*
        插入節點
        表示在指定位置插入節點
        appendChild（）：表示在指定父節點中最後的位置插入節點
        insertBefore（）：表示在指定目標節點的前面插入節點
     */
    /* appendChild 方式 */
    /* 建立元素節點 */
    var p = document.createElement( 'p' );
    /* 建立文本節點 */
    var ps = document.createTextNode( '外設' );
    /* 將建立的文本節點插入到建立的元素節點中 */
    p.appendChild( ps );
    /* 定位指定父節點的位置 */
    var d1 = document.getElementById( 'd1' );
    /* 將建立的元素節點插入到指定父節點的最後位置 */
    d1.appendChild( p );

    /* insertBefore 方式 */
    /* 建立元素節點 */
    var px = document.createElement( 'p' );
    /* 建立文本節點 */
    var pxs = document.createTextNode( '遊戲機' );
    /* 將建立的文本節點插入到建立的元素節點中 */
    px.appendChild( pxs );
    /* 定位指定目標元素節點的位置 */
    var p2 = document.getElementById( 'p2' );
    /*
        將建立的元素節點插入到指定目標元素節點的前面
        在口號裏寫兩個值：建立的元素節點  目標元素節點的位置
     */
    d1.insertBefore( px, p2 );
</script>
</body>

刪除節點

removeChild瀏覽器
- 表示刪除指定的元素節點
被刪除的元素節點只是在DOM節點數中被刪除，並非在內存中被刪除,還能夠在調用

<body>
<div id="d1">
    <p id="p1">手機</p>
    <p id="p2">手錶</p>
    <p id="p3">電腦</p>
</div>
<script>
    /*
        刪除節點 - removeChild
        表示刪除指定的元素節點
        被刪除的元素節點只是在DOM節點數中被刪除，並非在內存中被刪除,還能夠在調用
     */
    /* 定位指定父節點的位置 */
    var d1 = document.getElementById( 'd1' );
    /* 定位要刪除的節點位置 */
    var p = document.getElementById( 'p2' );
    /* 刪除指定節點 */
    d1.removeChild( p );
</script>
</body>

複製節點

cloneNode（）app
- 括號中添寫布爾值「true或false」code
  - true：表示複製後代節點
  - false：表示不復制後代節點（默認值）
若是被複制的節點具備ID屬性，複製後要修改ID屬性的屬性值

<body>
<div id="d1">
    <p id="p1">手機</p>
    <p id="p2">手錶</p>
    <p id="p3">電腦</p>
</div>
<script>
    /*
        複製節點 - cloneNode（）
        括號中添寫布爾值「true或false」
        true：表示複製後代節點
        false：表示不復制後代節點（默認值）
        若是被複制的節點具備ID屬性，複製後要修改ID屬性的屬性值
     */
    /* 定位被複制的節點位置 */
    var p = document.getElementById( 'p2' );
    /* 複製目標節點 */
    var pp = p.cloneNode( true );
    /* 更改複製後的ID屬性值 - ID屬性的惟一性 */
    pp.setAttribute( 'id', 'pp2' );
    console.log( pp );
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。