获取同一类的所有孩子 JavaScript

在 JavaScript 中，我们可以使用 querySelectorAll() 方法来获取同一类的所有孩子（即在同一父元素下的相同标签元素）。

比如，我们想获取一个 <ul> 元素下所有的 <li> 元素，可以这样写：

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

这样，list 就是一个 NodeList 类型的对象，它包含了所有 <ul> 元素下的 <li> 元素。

如果我们只想获取第一个 <ul> 元素下的所有 <li> 元素，可以这样写：

const list = document.querySelector('ul').querySelectorAll('li');

代码示例

// 获取所有 <li> 元素
const list = document.querySelectorAll('ul li');

// 遍历所有 <li> 元素，并输出它们的文本内容
list.forEach(li => {
  console.log(li.textContent);
});

// 获取第一个 <ul> 元素下的所有 <li> 元素
const list = document.querySelector('ul').querySelectorAll('li');

// 遍历所有 <li> 元素，并输出它们的文本内容
list.forEach(li => {
  console.log(li.textContent);
});

注意，由于 querySelector() 和 querySelectorAll() 方法返回的是元素的 NodeList，因此需要使用其提供的遍历方法，比如 forEach() 来遍历节点。