在前端开发中，我们常常需要通过 JavaScript 操作 DOM 元素，包括查找子元素。在这篇文章中，我们将介绍一些基本的方法来查找父元素下的子元素，并提供帮助你更好地理解和应用这些方法的示例代码。
1. 使用 querySelectorAll 方法
我们可以使用 querySelectorAll 方法来选择具有特定 CSS 选择器的所有元素。例如，如果我们想查找父元素下所有的 li 元素，可以这样做：
const parent = document.querySelector('.parent');
const children = parent.querySelectorAll('li');其中，.parent 是指父元素的类名，li 是要查找的子元素类型。
2. 遍历子元素
另一种方法是遍历父元素下的子元素并进行匹配。我们可以使用以下代码：
const parent = document.querySelector('.parent');
const children = parent.children;
for (let i = 0; i < children.length; i++) {
if (children[i].tagName === 'LI') {
// 找到了 li 元素
}
}上面代码中，我们首先获取父元素的 children 属性，该属性返回一个包含子元素的集合。然后，我们使用 for 循环遍历每个子元素，并检查其是否为所需的类型。
3. 递归查找
在某些情况下，我们需要查找子元素的子元素，或者更深层次的嵌套。这时候我们可以使用递归来实现。
-- -------------------- ---- -------
-------- -------------------- -------- -
----- ------ - ---
-------- ----------------- -
-- ---------------- --- ---------------------- -
---------------------
-
-- ------------------------- -
------------------------------------------ -- -
----------------
---
-
-
-----------------
------ -------
-
----- ------ - ----------------------------------
----- -------- - -------------------- ------上面的代码中，我们定义了一个 findElements 函数，该函数接收父元素和要查找的元素类型作为参数，并返回包含所有匹配元素的数组。内部实现使用递归遍历每个子元素，如果发现匹配的元素就加入到结果数组中。
结论
在这篇文章中，我们介绍了一些常用的方法来查找父元素下的子元素，包括使用 querySelectorAll 方法、遍历子元素以及递归查找。这些方法都有自己的优缺点，应该根据具体需求选择合适的方法。希望本文能够对你理解和使用 JavaScript 操作 DOM 元素有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13119