快捷導(dǎo)航

js querySelector() 使用方法

更新時間：2016年12月21日 14:20:13 投稿：mdxy-dxy

querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代

querySelector 定義和用法

querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。

語法
document.querySelector(CSS selectors)

參數(shù)值

參數(shù)	類型	描述
CSS 選擇器	String	必須。指定一個或多個匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。對于多個選擇器，使用逗號隔開，返回一個匹配的元素。

技術(shù)細(xì)節(jié)

DOM 版本:	Selectors Level 1 Document Object
返回值:	匹配指定 CSS 選擇器的第一個元素。如果沒有找到，返回 null。如果指定了非法選擇器則拋出 SYNTAX_ERR 異常。

實例

獲取文檔中 id="demo" 的第一個元素：

<p id="demo">id="demo" 的 p 元素</p>
<p id="demo">id="demo" 的 p 元素</p>
<p> 點擊按鈕修改過第一個 id="demo" 的 p元素內(nèi)容</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
 document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>

更多實例

1、獲取文檔中第一個 <p> 元素：

<p>這是一個 p 與元素。</p>
<p>這也是一個 p 與元素。</p>
<p>點擊按鈕修改文檔中第一個 p 元素的背景顏色。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
 document.querySelector("p").style.backgroundColor = "red";
}
</script>

2、獲取文檔中 class="example" 的第一個元素:

<h2 class="example">class="example" 的標(biāo)題</h2>
<p class="example"> class="example" 的段落。</p> 
<p>點擊按鈕為第一個 class="example" 的元素添加背景顏色。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
 document.querySelector(".example").style.backgroundColor = "red";
}
</script>

3、獲取文檔中 class="example" 的第一個 <p> 元素:

<h2 class="example">class="example" 的標(biāo)題</h2>
<p class="example">class="example" 的段落。</p> 
<p>點擊按鈕為第一個帶有 class="example" 的 p 元素添加背景顏色。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
 document.querySelector("p.example").style.backgroundColor = "red";
}
</script>

4、獲取文檔中有 "target" 屬性的第一個 <a> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家</title>
<style>
a[target] {
 background-color: yellow;
}
</style>
</head>
<body>

<p> CSS 選擇器 a[target] 確保所有有 target 屬性的鏈接背景顏色為黃色：</p>
<a href="http://www.dbjr.com.cn">jb51.net</a>
<a  target="_blank">disney.com</a>
<a  target="_top">wikipedia.org</a>
<p>點擊按鈕為帶有 target 屬性的鏈接添加紅色背景。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
 document.querySelector("a[target]").style.border = "10px solid red";
}
</script>
</body>
</html>

5、以下實例演示了多個選擇器的使用方法。
假定你選擇了兩個選擇器: <h2> 和 <h3> 元素。
以下代碼將為文檔的第一個 <h2> 元素添加背景顏色：

<h2> h2 元素</h2>
<h3> h3 元素</h3>
<script>
document.querySelector("h2,h3").style.backgroundColor = "red";
</script>

6、但是，如果文檔中 <h3> 元素位于 <h2> 元素之前，<h3> 元素將會被設(shè)置指定的背景顏色。

<h3> h3 元素</h3>
<h2> h2 元素</h2>
<script>
document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

7、通過獲取select的內(nèi)容實現(xiàn)網(wǎng)址跳轉(zhuǎn)

<select id="language-picker">
<option value="cs">Česky</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="jp">日本語</option>
<option value="pl">Polski</option>
<option value="pt">Português</option>
<option value="zh" selected>中國的</option>
</select>
<script>
 var lang = document.querySelector('#language-picker');
 lang.addEventListener('change', function(e) {
 if (e.target.value === 'en') {
  window.location = '/';
 } else {
  window.location = '/' + e.target.value;
 }
 });
</script>

腳本之家小編提醒：因為ie8以上版本才支持querySelector，請大家酌情使用。

您可能感興趣的文章: