JavaScript获取所有直接子元素

Question

我需要获取一个元素的所有直接子元素。就像这里一样：

<div class='1'>
    <div class='2'>
        <div class='3'></div>
    </div>
    <div class='2'></div>
</div>

我需要使用具有class为"1"的DIV元素来获取class为"2"的两个DIV元素。使用纯JavaScript实现，不要用任何库。

(在这个例子中它们是相同的class只是为了更加清楚。但在我的应用中它们的class可能是不同而且未知的。)

- Krupp

Answer 1

一种选择是使用直接子元素组合器>和通用选择器*，以便选择任何类型的直接子元素：

document.querySelectorAll('.element > *');

此外，还有一个.children属性，它将返回所有直接子元素：

document.querySelector('.element').children;

- Josh Crozier

---

似乎无法让它正常工作...我也不希望任务对CPU造成负担。所以我的问题是 - 如果我使用menuitem或aside或其他标签代替类为“3”的div，会有问题吗？ - Krupp

那个操作并不需要大量的CPU资源，它只是检查每个元素的父元素是否有“.element”类而已。 - BoltClock

@BoltClock 虽然这绝对是微小的优化，但通配符选择器应该谨慎使用。使用 * 意味着您需要考虑结束其搜索之前的 每个 元素。在大多数情况下，您可能可以轻松应对，但在动画循环中运行并不是一个好主意。 - elliottregan

@elliottregan - 一般来说，你使用的 CSS 选择器不会导致明显的性能问题。所有现代浏览器都经过优化以有效地选择元素。如果你遇到性能问题，罪魁祸首几乎总是选择器之外的操作。此外，这里有一个快速示例，其中使用通用选择器选择了 1k 个元素，然后每秒进行操作... 你可以轻松运行 10k 个元素而没有任何问题... - Josh Crozier

@elliottregan：是的，昂贵的不是选择器本身，而是当它出现在选择器末尾时，它会随着页面元素数量的增加而扩展，并且通过使用它，您可能会做比必要更多的工作。 - BoltClock