關(guān)于 document.querySelector

Soarkey 發(fā)布于2019-08-21 10:18 / 1550人閱讀

摘要：作用返回第一個(gè)匹配指定選擇器的文檔節(jié)點(diǎn)，按深度優(yōu)先前序排列。聲明其中是一個(gè)對(duì)象是包含一個(gè)或者多個(gè)由逗號(hào)分隔的選擇器。在指定的選擇器參數(shù)是無(wú)效的時(shí)候會(huì)拋出一個(gè)異常。的字符串參數(shù)必須符合語(yǔ)法。按的指定，偽類不會(huì)返回任何元素。

作用

返回第一個(gè)匹配指定選擇器的文檔DOM節(jié)點(diǎn)，按深度優(yōu)先前序排列。

聲明

element = document.querySelector(selectors);

其中

element 是一個(gè)DOM對(duì)象.
selectors 是包含一個(gè)或者多個(gè)由逗號(hào)分隔的CSS選擇器。字符串。

示例

在下面這個(gè)示例中，文檔中第一個(gè)具有 myclass 類的DOM元素將會(huì)被返回:

var el = document.querySelector(".myclass");

注意
假若沒(méi)有匹配到將返回 null 。否則返回第一個(gè)匹配到的元素。

假若選擇器是一個(gè)ID，但I(xiàn)D錯(cuò)誤的在文檔中被使用了多次，它將返回第一個(gè)匹配到的元素。

在指定的選擇器參數(shù)是無(wú)效的時(shí)候會(huì)拋出一個(gè) SYNTAX_ERR 異常。

querySelector() 由 Selectors API 引入。

querySelector 的字符串參數(shù)必須符合CSS語(yǔ)法。

按 Selectors API 的指定， CSS偽類不會(huì)返回任何元素。

如果需要匹配沒(méi)有按CSS聲明的選擇器，比如不適當(dāng)?shù)氖褂昧嗣疤?hào)或者空格，你必須通過(guò)加斜杠轉(zhuǎn)義這些字符。因?yàn)樾备堋?’本身在JavaScript中是個(gè)轉(zhuǎn)義字符，如果你想輸入了一個(gè)字面的字符，你需要轉(zhuǎn)義兩次，一次因?yàn)?JavaScript 字符串，一次因?yàn)?querySelector。

瀏覽器兼容性

IE8+、其他高級(jí)瀏覽器

GPU云服務(wù)器云服務(wù)器關(guān)于平臺(tái) 關(guān)于加班關(guān)于學(xué)習(xí) 關(guān)于修改

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85288.html

相關(guān)文章

【翻譯】關(guān)于回調(diào)地獄

摘要：回調(diào)地獄異步程序書(shū)寫指南什么是回調(diào)地獄我們很難一眼就看懂異步，或者是使用回調(diào)函數(shù)的程序。通常回調(diào)函數(shù)會(huì)用在下載文件讀取文件或者數(shù)據(jù)庫(kù)相關(guān)事務(wù)等。注意還沒(méi)有被調(diào)用，它只是被創(chuàng)建然后最為回調(diào)函數(shù)傳入。回調(diào)地獄 JavaScript異步程序書(shū)寫指南什么是回調(diào)地獄？我們很難一眼就看懂異步JavaScript，或者是使用回調(diào)函數(shù)的JavaScript程序。例如下面這段代碼： fs.read...

Betta 2019-08-20 16:58 評(píng)論0 收藏0
React

摘要：語(yǔ)法是一種語(yǔ)法的拓展語(yǔ)言，在中官方也推薦使用描述用戶界面，使用起來(lái)會(huì)比較快捷而且易讀不是一門新的語(yǔ)言，可以理解為是一種語(yǔ)法糖，作用就是能夠讓我們更加直觀的在中創(chuàng)建標(biāo)簽，最終還是會(huì)被編譯為語(yǔ)法，例如我們看一段代碼上面的語(yǔ)法最終會(huì)被編譯為語(yǔ)法， Reatc JSX語(yǔ)法 jsx是一種JavaScript語(yǔ)法的拓展語(yǔ)言，在React中官方也推薦使用jsx描述用戶界面，使用起來(lái)會(huì)比較快捷而且易讀...

techstay 2019-08-23 11:40 評(píng)論0 收藏0
原生 js 獲取 dom 元素 querySelector() 替代 getElementById(

摘要：原生獲取元素替代替代很長(zhǎng)一段時(shí)間以來(lái)，除了的選擇器之外，我一直在用下面這幾個(gè)方法獲取元素后來(lái)才發(fā)現(xiàn)這個(gè)方法，這個(gè)方法跟的獲取元素方法是一樣的。例子關(guān)于選擇器，參閱比如，現(xiàn)在需要獲取所有以開(kāi)頭的元素，也就是說(shuō)包含等元素，就這樣寫原生 js 獲取 dom 元素 querySelector() 替代 getElementById() 替代 getElementById() 很長(zhǎng)一段時(shí)間以來(lái)...

cangck_X 2019-08-26 13:35 評(píng)論0 收藏0
原生 js 獲取 dom 元素 querySelector() 替代 getElementById(

摘要：原生獲取元素替代替代很長(zhǎng)一段時(shí)間以來(lái)，除了的選擇器之外，我一直在用下面這幾個(gè)方法獲取元素后來(lái)才發(fā)現(xiàn)這個(gè)方法，這個(gè)方法跟的獲取元素方法是一樣的。例子關(guān)于選擇器，參閱比如，現(xiàn)在需要獲取所有以開(kāi)頭的元素，也就是說(shuō)包含等元素，就這樣寫原生 js 獲取 dom 元素 querySelector() 替代 getElementById() 替代 getElementById() 很長(zhǎng)一段時(shí)間以來(lái)...

caoym 2019-08-02 14:30 評(píng)論0 收藏0
通過(guò)DOM API 查找節(jié)點(diǎn)

摘要：我們可以通過(guò)來(lái)檢查某個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)。通過(guò)可以用來(lái)取得父元素，返回值可能會(huì)是一個(gè)元素節(jié)點(diǎn)根節(jié)點(diǎn)或節(jié)點(diǎn)。與類似，通過(guò)可以取得同層之間的下一個(gè)節(jié)點(diǎn)，如果已經(jīng)是最后一個(gè)節(jié)點(diǎn)，則返回。在上一篇的分享當(dāng)中，我們簡(jiǎn)單介紹了BOM 與DOM，也了解到JavaScript 是怎么通過(guò)它們提供的方法來(lái)與瀏覽器進(jìn)行溝通。當(dāng)一個(gè)網(wǎng)頁(yè)被載入到瀏覽器時(shí)，瀏覽器會(huì)首先分析這個(gè)HTML 文檔，然后會(huì)依照這份HTML ...

shengguo 2019-05-23 17:26 評(píng)論0 收藏0