首頁 > web前端 > js教程 > 主體

js常用DOM方法詳解

高洛峰
發布: 2017-02-06 09:16:06
原創
1535 人瀏覽過

介紹幾個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>
登入後複製
1.

先寫一個簡單的網頁做測試:

rrreee1. ent.getElementById("contentId ");

 2.然後輸出物件contentId 回傳id為contentId  的元素物件(

)。見下圖:

 js常用DOM方法详解

2.  getElementsByTagName  

   1.還是先定義變數  var contentTag = document.getElementsByTagName("p"); > , ] 共兩個,一個以#開頭表示id,另一個以.開頭表示Class name。

 3.繼續contentTag[0]  輸出

 contentTag[1] 輸出

由此可知getElementsByTagName   回傳的是陣列!  js常用DOM方法详解

3.  getElementsByClassName 

  1. var contentClass = document.getElementsByClassName("contentClass");

  2. contentClass 輸出 HTMLC片 [p.

  3. contentClass[0] 輸出

我們常用的還有At , nodeType, nodeValue, firstChild, lastChild 方法取得一些資訊。  js常用DOM方法详解

4.分別用getAttribute 和setAttribute 取得和設定屬性:

改變這是child屬性後: js常用DOM方法详解

5.改變這是childNO:NOdesNO:那麼說p> 當遇到區塊元素時,區塊元素之間會有一個換行符
,瀏覽器在尋找子節點時會將它視為一個文字節點。從圖中也可以看出 childNodes 回傳的也是陣列。  js常用DOM方法详解

那如果是

呢?

 js常用DOM方法详解

nodeType 的值有12種,常用的也就三種:1表示元素節點,2表示屬性節點,3表示文字節點。

nodeValue 不僅可以取得文字節點的值,還可以改變文字節點的值。

 js常用DOM方法详解

以上就是本文的全部內容,希望本文的內容對大家的學習或工作能帶來一定的幫助,同時也希望多多支持PHP中文網!

更多 js常用DOM方法詳解相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板