JS中document.querySelector什么意思

北原_春希2024-05-25 15:49

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

javascript 复制代码

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

其中 'selector' 是一个 CSS 选择器，例如：

'#myId' 选择具有 id 为 myId 的元素。
'.myClass' 选择具有类名 myClass 的所有元素中的第一个。
'div' 选择第一个 div 元素。
'div.myClass' 选择第一个类名为 myClass 的 div 元素。
'div#myId' 选择 id 为 myId 的 div 元素（虽然这通常是不必要的，因为 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') 选择了具有 id 为 myDiv 的元素，并将其 textContent 输出到控制台。