- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>JavaScript!</title>
- </head>
- <body>
- <p id="intro">My first paragraph...</p>
- <ul>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- </ul>
- <script type="text/javascript">
- // <![CDATA[
- // ]]>
- </script>
- </body>
- </html>
在第一個例子中我們將使用’getElementById’這個DOM方法訪問我們的段落。
- var introParagraph = document.getElementById('intro');
- / 我們現在訪問了一個DOM節點，這個DOM節點代表intro段落。
變量’introParagraph’現在指向DOM節點，我們現在可以在這個節點上做很多事情，我們可以讀取它的內容和屬性，也可以控制它的任何方面。我們可以刪除它、克隆它或將它移到DOM樹的其它位置。
我們可以使用JavaScript和DOM接口訪問現在文檔中的任何東西。所以，我們可能希望用類似的方式訪問文檔中的那個無序列表，但唯一的問題就在於它並沒有ID。你可以給它一個ID屬性並使用同樣的方法訪問它或者使用’getElementsByTagName’方法訪問它。
- var allUnorderedLists = document.getElementsByTagName('ul');
- // 'getElementsByTagName' 返回當前存在的節點集合/列表
- // 它除了那一點微小的差別外其實和數組很相似。
getElementsByTagName
getElementsByTagName方法返回當前存在的節點集合/列表，它和數組的相似之處是它也有length屬性。需注意的重要一點是這些集合是’即時’的，如果你在DOM中添加了一個新元素那麼這個集合將自動自我更新。由於它和數組類似，所以我們可以使用索引來訪問其中的每個節點，從0到這個集合的總長度(減1)。
- // 訪問單個無序列表: [0] index
- var unorderedList = document.getElementsByTagName('ul')[0];
- // 將UL中的列表項創建爲節點列表:
- var allListItems = unorderedList.getElementsByTagName('li');
- // 現在我們可以使用for循環遍歷列表項:
- for (var i = 0, length = allListItems.length; i < length; i++) {
- // 提取其文本節點並alert它的內容:
- alert( allListItems[i].firstChild.data );
- }
遍歷DOM
術語”遍歷”就是用來描述訪問整個DOM尋找節點的行爲。DOM接口爲我們提供了大量的節點屬性以便我們在文檔中的所有節點自由訪問。
這些節點屬性可以方便我們訪問關聯的/挨着的節點:
Node.childNodes:你可以使用它訪問某個元素的所有直屬子元素。它將返回一個類似數組的對象，你可以循環遍歷它。數組中的節點可以包含所有不同類型的節點，如文本節點和其它類型的元素節點。
◆Node.firstChild:這個屬性等同於訪問’childNodes’數組的首項(‘Element.childNodes[0]‘)。它是個捷徑。
◆Node.lastChild:這個屬性等同於訪問’childNodes’數組的末項(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是個捷徑。
◆Node.parentNode:這個屬性可以讓你訪問當前節點的父節點，僅會有唯一一個父節點，如果想訪問’祖父’級節點，可以使用’Node.parentNode.parentNode’，以此類推。
◆Node.nextSibling:這個屬性可以讓你訪問DOM樹同級下的下一個節點。
◆Node.previousSibling:這個屬性可以讓你訪問DOM樹同級下的上一個節點。
所以就想你看到的一樣，遍歷DOM就是如此簡單，只要你熟練運用了他的那些節點屬性。
列表項只能在他們之間沒有空格的情況下檢索。因爲在文檔中你能得到文本節點和元素節點，而’<ul>’和’<li>’之間的空格也會被當做是一個節點(文本節點)。同樣，無序列表嚴格意義上講並不是段落的下一個兄弟節點，因爲在他倆之間有空格，也就是另一個節點。通常在這種情況下，你可以遍歷’childNodes’數組並測試它們的’nodeType’,'nodeType’值爲1就是元素節點，2爲屬性，3爲文本節點。
這就是JavaScript基本運行方式，你可以使用本地DOM方法和屬性漂亮的訪問並提取文檔中的元素。現在你可以脫離那些繁瑣的框架而獨立進行基本的DOM操作了。