JavaScript中的document.querySelector

介绍

document.querySelector()是JavaScript中一个查询DOM（文档对象模型）元素的方法。它可以返回与指定CSS选择器匹配的第一个元素。

语法

document.querySelector(selector)

• selector：用于查询元素的CSS选择器。

返回值

返回与指定CSS选择器匹配的第一个元素。如果没有找到匹配的元素，则返回null。

示例

HTML代码片段

<div class="container">
    <h1>Title</h1>
    <p class="content">Content here</p>
    <button id="btn">Click me</button>
</div>

JavaScript代码片段

// 查询id为btn的按钮并添加点击事件监听器
const btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  // 查询class为content的段落元素并修改文本内容
  const p = document.querySelector('.content');
  p.textContent = 'New content here';
});

注意事项

• 如果希望匹配多个元素，可以使用document.querySelectorAll()。
• 在查询元素时，应该尽量避免使用通配符*，以提高查询效率。