JS中document.querySelector什么意思

document.querySelector 是 JavaScript 中的一个 DOM (Document Object Model) 方法,用于从文档中选择与指定选择器组或选择器字符串匹配的第一个 Element。如果没有找到任何匹配的元素,则返回 null

javascript 复制代码
let element = document.querySelector('selector');

其中 'selector' 是一个 CSS 选择器,例如:

  • '#myId' 选择具有 idmyId 的元素。
  • '.myClass' 选择具有类名 myClass 的所有元素中的第一个。
  • 'div' 选择第一个 div 元素。
  • 'div.myClass' 选择第一个类名为 myClassdiv 元素。
  • 'div#myId' 选择 idmyIddiv 元素(虽然这通常是不必要的,因为 id 应该是唯一的)。

示例

html 复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>QuerySelector Example</title>  
</head>  
<body>  
  
<div id="myDiv" class="myClass">Hello, World!</div>  
<div class="myClass">Another div with the same class.</div>  
  
<script>  
    let element = document.querySelector('#myDiv');  
    if (element) {  
        console.log(element.textContent);  // 输出 "Hello, World!"  
    }  
</script>  
  
</body>  
</html>

在上面的示例中,document.querySelector('#myDiv') 选择了具有 idmyDiv 的元素,并将其 textContent 输出到控制台。

相关推荐
文火冰糖的硅基工坊16 分钟前
[嵌入式系统-135]:主流AIOT智能体开发板
开发语言·嵌入式·cpu
哆啦A梦158821 分钟前
搜索页面布局
前端·vue.js·node.js
_院长大人_1 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD1 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
yudiandian20141 小时前
02 Oracle JDK 下载及配置(解压缩版)
java·开发语言
要加油哦~1 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
鄃鳕2 小时前
python迭代器解包【python】
开发语言·python
new coder2 小时前
[c++语法学习]Day10:c++引用
开发语言·c++·学习
驰羽2 小时前
[GO]GORM 常用 Tag 速查手册
开发语言·后端·golang
Narcissiffo2 小时前
【C语言】str系列函数
c语言·开发语言