JavaScript操作DOM

根據 W3C 的 HTML DOM 标準，HTML 文檔中的所有内容都是節點：

整個文檔是一個文檔節點

每個 HTML 元素是元素節點

HTML 元素内的文本是文本節點

每個 HTML 屬性是屬性節點

注釋是注釋節點

<a href="http://s3.51cto.com/wyfs02/M00/12/77/wKiom1MITraDXRNaAADRpKV8Qqs424.jpg" target="_blank"></a>

1    getElementById()方法

   getElementById()查找具體某個标簽元素，查詢的是标簽元素ID的屬性。

<code>var</code> <code>element=document.getElementById(</code><code>"element_id"</code><code>);</code>

2    getElementsByTagName()方法

   getElementsByTagName()查找一組标簽，具有相同名稱的标簽元素。

<code>var</code> <code>element=document.getElementsByTagName(</code><code>"p"</code><code>);</code>

3    getElementsByClassName()方法

   getElementsByClassName()查找帶有相同類名的所有标簽元素。

<code>var</code> <code>element=document.getElementsByTagName(</code><code>"element_class"</code><code>);</code>

4    getElementsByName()方法

   getElementsByName()：該方法與 getElementById() 方法相似，但是它查詢元素的 name 屬性，而不是 id 屬性，傳回的是元素數組。

<code>var</code> <code>element=document.getElementsByName(</code><code>"myInput"</code><code>);</code>

5    createELement()方法

    createELement方法用來建立新的文檔元素。

<code>window.   </code><code>var</code> <code>p_tag=document.createElement(</code><code>"p"</code><code>);</code>

<code>   </code><code>alert(</code><code>"nodeName:"</code><code>+p_tag.nodeName+</code><code>" nodeType:"</code><code>+p_tag.nodeType);</code>

<code>}</code>

   新節點已經存在了，想要節點插入到文檔的節點樹中，簡單的方法便是讓他成為某個文檔節點樹的子節點，可以使用appendChild方法

6    appendChild()方法

    appendChild方法用來向文檔節點樹中插入元素。

<code>window.     </code><code>var</code> <code>p_tag=document.createElement(</code><code>"p"</code><code>);</code>

<code>     </code><code>var</code> <code>div_tag=document.getElementById(</code><code>"test"</code><code>);</code>

<code>     </code><code>div_tag.appendChild(p_tag);</code>

7    createTextNode()方法

   createTextNode方法用來建立文本節點，它的文法和createElement方法一樣。同樣，通過appendChild方法可将建立的文本節點插入到元素裡成為元素的子節點。

<code>window.     </code><code>var</code> <code>p_tag=document.createElement(</code><code>"p"</code><code>);   </code>

<code>     </code><code>var</code> <code>text_tag=document.createTextNode(</code><code>"hello，world"</code><code>);</code>

<code>     </code><code>p_tag.appendChild(text_tag);</code>

元素的建立和插入的順序可以不同，下面的仍舊可以得到相同的結果：

8    insertBefore()方法

   appendChild() 方法将新元素作為父元素的最後一個子元素進行添加，當你不希望如此時，你可以使用insertBefore。

<code>element.insertBefore(nodeName,childNodeName)</code>

9    removeChild()方法

   removeChild方法用來删除文檔節點樹的元素，删除前必須要清楚該元素的父元素。

<code>&lt;script&gt;</code>

<code>    </code><code>var</code> <code>parent=document.getElementById(</code><code>"div1"</code><code>);</code>

<code>    </code><code>var</code> <code>tag=document.getElementById(</code><code>"p2"</code><code>);</code>

<code>    </code><code>parent.removeChild(tag);</code>

<code>&lt;/script&gt;</code>

   提示：能否在不引用父元素的情況下删除某個元素？

<code>var</code> <code>child=document.getElementById(</code><code>"p1"</code><code>);</code>

<code>child.parentNode.removeChild(child);</code>

10    replaceChild()方法

   如需替換文檔節點樹的元素，可以使用 replaceChild() 方法。

<code>    </code><code>var</code> <code>para=document.createElement(</code><code>"p"</code><code>);</code>

<code>    </code><code>var</code> <code>node=document.createTextNode(</code><code>"This is new."</code><code>);</code>

<code>    </code><code>para.appendChild(node);</code>

<code>    </code><code>var</code> <code>child=document.getElementById(</code><code>"p1"</code><code>);</code>

<code>    </code><code>parent.replaceChild(para,child);</code>

11    childNodes屬性

   在一棵節點樹上，childNodes屬性可以擷取任何一個元素的所有子元素。

<code>//首先獲得body元素</code>

<code>var</code> <code>body_element=document.getElementsByTagName(</code><code>"body"</code><code>)[</code><code>0</code><code>];</code>

<code>//獲得body的所有子元素</code>

<code>var</code> <code>child_elements=body_element.childNodes;</code>

<code>//child_elements是一個元素數組集合，統計元素個數可以用數組的length屬性</code>

12    nodeType屬性

   nodeType 屬性傳回節點的類型，是隻讀的。比較重要的節點類型有：    

元素類型

NodeType

元素節點

1

屬性節點

2

文本節點

3

注釋節點

8

文檔節點

9

<code>//檢視body元素的節點類型</code>

<code>alert(body_element.nodeType);</code>

13    nodeValue屬性

   nodeValue 用來得到或設定一個節點的值。

   （1）元素節點的 nodeValue 是 undefined 或 null

   （2）文本節點的 nodeValue 是文本本身

   （3）屬性節點的 nodeValue 是屬性值

<code>&lt;pre </code><code>class</code><code>=</code><code>"lang:js decode:true"</code><code>&gt;</code>

<code>&lt;p id=</code><code>"p_element"</code><code>&gt;這是内容&lt;/p&gt;</code>

<code>......    </code>

<code>var</code> <code>p_value=document.getElementById(</code><code>"p_element"</code><code>);     </code>

<code>alert(p_value.nodeValue);     </code>

<code>alert(p_value.childNodes[</code><code>0</code><code>].nodeValue);   </code>

<code>p_value.childNodes[</code><code>0</code><code>].nodeValue=</code><code>"這是改變後的内容"</code><code>;</code>

<code>&lt;/pre&gt;</code>

   第一個對話框的值為null，這是由于p_value.nodeValue得到的是p元素的nodeValue值，是null。

  第二個對話框的值是p元素包含的文本内容，文本内容是P元素的第一個子節點，用p_value.childNodes[0]得到這個文本節點。再使用nodeValue就可以得到或者來改變文本内容了。

14    firstChild屬性和lastChild屬性

   node.firstChild等價node.childNodes[0]

   node.lastChild等價于node.childNodes[node.childNodes.length-1]

15    innerHTML屬性

   innerHTML屬性可以讀取、寫入給定元素的HTML内容。

   （1）讀取操作

<code>&lt;div id=</code><code>"test"</code><code>&gt;</code>

<code>    </code><code>&lt;p&gt;</code><code>this</code> <code>is</code> <code>&lt;em&gt;my&lt;/em&gt; content&lt;/p&gt;</code>

<code>&lt;/div&gt;</code>

<code>    </code><code>window.    </code><code>var</code> <code>innerTest=document.getElementById(</code><code>"test"</code><code>);</code>

<code>    </code><code>alert(innerTest.innerHTML);</code>

<code>    </code><code>}</code>

   （2）寫入操作

<code>    </code><code>innerTest.innerHTML=</code><code>"&lt;p&gt;this is &lt;em&gt;my new&lt;/em&gt; content&lt;/p&gt;"</code><code>;</code>

   注：在使用了innerHTML屬性後，指定插入的元素中的内容會被全部替換。同時，innerHTML屬性是HTML的專有屬性，當浏覽器在呈現XHTML文檔時，會忽略innerHTML屬性。

     本文轉自stock0991 51CTO部落格，原文連結：http://blog.51cto.com/qing0991/1362067，如需轉載請自行聯系原作者