querySelector()返回文檔中與指定的選擇器或選擇器組匹配的第一個元素。
如果找不到匹配項,則返回null。
querySelector()方法僅返回與指定選擇器匹配的第一個元素。要返回所有匹配項,請改用querySelectorAll()方法。
document.querySelector(selectors)
document.querySelector('h1');測試看看?/?
表中的數(shù)字指定了完全支持querySelector()方法的第一個瀏覽器版本:
Method | ![]() | ![]() | ![]() | ![]() | ![]() |
querySelector() | 1 | 3.5 | 10 | 3.2 | 8 |
參數(shù) | 描述 |
---|---|
selectors | 包含一個或多個要匹配的選擇器的字符串。此字符串必須是有效的CSS選擇器字符串 |
返回值: | 表示文檔中與指定的CSS選擇器集匹配的第一個元素的Element對象,如果不存在匹配項,則返回null。 |
---|---|
例外情況: | SyntaxError-指定的選擇器字符串的語法無效 |
DOM版本: | DOM級別1 |
獲取id="para"的第一個元素:
document.querySelector('#para');測試看看?/?
使用class="demo"獲取第一個元素:
document.querySelector(".demo");測試看看?/?
獲取文檔中父元素為<div>元素的第一個<p>元素:
document.querySelector("div > p");測試看看?/?
CSS教程:CSS選擇器
CSS參考:CSS#id選擇器
CSS參考:CSS .class選擇器
DOM Document querySelectorAll()方法
DOM Document getElementsByClassName()方法
DOM Document getElementsByTagName()方法