js常用DOM方法

2021-10-08 20:14:55 字數 3010 閱讀 2020

介紹幾個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.  getelementbyid

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 通過選擇...