JS中document.querySelector什么意思

简介: JS中document.querySelector什么意思

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

let element = document.querySelector('selector');

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

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

示例

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

相关文章
|
11月前
|
JavaScript
js element.scrollIntoView()
js element.scrollIntoView()
|
JavaScript 前端开发
JS DOM innerHTML和innerText
JS DOM innerHTML和innerText 在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本” 例如,我们用innerHTML来向HTML文档中添加一张图片:
71 1
JS DOM innerHTML和innerText
|
JavaScript
js 获取 iframe 里面的 document 以及 window
js 获取 iframe 里面的 document 以及 window
588 0
|
Web App开发 JavaScript 前端开发
JavaScript中 querySelector 与 getElementById 方法的区别
JavaScript中 querySelector 与 getElementById 方法的区别
232 0
JavaScript中 querySelector 与 getElementById 方法的区别
|
JavaScript
ajaxFileUpload 报错jQuery.handleError is not a function
ajaxFileUpload 报错jQuery.handleError is not a function
103 0
|
JavaScript
Jquery中的$(document).ready()详解
1.$(document).ready()的作用 $(document).ready(function(){.... })这个函数的作用和window.onload差不多,不同的是 (1)onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载 (2)$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行,所以,使用document.ready()方法的执行速度比onload()的方法要快。
|
JavaScript
JS - scrollWidth、clientWidth、offsetWidth 区别
JS - scrollWidth、clientWidth、offsetWidth 区别
120 0
JS - scrollWidth、clientWidth、offsetWidth 区别
|
JavaScript
Dom onload和jQuery document ready的区别
Dom onload和jQuery document ready的区别
Dom onload和jQuery document ready的区别
|
Web App开发 JavaScript iOS开发