js常用DOM方法

介紹幾個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.先定義變數 var contentid = document.getelementbyid("contentid");

2.然後輸出物件 contentid 就返回id為 contentid  的元素物件（  ）。見下圖：

1.還是先定義變數  var contenttag = document.getelementsbytagname("p");

2.接著我輸出 contenttag ，它返回 htmlcollection [ <

p#contentid

>, <

p.contentclass

> ] 共兩個，乙個以#開頭表示id，另乙個以.開頭表示class name。

3.繼續 contenttag[0]  輸出 <

p id

="contentid"

style

="width:500px; height: 30px;background-color: #ccc"

>

contenttag[1] 輸出 <

由此可知 getelementsbytagname   返回的是陣列！

3.  getelementsbyclassname

1. var contentclass = document.getelementsbyclassname("contentclass");

2. contentclass 輸出 htmlcollection [ <

p.contentclass

> ] 返回乙個元素物件陣列，即使只有乙個。

3. contentclass[0] 輸出 <

我們常用的還有 getattribute，setattribute，childnodes, nodetype, nodevalue, firstchild, lastchild 方法獲取一些資訊。

4.分別用 

getattribute

和 setattribute

獲取和設定屬性：

改變style屬性後：

5.那麼這是childnodes：

也就是說， 

在遇到塊元素時，塊元素之間會有乙個換行符 

,瀏覽器在查詢子節點時會將它視為乙個文字節點。從圖中也可以看出 childnodes 返回的也是陣列。

那如果是呢？

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

nodevalue 不僅可以獲取文字節點的值，還可以改變文字節點的值。

js的dom方法還有好多，可以看看這個w3school js參考手冊，相信對初學者有很大幫助。

xd！

js常用DOM方法

介紹幾個js dom的常用方法 獲取元素節點 getelementbyid getelementsbytagname getelementsbyclassname 先寫乙個簡單的網頁做測試 test.html doctype html html head meta charset utf 8 tit...

DOM常用方法總結

getelementsbyname 尋找有著給定name屬性的所有元素，這個方法將返回乙個節點集合，這個集合可以當作乙個陣列來處理。這個集合的length屬性等於當前文件裡有著給定name屬性的所有元素的總個數。getelementsbytagname 尋找有著給定標籤名的所有元素，這個方法將返回乙...

js 獲取dom元素方法

js 獲取dom元素的八種方法 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...