selector

document.querySelector(selector) 方法接受一个 CSS 选择器作为参数，用于查找文档中的第一个匹配元素。选择器可以是针对元素的类型、类、ID、属性或它们的组合。以下是一些填写 selector 参数的示例：

选择特定类型的所有元素中的第一个。例如，选择第一个 <div> 元素：

1var firstDiv = document.querySelector('div');

选择具有特定类名的第一个元素。类选择器以点（.）开头。例如，选择类名为 my-class 的第一个元素：

1var firstElementWithMyClass = document.querySelector('.my-class');

选择具有特定 ID 的元素。ID 选择器以井号（#）开头。例如，选择 ID 为 my-id 的元素：

1var elementWithMyId = document.querySelector('#my-id');

选择具有特定属性的第一个元素。例如，选择第一个 type 属性为 button 的 <input> 元素：

1var firstButton = document.querySelector('input[type="button"]');

可以组合使用不同的选择器来精确地定位元素。例如，选择类名为 my-class 且 ID 为 my-id 的第一个元素：

1var element = document.querySelector('#my-id.my-class');

选择处于特定状态的元素。例如，选择第一个聚焦的输入元素：

1var focusedInput = document.querySelector('input:focus');

选择作为另一元素直接子元素的元素。例如，选择 <div> 元素的第一个 <p> 子元素：

1var firstPInDiv = document.querySelector('div > p');

选择作为另一元素后代的元素。例如，选择 <div> 元素内的所有 <p> 元素中的第一个：

1var firstPInDiv = document.querySelector('div p');

选择元素的部分。例如，选择第一个段落的第一个字母：

1var firstLetter = document.querySelector('p::first-letter');

选择除某些元素外的所有元素。例如，选择除 hidden 类以外的所有元素：

1var allVisibleElements = document.querySelector(':not(.hidden)');