javascript （六）DOM

學習後的總結：

DOM：document object model

關於DOM的簡介：http://www.w3school.com.cn/htmldom/dom_intro.asp

本文說的是HTML DOM 的一些操作：

DOM樹：DOM樹將HTML文檔體現為樹狀，DOM樹中有很多節點；

DOM通過對節點的操作來操作文檔，DOM節點分為12種類型：https://blog.csdn.net/zhuwq585/article/details/52955890

常用的三種類型：元素節點，屬性節點，文本節點；

• 節點通用屬性：nodeName -> 節點的名字 、  nodeType -> 節點的類型 、 nodeValue -> 節點的值

通用屬性在不同節點的情況：https://blog.csdn.net/qingqingzijinxin/article/details/52244700

獲取節點操作：

• childNodes ：獲取某個節點的所有子節點
• children : 獲取某個節點的所有元素子節點

它們的區別：https://blog.csdn.net/u013063153/article/details/52755991

• nextSibling 獲取下一個節點。

存在差異性：主流瀏覽器：獲取下一個節點（可能是文本節點）IE 6 7 8 ：中變成了獲取下一個元素節點

• nextElementSibling  存在相容性：主流瀏覽器：獲取下一個元素節點， IE 6 7 8 ：不存在這個屬性

根據他們的不同的情況，可以寫一個相容：

<div id="box">
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>
var oBox = document.getElementById('box');
var oP1 = oBox.children[0];
function nSibling( obj ){
        if ( obj.nextElementSibling ) //如果相容主流瀏覽器
       {
                nObj = obj.nextElementSibling;
       }else{
                nObj = obj.nextSibling;
       };

      //如果存在div下只有一個元素節點的時候，obj.nextElementSibling 返回undefined，這時候需要判斷是否仍有一個元素節點；
      return nObj.nodeType!==1?null:nObj;
};

 firstChild 第一個子節點

lastChild 最後一個子節點

firstElementChild 第一個元素節點

lastElementChild 最後一個元素節點

parentNode 父節點

offsetParent 定位父節點 ：https://www.jb51.net/article/45555.htm ；

上述鏈接定位父節點分三種情況分析：1子節點父節點都沒有定位，2父節點有定位，3父節點的兄弟節點有定位。

 創建、插入節點

• createElement( 標簽名 ) 創建元素節點
• createTextNode( 字元串 ) 創建文本節點
• appendChild（節點名） 添加子節點
• insertBefore( args1, args2 ) 往某個子節點之前添加一個兄弟

1. 第一個參數：要添加的節點
2. 第二個參數：添加在誰之前

小案例：創建元素節點

<div id="box">
    <p id='goudan'>pppp</p>
</div>
var oBox = document.getElementById('box');
var oA = document.createElement('a');
oA.href = 'http://tanzhouedu.com';
oA.innerHTML = '我是添加的a標簽';
oA.className = 'dachui';
oA.id = 'aa';
oBox.appendChild( oA ); //createElement只是創建了個節點，還需要通過appendChild 來加到DOM樹上

 刪除子節點

• removeChild(args)  

1. args:要刪除的節點

<div id="box">
    <p id='p1'>蘋果</p>
    <p id='p2'>香蕉</p>
    <p id='p3'>梨子</p>
</div>
var oBox = document.getElementById('box');
var oP2 = document.getElementById('p2');
oBox.removeChild( oP2 );

完畢...