如何获取第一个子元素

在前端开发中，我们有时需要获取某个元素的第一个子元素。下面将介绍几种方法来实现此操作。

方法一：使用 firstChild 属性

DOM 元素节点有一个 firstChild 属性，它返回该元素的第一个子节点。但是需要注意的是，这个属性也可能返回一个文本节点或注释节点，因此还需要做相应的判断和转换。

const parent = document.getElementById('parent');
let firstChild = parent.firstChild;
while (firstChild && firstChild.nodeType !== 1) {
  firstChild = firstChild.nextSibling;
}

上面的代码首先获取父元素节点 parent，然后使用 firstChild 属性获取其第一个子节点，并通过 while 循环排除非元素节点。

方法二：使用 firstElementChild 属性

如果你只关心元素节点而不想做额外的判断和转换，那么可以使用 firstElementChild 属性来获取第一个元素子节点。

const parent = document.getElementById('parent');
const firstChild = parent.firstElementChild;

上述代码中的 firstElementChild 属性直接返回第一个元素子节点，无需进行进一步的类型检查。

方法三：使用 querySelector 方法

另一种获取第一个子元素的方式是使用 querySelector 方法。

const parent = document.getElementById('parent');
const firstChild = parent.querySelector(':first-child');

上面的代码中，:first-child 是 CSS 伪类选择器中的一种，表示选择该元素的第一个子元素。

比较

以上三种方法都可以获取父元素的第一个子元素，但它们之间还是有一些区别的。下面是一些比较：

• firstChild 属性能够返回任何类型的节点，因此需要进行判断和转换；而 firstElementChild 属性只返回元素节点。
• querySelector 方法可以用于选择复杂的节点结构，而不仅限于获取第一个子元素。
• 在性能方面，firstChild 和 firstElementChild 的差异非常小，通常可以忽略不计。而 querySelector 方法需要遍历整个文档树来查找对应的节点，因此在大型文档中可能会比后两者慢一些。

结论

如果你只关心元素节点并希望获得最好的性能，则建议使用 firstElementChild 属性；如果你想选择更复杂的节点结构，则可以使用 querySelector 方法。在某些特殊情况下，例如需要兼容旧的浏览器版本时，也可以使用 firstChild 属性进行操作。

希望这篇文章能够帮助你更好地理解如何获取父元素的第一个子元素，并在实际开发中加以应用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26501