【JS】重零學習- Day14- 選擇器

如何用JS選擇DOM元素?

getElementById

getElementById() 方法可返回對指定 ID 的第一個對象的引用。

document.getElementById(id)
<input type="text" id="test">
<input type="text" id="test">
<input type="button" value="Show me" onclick="ShowValue()">

<script language="javascript">
function ShowValue(){
 var v=document.getElementById("test").value;
 alert(v);
}
</script>

但通常網頁,相同的ID只有一組,所以要注意一下!

querySelector

querySelector() 方法只返回匹配指定選擇器的第一個元素

// 取得id 為demo的第一個元素

document.querySelector("#demo");

// 取得css為 example的第一個元素 

document.querySelector(".example")

使用class =“example”獲取文檔中的第一個<p>元素:

document.querySelector("p.example");

獲取文檔中第一個<p>元素,其中父元素是<div>元素。

document.querySelector("div > p");

獲取文檔中具有“target”屬性的第一個<a>元素:

document.querySelector("a[target]");

querySelectorAll

獲取文檔中 所指定的 所有元素

以下是取得css為 example的所有元素

var x = document.querySelectorAll(".example");

 下例是取得所有有attribute data-srciframe元素:

let matches = el.querySelectorAll('iframe[data-src]');

參考範例