document.querySelector什么意思

最新推荐文章于 2025-03-31 16:44:58 发布

lvbb66

最新推荐文章于 2025-03-31 16:44:58 发布

阅读量790

点赞数 12

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/2302_80798583/article/details/144297157

版权

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 对象，包含所有匹配的元素。