首頁 > 開發者 > JavaScript
標籤：簡單的 nbsp 行修改 文本 fine -- span count() lin
1、DOM是文件物件模型（Document Object Model）的簡稱。
當網頁載入時，可以將結構化文檔在記憶體中轉換成對象樹。
簡單的說，DOM並不是一種技術，而是一種訪問結構化文檔的思想。藉助DOM模型，我們可以對DOM樹進行修改、刪除、新增等操作，讓結構化文檔動態化。
2、DOM模型中的節點--文檔可以說是由節點構成的集合。在DOM模型中有以下3種節點：
（1）元素節點：各種標籤就是這些元素節點的名稱，如<ul>、<p>等；
（2）文本節點：文本節點總是被包含在元素節點的內部；
（3）屬性節點：一般用來修飾元素節點的就稱之為屬性節點。
3、DOM對HTML元素的訪問操作：
為了動態地修改HTML元素，須先訪問HTML元素。DOM主要提供了兩種方式來訪問HTML元素：
（1）根據ID訪問HTML元素--通過document對象調用getElementById（）方法來尋找具有唯一id屬性值的元素；
如下例子：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="name" content="content"> <title>DOM-使用getElementById方法尋找元素</title> <script type="text/javascript"> function showContent(){ var myDiv,content,txtName; with(document){ myDiv=getElementById("myDiv"); content=getElementById("content"); txtName=getElementById("txtName"); } alert(myDiv.innerHTML+"\n"+content.value+"\n"+txtName.value); } </script> </head> <body> <div id="myDiv">我的div塊</div> <textarea id="content" rows="3" cols="25">好好學習,天天向上</textarea><br> <input type="text" id="txtName" value="chen"><br> <input type="button" id="btn_show" value="訪問3個元素的內容" onclick="showContent()"><br> </body></html>
（2）利用節點關係訪問HTML元素。常用的屬性和方法如下：
parentNode:返回當前節點的父親節點；
previousSibling:返回當前節點的前一個兄弟節點；
nextSibling:返回當前節點的後一個兄弟節點；
childNode:返回當前節點的所有子節點；
firstChild:返回當前節點的第一個子節點；
lastChild:返回當前節點的最後一個子節點；
getElementsByTagName(tagName):返回當前節點的具有指定標籤名的所有子節點。
如下例子：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #n4{color:red;} </style> </head> <body> <ul id="names"> <li id="n1">Bob</li> <li id="n2">PJ</li> <li id="n3">Teddy</li> <li id="n4">Chariel</li> <li id="n5">Gabe</li> <li id="n6">Dorra</li> </ul> <input type="button" value="父節點" onclick="showContent(current.parentNode)"> <input type="button" value="第一個子節點" onclick="showContent(current.parentNode.firstChild.nextSibling)"> <!--注意：在FirefoxGoogle瀏覽器裡面，換行也會被認為是子節點， 如果沒有加nextSibling，在FirefoxGoogle瀏覽器輸出的結果會是undefined--> <input type="button" value="上一個節點" onclick="showContent(current.previousSibling.previousSibling)"> <input type="button" value="下一個節點" onclick="showContent(current.nextSibling.nextSibling)"> <input type="button" value="最後一個子節點" onclick="showContent(current.parentNode.lastChild.previousSibling)"> <input type="button" value="得到所有li元素的個數" onclick="showCount()"> <script type="text/javascript"> var current=document.getElementById("n4"); function showContent(target){ alert(target.innerHTML); } /*若是將JavaScript代碼放在head標籤中，那麼會報錯：Cannot read property ‘parentNode‘ of null 因為JavaScript是解析執行的，HTML會從上面的標籤往下執行， 語句“var current=document.getElementById("n4");”沒有放在函數中，還沒有解析到ul標籤，就去找n4了， 所以會出錯。解決方案之一是將JavaScript代碼放在最後面，就是放在</body>前面。 還有一種解決方案就是先讓HTML結構載入完畢之後再執行。 */ function showCount(){ alert(document.getElementsByTagName("li").length); } </script> </body></html>
JavaScript之DOM文件物件模型
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
