JS 查找子元素

JS 查找子元素

在前端开发中，经常会涉及到操作 DOM 元素的场景，其中包括查找子元素。在 JavaScript 中，我们可以通过一些方法来查找指定元素的子元素，从而实现动态操作子元素的目的。本文将详细介绍在 JavaScript 中如何查找子元素，并给出相关示例代码。

1. 通过 querySelector 方法查找子元素

querySelector 方法是 JavaScript 中常用的 DOM 操作方法之一，可以返回匹配指定选择器的第一个元素。我们可以利用 querySelector 方法来查找父元素下匹配子元素的第一个元素。

示例代码如下：

// 查找 ID 为 "parent" 的父元素下类名为 "child" 的第一个子元素
const parent = document.getElementById('parent');
const child = parent.querySelector('.child');
console.log(child);

以上代码将会获取 ID 为 “parent” 的父元素中类名为 “child” 的第一个子元素，并将其输出到控制台。

2. 通过 querySelectorAll 方法查找子元素

与 querySelector 方法不同，querySelectorAll 方法可以返回匹配指定选择器的所有元素。我们可以使用 querySelectorAll 方法来查找所有的子元素，然后遍历操作这些子元素。

示例代码如下：

// 查找所有类名为 "child" 的子元素
const children = document.querySelectorAll('.child');
children.forEach(child => {
  console.log(child);
});

以上代码将会获取所有类名为 “child” 的子元素，并逐个输出到控制台。

3. 通过 childNodes 属性查找子元素

除了使用 querySelector 和 querySelectorAll 方法外，我们还可以通过 childNodes 属性来访问一个元素的子元素节点列表。childNodes 属性返回一个包含所有子元素的 NodeList 对象，包括文本节点和 HTML 元素节点。

示例代码如下：

// 查找 ID 为 "parent" 的父元素的所有子元素
const parent = document.getElementById('parent');
parent.childNodes.forEach(child => {
  console.log(child);
});

以上代码将会输出 ID 为 “parent” 的父元素的所有子元素节点，包括文本节点和 HTML 元素节点。

4. 通过 children 属性查找子元素

与 childNodes 属性类似，children 属性也可以返回一个包含所有子元素节点的 HTMLCollection 对象。不同之处在于 children 属性只返回 HTML 元素节点，而不包括文本节点。

示例代码如下：

// 查找 ID 为 "parent" 的父元素的所有子元素
const parent = document.getElementById('parent');
const children = parent.children;
Array.from(children).forEach(child => {
  console.log(child);
});

以上代码将会输出 ID 为 “parent” 的父元素的所有子元素节点，不包括文本节点。

通过以上方法，我们可以轻松地查找指定元素的子元素，在实际开发中灵活运用，实现动态操作子元素的效果。