首頁 >web前端 >js教程 >js常用DOM方法詳解

js常用DOM方法詳解

高洛峰原創: 2017-02-06 09:16:061592瀏覽

介紹幾個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中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript物件導向精要下一篇：JavaScript物件導向精要

相關文章

看更多