實例
獲取文檔中 id="demo" 的第一個元素:
document.querySelector("#demo");
定義和用法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意: querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素,請使用 querySelectorAll() 方法替代。
語法
document.querySelector(CSS selectors)
其中CSS selectors 參數為必須。
表示CSS 選擇器
為String類型
指定一個或多個匹配元素的 CSS 選擇器。 可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。
對於多個選擇器,使用逗號隔開,返回一個匹配的元素。
返回值: 匹配指定 CSS 選擇器的第一個元素。 如果沒有找到,返回 null。如果指定了非法選擇器則 拋出 SYNTAX_ERR 異常。
示例:
<p id="demo">id="demo" 的 p 元素</p>
<p id="demo">id="demo" 的 p 元素</p>
<p> 點擊按鈕修改過第一個 id="demo" 的 p元素內容</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
document.querySelector("#demo").innerHTML = "Hello HoverTree!";
}
</script>
效果如下:
id="demo" 的 p 元素
id="demo" 的 p 元素
點擊按鈕修改過第一個 id="demo" 的 p元素內容