js-dom學習

1.HTML文檔被瀏覽器解析後就是一棵DOM樹，要改變HTML的結構，就須要經過JavaScript來操做DOM。DOM是一個樹形結構。操做一個DOM節點實際上就是這麼幾個操做：

a更新：更新該DOM節點的內容，至關於更新了該DOM節點表示的HTML的內容；
b遍歷：遍歷該DOM節點下的子節點，以便進行進一步操做；
c添加：在該DOM節點下新增一個子節點，至關於動態增長了一個HTML節點；
d刪除：將該節點從HTML中刪除，至關於刪掉了該DOM節點的內容以及它包含的全部子節點。

ID在HTML文檔中是惟一的，因此document.getElementById()能夠直接定位惟一的一個DOM節點。document.getElementsByTagName()和document.getElementsByClassName()老是返回一組DOM節點。要精確地選擇DOM，能夠先定位父節點，再從父節點開始選擇，以縮小範圍。

第二種方法是使用querySelector()和querySelectorAll().

a.一種是修改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>
// 設置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內部結構已修改

第二種是修改innerText或textContent屬性，這樣能夠自動對字符串進行HTML編碼，保證沒法設置任何HTML標籤.二者的區別在於讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回全部文本。

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

修改CSS也是常常須要的操做。DOM節點的style屬性對應全部的CSS，能夠直接獲取或設置。由於CSS容許font-size這樣的名稱，但它並不是JavaScript有效的屬性名，因此須要在JavaScript中改寫爲駝峯式命名fontSize：

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

b.插入dom元素

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

<!-- 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節點：

var list = document.querySelector("#test-list"); 
var arr = list.innerHTML.match(/(<.+?>)(.+?)(<.+?>)/g); 
list.innerHTML=arr.sort().join("");

d. 要刪除一個節點，首先要得到該節點自己以及它的父節點，而後，調用父節點的removeChild把本身刪掉. 刪除後的節點雖然不在文檔樹中了，但其實它還在內存中，能夠隨時再次被添加到別的位置。 你遍歷一個父節點的子節點並進行刪除操做時，要注意，children屬性是一個只讀屬性，而且它在子節點變化時會實時更新.