操作DOM時我們經常需要獲取元素,這里總結一下獲取元素的方法
| 方法名 | 參數 | 特點 |
|---|---|---|
| document.getElementById(id) | ID | 返回單個對象 |
| document.getElementsByClassName(names) | class名稱 | 返回集合 |
| document.getElementsByName(name) | 元素name屬性 | 返回集合 |
| document.getElementsByTagName(tagName) | 標簽名 | 返回集合 |
| document.querySelector(selectors) | CSS選擇器 | 返回單個對象 |
| document.querySelectorAll(selectors) | CSS選擇器 | 返回集合 |
document.getElementById()
返回一個匹配特定 ID的元素.
語法
element = document.getElementById(id)
參數
element是一個Element 對象。如果當前文檔中擁有特定ID的元素不存在則返回null.id是大小寫敏感的字符串，代表了所要查找的元素的唯一ID.
示例
<!DOCTYPE html>
<html>
<head>
<title>getElementById example</title>
<script>
function changeColor(newColor) {
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
</head>
<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
</body>
</html>
document.getElementsByClassName()
返回一個類似數組的對象，包含了所有指定 class 名稱的子元素。當調用發生在document對象上時, 整個DOM都會被搜索, 包含根節點。你也可以在任意元素上調用getElementsByClassName() 方法，它將返回的是以當前元素為根節點，所有指定class名稱的子元素。
語法
var elements = document.getElementsByClassName(names); // or: var elements = rootElement.getElementsByClassName(names);
參數
- elements 是查找到的所有元素的集合
HTMLCollection.- names 是一個字符串，表示用于匹配的 class 名稱列表; class 名稱通過空格分隔
- getElementsByClassName 可以在任意的元素上調用，不僅僅是 document。 調用這個方法的元素將作為本次查找的根元素.
示例
document.getElementsByClassName('test');
//class同時包括red和test
document.getElementsByClassName('red test');
//在id 為'main'的元素的子節點中，獲取所有class為'test'的元素
document.getElementById('main').getElementsByClassName('test');
document.getElementsByName()
根據給定的name 返回一個在 (X)HTML document的節點列表集合。
語法
elements = document.getElementsByName(name)
參數
elements是一個NodeList集合。name是元素的name屬性的值。
示例
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<form name="up"><input type="text"></form>
<div name="down"><input type="text"></div>
<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>
</body>
</html>
document.getElementsByTagName()
返回帶有指定標簽名的對象的集合.
語法
elements = element.getElementsByTagName(tagName)
參數
tagName必須放在引號中
示例
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">單擊“按鈕”更改列表項的文本。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
var list=document.getElementsByTagName("UL")[0]
list.getElementsByTagName("LI")[0].innerHTML="Milk";
};
</script>
</body>
</html>
document.querySelector()
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
語法
element = document.querySelector(selectors)
參數
selectors: css選擇器
示例
//獲取文檔中第一個 <p> 元素：
document.querySelector("p")
//獲取文檔中 class="example" 的第一個元素:
document.querySelector(".example");
//獲取文檔中 class="example" 的第一個 <p> 元素:
document.querySelector("p.example");
//獲取文檔中有 "target" 屬性的第一個 <a> 元素：
document.querySelector("a[target]");
document.querySelectorAll()
語法
elementList = document.querySelectorAll(selectors);
參數
獲取的是一個集合
selectors為css選擇器
示例
//返回一個文檔中所有的class為"note"或者 "alert"的div元素
var matches = document.querySelectorAll("div.note, div.alert");
