js document.queryselector

// 示例代码: 使用 document.querySelector 选择 HTML 元素

// 选择第一个匹配的 <p> 元素
const paragraph = document.querySelector('p');
console.log(paragraph); // 输出: <p>...</p>

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

// 选择 class 为 "myClass" 的第一个元素
const classElement = document.querySelector('.myClass');
console.log(classElement); // 输出: <span class="myClass">...</span>

// 选择嵌套在 <article> 中的第一个 <section> 元素
const sectionElement = document.querySelector('article section');
console.log(sectionElement); // 输出: <section>...</section>

解释说明：

• document.querySelector 是一个用于选择 DOM 元素的方法，它返回文档中与指定选择器或选择器组匹配的第一个元素。
• 如果没有找到匹配的元素，则返回 null。
• 支持 CSS 选择器语法，例如标签名、类名（以 . 开头）、ID（以 # 开头）以及组合选择器等。