快捷導(dǎo)航

js querySelector() 使用方法

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

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

querySelector 定義和用法

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

瀏覽器支持

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

語(yǔ)法
document.querySelector(CSS selectors)

參數(shù)值

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

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

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

實(shí)例

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

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

更多實(shí)例

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

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

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

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

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

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

4、獲取文檔中有 "target" 屬性的第一個(gè) <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>點(diǎn)擊按鈕為帶有 target 屬性的鏈接添加紅色背景。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
function myFunction() {
 document.querySelector("a[target]").style.border = "10px solid red";
}
</script>
</body>
</html>

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

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

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

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

7、通過(guò)獲取select的內(nèi)容實(shí)現(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">日本語(yǔ)</option>
<option value="pl">Polski</option>
<option value="pt">Português</option>
<option value="zh" selected>中國(guó)的</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>

腳本之家小編提醒：因?yàn)閕e8以上版本才支持querySelector，請(qǐng)大家酌情使用。

您可能感興趣的文章: