JS 获取第一个子元素|极客笔记

JS 获取第一个子元素

在编写JavaScript代码时，经常会涉及到操作DOM元素的情况，其中获取元素的子元素是一个常见的需求之一。本文将详细介绍如何使用JavaScript获取一个元素的第一个子元素。

1. 方法一：使用 `firstElementChild`

firstElementChild 属性返回指定元素的第一个子元素。如果该子元素不是一个元素节点，则此属性返回 null。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get First Child Element</title>
</head>
<body>

<div id="parent">
  <p>First Child</p>
  <p>Second Child</p>
  <p>Third Child</p>
</div>

<script>
  // 获取父元素
  var parent = document.getElementById('parent');

  // 获取第一个子元素
  var firstChild = parent.firstElementChild;

  console.log(firstChild);
</script>

</body>
</html>

在上面的示例中，我们首先获取了id为 parent 的父元素，然后使用 firstElementChild 获取了该父元素的第一个子元素。最后使用 console.log 输出了该子元素。

运行结果如下：

<p>First Child</p>

2. 方法二：使用 `children`

children 属性返回一个包含指定元素的所有子元素的 HTMLCollection 对象。你可以通过 children[0] 获取第一个子元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get First Child Element</title>
</head>
<body>

<div id="parent">
  <p>First Child</p>
  <p>Second Child</p>
  <p>Third Child</p>
</div>

<script>
  // 获取父元素
  var parent = document.getElementById('parent');

  // 获取第一个子元素
  var firstChild = parent.children[0];

  console.log(firstChild);
</script>

</body>
</html>

在上面的示例中，我们同样首先获取了id为 parent 的父元素，然后使用 children[0] 获取了该父元素的第一个子元素。最后使用 console.log 输出了该子元素。

运行结果如下：

<p>First Child</p>

3. 方法三：使用 `querySelector`

querySelector 方法可以接受任何 CSS 选择器作为参数，并返回文档中匹配该选择器的第一个元素。我们可以使用 parent.querySelector(':first-child') 来获取第一个子元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get First Child Element</title>
</head>
<body>

<div id="parent">
  <p>First Child</p>
  <p>Second Child</p>
  <p>Third Child</p>
</div>

<script>
  // 获取父元素
  var parent = document.getElementById('parent');

  // 获取第一个子元素
  var firstChild = parent.querySelector(':first-child');

  console.log(firstChild);
</script>

</body>
</html>

在上面的示例中，我们同样首先获取了id为 parent 的父元素，然后使用 querySelector(':first-child') 获取了该父元素的第一个子元素。最后使用 console.log 输出了该子元素。

运行结果如下：