JavaScript（九）DOM

由於HTML文檔被瀏覽器解析後就是一棵DOM樹，要改變HTML的結構，就需要通過JavaScript來操作DOM。

始終記住DOM是一個樹形結構。操作一個DOM節點實際上就是這麼幾個操作：

• 更新：更新該DOM節點的內容，相當於更新了該DOM節點表示的HTML的內容；

• 遍歷：遍歷該DOM節點下的子節點，以便進行進一步操作；

• 添加：在該DOM節點下新增一個子節點，相當於動態增加了一個HTML節點；

• 刪除：將該節點從HTML中刪除，相當於刪掉了該DOM節點的內容以及它包含的所有子節點。

在操作節點前可以通過這三種方法獲得DOM節點：

1. document.getElementById();通過元素ID獲得
2. document.getElementTagName();通過元素標籤獲得；

   // 先定位ID爲'test-table'的節點，再返回其內部所有tr節點：
   var trs = document.getElementById('test-table').getElementsByTagName('tr');

3. CSS選擇器document.getElementClassName(),通過類名獲得；

   // 先定位ID爲'test-div'的節點，再返回其內部所有class包含red的節點：
   var reds = document.getElementById('test-div').getElementsByClassName('red');

一 更新DOM




（1）一種是修改innerHTML屬性，這個方式非常強大，不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置文本爲abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>

（2）第二種是修改innerText或textContent屬性，這樣可以自動對字符串進行HTML編碼，保證無法設置HTML標籤

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼，無法設置一個<script>節點:

兩者的區別在於讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本。




二 插入DOM

（1）已有節點插入，一個是使用appendChild，把一個子節點添加到父節點的最後一個子節點


var js = document.getElementById('p');

var list = document.getElementById('list');

list.appendChild(js);


（2）從零創建一個節點，然後插入到指定位置。

var list = document.getElementById('list');

var php = document.createElement('p');

php.setAttribute("id","php");

php.innerHTML("php");

list.appendChild("php");


（3）insertBefore（插入到指定位置）


parentElement.insertBefore(newElement, referenceElement);，子節點會插入到referenceElement之前


例：


<!-- HTML結構 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

按字符串順序重新排序DOM節點：

思路：

1. 先遍歷整個結構，之後在比較，比較之後在插入
2. 取出每個li節點的文本信息，存入Array隊列中，然後針對文本進行排序，創建的節點，將文本賦值，替代父節點innerHTML信息；
3. 前面同2一樣，後面不用創建新的節點，直接給父節點的children賦值；
4. 採用排序算法，直接取出最小或者最大的節點，插入到父節點中；
5. 採用冒泡排序算法，使用insertBefore方法冒泡處理；
   

var tmp = [],
ol = document.getElementById('test-list');
for(var i of ol.children){
tmp.push(i);
}
tmp.sort((x,y) =>{return x.innerText>y.innerText;});
for(var j of tmp){
ol.appendChild(j)};




三 刪除DOM

要刪除一個節點，首先要獲得該節點本身以及它的父節點，然後，調用父節點的removeChild把自己刪掉。

當你遍歷一個父節點的子節點並進行刪除操作時，要注意，children屬性是一個只讀屬性，並且它在子節點變化時會實時更新。