Javascript按类获取子元素

在编写Web应用程序时，我们需要经常根据元素类（class）来获取其下的子元素。Javascript提供了多种方法来实现这一目标。下面是一些常用的方法：

使用document.querySelectorAll()

使用document.querySelectorAll()方法可以选择符合指定CSS选择器的所有元素，并返回一个NodeList对象。我们可以使用该方法来选择指定类名下的所有子元素。

例如，我们需要选择所有类名为my-class的<div>元素下的子元素，可以使用以下代码：

const myDivs = document.querySelectorAll('.my-class div');

这段代码将返回一个NodeList对象，其中包含所有类名为my-class的<div>元素下的子元素。

使用Element.children和Element.classList

使用Element.children属性可以获得当前元素下的所有子元素，并返回一个HTMLCollection对象。我们可以遍历该对象，并使用Element.classList属性判断每个元素是否具有特定的类名。

例如，我们需要选择所有类名为my-class的<div>元素下的子元素，可以使用以下代码：

const divs = document.querySelectorAll('.my-class');
const myDivs = [];

for (let i = 0; i < divs.length; i++) {
  const div = divs[i];
  const children = div.children;
  for (let j = 0; j < children.length; j++) {
    const child = children[j];
    if (child.classList.contains('my-class')) {
      myDivs.push(child);
    }
  }
}

这段代码将通过遍历所有类名为my-class的<div>元素，并进一步遍历它们的子元素，来选择所有具有my-class类名的子元素。最终，所有符合要求的子元素将存储在myDivs数组中。

使用jQuery选择器

如果您使用jQuery库，您可以使用jQuery选择器来选择指定类名下的所有子元素。以下是一个使用jQuery选择器获得类名为my-class的<div>元素下的所有子元素的示例代码：

const myDivs = $('.my-class').find('div');

这段代码将返回一个jQuery对象，其中包含所有类名为my-class的<div>元素下的子元素。

以上是一些常用的方法，您可以根据自己的需求和喜好来选择适合您的方法。