querySelector方法怎么使用

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 19:27:37

querySelector方法怎么使用

querySelector方法怎么使用:querySelector() 方法可以用于返回文檔中匹配指定 CSS 選擇器的一個元素，如果需要返回所有的元素，就需要使用querySelectorAll() 方法替代，下面我們就來具體看看querySelector方法的具體用法。我們先來看一下querySelector()的基本語法do

推薦度：

點擊下載本文 文檔為doc格式

導讀querySelector方法怎么使用:querySelector() 方法可以用于返回文檔中匹配指定 CSS 選擇器的一個元素，如果需要返回所有的元素，就需要使用querySelectorAll() 方法替代，下面我們就來具體看看querySelector方法的具體用法。我們先來看一下querySelector()的基本語法do

querySelector() 方法可以用于返回文檔中匹配指定 CSS 選擇器的一個元素，如果需要返回所有的元素，就需要使用querySelectorAll() 方法替代，下面我們就來具體看看querySelector方法的具體用法。

JavaScript

我們先來看一下querySelector()的基本語法

document.querySelector(CSS selectors)

CSS selectors表示一個或多個匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。

注意：對于多個選擇器，使用逗號隔開。

下面我們來看具體示例

代碼如下

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<h2 class="example">文本的標題</h2>
<p class="example"> 文本的段落。</p> 
<button onclick="myFunction()">按鈕</button>
<script>
function myFunction() {
 document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

效果如下：當點擊“按鈕”后，文本標題的背景顏色就會變成如下所示的紅色

微信截圖_20190214151346.png