取得DOM元素方法
| 方法 |
取得目標 |
回傳結果 |
| .getElementById() |
id |
第一個符合的標籤 |
| .getElementsByName() |
name |
物件 |
| .getElementsByTagName() |
<標籤> |
物件 |
| .querySelector() |
id、class、<標籤> |
第一個符合的標籤 |
| .querySelectorAll() |
id、class |
物件 |
抓取id元素
1
2
3
4
5
|
let apple = document.getElementById("apple");
console.log(apple); //<div id="apple"></div>
apple.textContent = "蘋果";
|
抓取name元素
1
|
<div name="apple"></div>
|
1
2
3
4
5
|
let apple = document.getElementsByName("apple");
console.log(typeof(apple)); //object
apple[0].textContent = "蘋果";
|
抓取tag標籤
1
|
<button type="button">按鈕</button>
|
1
2
3
4
5
|
let btn = document.getElementsByTagName("button");
console.log(typeof(btn)); //object
btn[0].textContent = "蘋果";
|
抓取class元素
1
2
3
4
5
|
<ul class="list">
<li><a href="#" class="nav-link">蘋果</a></li>
<li><a href="#" class="nav-link">香蕉</a></li>
<li><a href="#" class="nav-link">鳳梨</a></li>
</ul>
|
1
2
3
4
5
6
|
// 第一種寫法
document.querySelector(".nav-link").textContent = "蓮霧";
// 第二種寫法
let list = document.querySelector(".list");
list.querySelectorAll(".nav-link")[0].textContent = "蓮霧";
|
輸出結果：
1
2
3
4
5
|
<ul>
<li><a href="#" class="nav-link">蓮霧</a></li>
<li><a href="#" class="nav-link">香蕉</a></li>
<li><a href="#" class="nav-link">鳳梨</a></li>
</ul>
|
querySelector若有多個，只會抓取第一個元素
1
|
<input class="text" type="text" value="蘋果">
|
1
2
3
4
5
6
7
8
9
10
|
let text = document.querySelector(".text");
// 第一種寫法
text.value = "香蕉";
// 第二種寫法
text.setAttribute("value","香蕉");
//取得類型
console.log(typeof(text.value)); //string
|
輸出結果：
1
|
<input class="text" type="text" value="香蕉">
|
其他相關