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 输出到控制台。

相关推荐
我是华为OD~HR~栗栗呀24 分钟前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java1 小时前
vivo响应式官网
前端·css·html·1024程序员节
逐步前行3 小时前
C标准库--C99--布尔型<stdbool.h>
c语言·开发语言
QX_hao3 小时前
【Go】--闭包
开发语言·golang
web打印社区6 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗6 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长7 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
林月明7 小时前
【VBA】自动设置excel目标列的左邻列格式
开发语言·excel·vba·格式
喜欢吃燃面7 小时前
数据结构算法题:list
开发语言·c++·学习·算法·1024程序员节
。TAT。7 小时前
C++ - 多态
开发语言·c++·学习·1024程序员节