jsquerySelector()基本使用方法（圖文教程）

querySelector 定義和用法

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

瀏覽器支持

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

語法document.querySelector(CSS selectors)

參數值

參數 類型 描述

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

技術細節

DOM 版本: Selectors Level 1 Document Object

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

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

更多實例

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

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

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

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

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

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

7、通過獲取select的內容實現網址跳轉

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

JS內加載jquery.js方法詳解

JS同步、異步與延遲加載實現總結

JS生成指定范圍隨機數和隨機序列方法詳解

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com