了解selector()函数中的元素层级关系

在JavaScript中，可以使用querySelector()和querySelectorAll()函数来选择DOM元素。这两个函数的参数为选择器字符串，可以根据不同的选择器来选择不同的元素。其中，querySelector()函数只返回匹配选择器的 个元素，而querySelectorAll()函数返回匹配选择器的所有元素。

选择器字符串可以包含层级关系，用于选择元素的特定层级关系。下面是一些常见的层级关系选择器：

1. 子选择器 >

子选择器(>)用于选择指定元素的直接子元素。例如，选择所有ul元素中的直接子元素li：

const lis = document.querySelectorAll('ul > li');

2. 后代选择器

后代选择器( )用于选择指定元素的后代元素，无论是直接后代还是间接后代。例如，选择所有ul元素中的后代元素li：

const lis = document.querySelectorAll('ul li');

3. 相邻兄弟选择器 +

相邻兄弟选择器(+)用于选择指定元素的下一个相邻兄弟元素。例如，选择紧挨在h1元素后面的 个p元素：

const p = document.querySelector('h1 + p');

4. 后续兄弟选择器 ~

后续兄弟选择器(~)用于选择指定元素之后的所有兄弟元素。例如，选择h1元素之后的所有p元素：

const ps = document.querySelectorAll('h1 ~ p');

5. 群组选择器 ,

群组选择器(,)用于选择多个选择器所匹配的所有元素。例如，选择所有h1元素和所有p元素：

const elements = document.querySelectorAll('h1, p');

这是selector()函数中一些常见的元素层级关系选择器示例。使用这些选择器可以轻松地定位到所需的DOM元素，并进行相应的操作。