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

相关推荐
妄小闲4 分钟前
网页设计模板 HTML源码网站模板下载
前端·html
MChine慕青19 分钟前
顺序表与单链表:核心原理与实战应用
linux·c语言·开发语言·数据结构·c++·算法·链表
icebreaker20 分钟前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
qq_1955516922 分钟前
代码随想录70期day7
java·开发语言
卢叁25 分钟前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊37 分钟前
state和ref
前端·javascript·react.js
GEO_YScsn39 分钟前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing39 分钟前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_43 分钟前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠44 分钟前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript