js queryselector

// 示例代码：使用 querySelector 方法选择单个元素

// HTML 结构
/*
<div id="container">
  <p class="message">Hello, world!</p>
  <button class="btn">Click me</button>
</div>
*/

// JavaScript 代码
const container = document.querySelector('#container'); // 选择 id 为 container 的元素
console.log(container); // 输出: <div id="container">...</div>

const message = document.querySelector('.message'); // 选择 class 为 message 的第一个元素
console.log(message); // 输出: <p class="message">Hello, world!</p>

const button = document.querySelector('button'); // 选择页面中第一个 button 元素
console.log(button); // 输出: <button class="btn">Click me</button>

querySelector 是一个非常有用的方法，它允许我们通过 CSS 选择器来选择 DOM 元素。它只会返回匹配的第一个元素，如果需要选择所有匹配的元素，则应该使用 querySelectorAll。