JavaScript怎麼取得DOM元素

方法：1、用getElementById方法透過ID取得；2、用getElementsByName方法透過name值取得；3、用getElementsByTagName方法透過標籤名稱取得；4、用querySelector方法透過選擇器取得。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JS取得DOM元素的方法（8種）

• #透過ID取得（getElementById）
• 透過name屬性（getElementsByName）
• 透過標籤名稱（getElementsByTagName）
• 透過類別名稱（getElementsByClassName）
• 透過選擇器取得一個元素（querySelector）
• #透過選擇器取得一組元素（querySelectorAll）
• 取得html的方法（document.documentElement）
• document.documentElement是專門取得html這個標籤的
• #取得body的方法（document.body）
• document.body是專門取得body這個標籤的。

1、透過ID取得（getElementById）

document.getElementById('id')

• 上下文必須是document。
• 必須傳參數，參數是string類型，是取得元素的id。
• 傳回值只取得到一個元素，沒有找到回傳null。

2、透過name屬性（getElementsByName）

document.getElementsByName('name')

• 上下文必須是document，內容
• 必須傳參數，參數是是取得元素的name屬性。
• 傳回值是一個類別數組，沒有找到傳回空數組。

【推薦學習：javascript進階教學】

#3、透過標籤名稱（getElementsByTagName）

• #上下文可以是document，也可以是元素，注意這個元素一定要存在。
• 參數是是取得元素的標籤名屬性，不區分大小寫。
• 傳回值是一個類別數組，沒有找到回傳空數組

4、透過類別名稱（getElementsByClassName）

var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated

• #上下文可以是document，也可以是一個元素。
• 參數是元素的類別名稱。
• 傳回值是一個類別數組，沒有找到傳回空數組。

5、透過選擇器取得一個元素（querySelector）

document.querySelector('.animated')

• 上下文可以是document，也可以是一個元素。
• 參數是選擇器，如：”p .className」。
• 傳回值只取得到第一個元素。

6、透過選擇器取得一組元素（querySelectorAll）

document.querySelector('.animated')

• 上下文可以是document，也可以是一個元素。
• 參數是選擇器，如：”p .className」。
• 傳回值是一個類別數組。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是JavaScript怎麼取得DOM元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！