获取 JavaScript 中节点的子元素

在 JavaScript 中，一个父节点可能有一个或多个子元素。那么，如何在 JavaScript 中获取这些子元素呢？

在本节中，我们将讨论并介绍如何在 JavaScript 中获取节点的子元素。

为了访问 JavaScript 中父节点的子元素，我们可以使用以下方法：

• 获取节点的第一个子元素
• 获取节点的最后一个子元素
• 获取节点的所有子元素

让我们一一讨论每种方法。

示例

这是一个示例代码，将帮助我们理解如何获取特定节点的子元素。

现在，我们将使用此示例代码来理解上面描述的每种方法。

获取节点的第一个子元素

要获取节点的第一个子元素，需要使用元素的 firstChild 属性。

语法

在描述的语法中，变量 firstchild 将保存第一个子元素的值，而 parentElement 是我们尝试获取其第一个子元素值的父节点。

需要注意的点

• 如果 parentElement 没有子节点，则 firstChild 属性将返回 null。
• 如果该属性找到父节点的第一个子节点，则它将返回该子节点，该子节点可以是文本节点、元素节点或注释节点。

示例

让我们看下面的代码示例，了解如何使用 firstChild 属性。

在上面的代码中，我们将 <ul> 元素的 ID 存储在 frstchild 变量中，然后获取第一个子元素的值并将其存储在 frstchild 变量中。最后，我们得到了子元素的值的输出。

我们可以在下面的输出中看到

获取节点的最后一个子元素

要获取节点的最后一个子元素，我们需要使用 lastChild 属性。

语法

lastChild 变量将保存父节点中存在的最后一个子元素的值。

检查下面的示例代码部分

因此，在上面的代码中，我们可以看到，与获取父节点的第一个子元素类似，我们使用了 lastElementChild 方法来获取最后一个子节点。但是，如果父节点中不存在子节点，则该属性返回 null。否则，如果存在，它将返回最后一个子元素的值。

我们有以下输出

需要注意的点

• 您可能已经注意到，在示例代码中，我们没有使用节点的 lastChild 和 firstChild 属性来获取父节点的最后一个和第一个子元素。这是因为如果我们使用的 firstChild 属性和 lastChild 属性，那么为了保持 <ul> 和 <li> 元素之间的空格，它会创建并输出 '#text' 节点。
• 因此，如果存在任何空格（单个空格和多个空格）、回车符和制表符，浏览器就会创建 #text 节点来保持它们。

获取节点的全部子元素

要获取节点的全部子元素，请使用 childNodes 或 children 属性。这两个属性都可以用于获取父节点的所有指定子节点，但它们之间的区别在于，childNodes 属性将返回所有类型的子节点，即所有节点类型的子节点的实时 NodeList，而 children 属性将仅返回节点类型的子元素节点。

让我们看看这两个属性的语法

childNodes 属性

children 属性

查看下面的示例代码部分，了解如何获取所有子元素。

在代码部分，我们使用 children 属性获取父节点的所有子元素，如下面的截图所示。