document.querySelector
是 Web API 中的一个方法,用于从文档(DOM)中选择与指定选择器或选择器组匹配的第一个 Element
。如果没有找到任何匹配的元素,则返回 null
。
这个方法使用的是 CSS 选择器语法来选择元素。以下是一些例子:
'#myId'
:选择id
为myId
的元素。'.myClass'
:选择类名为myClass
的所有元素中的第一个。'div'
:选择第一个div
元素。'div.myClass'
:选择第一个类名为myClass
的div
元素。'a[href="http://example.com"]'
:选择href
属性值为http://example.com
的第一个a
元素。
示例
假设我们有以下 HTML 结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Query Selector Example</title>
</head>
<body>
<div id="myDiv" class="myClass">Hello, World!</div>
<p class="myClass">Another paragraph with the same class.</p>
<script>
// 选择 id 为 'myDiv' 的元素
let elementById = document.querySelector('#myDiv');
if (elementById) {
console.log(elementById.textContent); // 输出 "Hello, World!"
}
// 选择第一个类名为 'myClass' 的元素(在这种情况下,它是 div)
let elementByClass = document.querySelector('.myClass');
if (elementByClass) {
console.log(elementByClass.textContent); // 输出 "Hello, World!"
}
</script>
</body>
</html>
在这个例子中,document.querySelector('#myDiv')
将返回具有 id
为 myDiv
的 div
元素,而 document.querySelector('.myClass')
将返回具有类名为 myClass
的所有元素中的第一个(在这种情况下,也是 div
)。
注意,document.querySelector
只会返回匹配选择器的第一个元素。如果你想选择所有匹配的元素,应该使用 document.querySelectorAll
,它会返回一个 NodeList
对象,包含所有匹配的元素。