介紹幾個js DOM的常用方法
取得元素節點 getElementById getElementsByTagName getElementsByClassName
先寫一個簡單的網頁做測試:
/* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p> <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p> </body> </html>
先寫一個簡單的網頁做測試:
rrreee1. ent.getElementById("contentId "); 2.然後輸出物件contentId 回傳id為contentId 的元素物件()。見下圖:
2. getElementsByTagName 1.還是先定義變數 var contentTag = document.getElementsByTagName("p"); > ,由此可知getElementsByTagName 回傳的是陣列!
3. getElementsByClassName 1. var contentClass = document.getElementsByClassName("contentClass"); 2. contentClass 輸出 HTMLC片 [p. 3. contentClass[0] 輸出我們常用的還有At , nodeType, nodeValue, firstChild, lastChild 方法取得一些資訊。
4.分別用getAttribute 和setAttribute 取得和設定屬性:改變這是child屬性後:
5.改變這是childNO:NOdesNO:那麼說p> 當遇到區塊元素時,區塊元素之間會有一個換行符
,瀏覽器在尋找子節點時會將它視為一個文字節點。從圖中也可以看出 childNodes 回傳的也是陣列。
呢?
nodeType 的值有12種,常用的也就三種:1表示元素節點,2表示屬性節點,3表示文字節點。 nodeValue 不僅可以取得文字節點的值,還可以改變文字節點的值。 以上就是本文的全部內容,希望本文的內容對大家的學習或工作能帶來一定的幫助,同時也希望多多支持PHP中文網! 更多 js常用DOM方法詳解相關文章請關注PHP中文網!