JavaScript 怎样获取子元素

在 JavaScript 编程中，获取子元素是一项基础且常用的操作，它对于网页元素的动态交互和操作起着关键作用。下面我们就来探讨几种常见的获取子元素的方法。

首先是使用 childNodes 属性。该属性会返回一个包含指定元素所有子节点的 NodeList 集合，这些子节点包括元素节点、文本节点等。例如：

<div id="parent">
  <p>这是一个段落</p>
  <span>这是一个 span 元素</span>
</div>
<script>
  const parent = document.getElementById('parent');
  const childNodes = parent.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    console.log(childNodes[i].nodeName);
  }
</script>

这段代码获取了 parent 元素的所有子节点，并将它们的节点名称打印到控制台。不过需要注意的是，childNodes 包含了文本节点，这可能会在某些场景下带来不便。

children 属性则只返回指定元素的所有元素子节点，不包含文本节点等其他类型的节点。用法如下：

<div id="parent2">
  <p>段落</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>
<script>
  const parent2 = document.getElementById('parent2');
  const children = parent2.children;
  for (let j = 0; j < children.length; j++) {
    console.log(children[j].tagName);
  }
</script>

这里通过 children 属性获取了 parent2 元素的所有元素子节点，并打印它们的标签名。

还有 firstChild 和 lastChild 属性，分别用于获取第一个和最后一个子节点。示例如下：

<div id="parent3">
  <a href="#">链接 1</a>
  <a href="#">链接 2</a>
</div>
<script>
  const parent3 = document.getElementById('parent3');
  const first = parent3.firstChild;
  const last = parent3.lastChild;
  console.log(first.tagName);
  console.log(last.tagName);
</script>

如果只想获取第一个和最后一个元素子节点，可以使用 firstElementChild 和 lastElementChild 属性，它们与 firstChild 和 lastChild 类似，但只返回元素节点。

querySelector 和 querySelectorAll 方法也可用于获取子元素。querySelector 返回匹配指定 CSS 选择器的第一个子元素，querySelectorAll 返回所有匹配的子元素组成的 NodeList 集合。例如：

<div id="parent4">
  <div class="child">子元素 1</div>
  <div class="child">子元素 2</div>
</div>
<script>
  const parent4 = document.getElementById('parent4');
  const firstChild = parent4.querySelector('.child');
  const allChildren = parent4.querySelectorAll('.child');
  console.log(firstChild.textContent);
  allChildren.forEach(child => {
    console.log(child.textContent);
  });
</script>

掌握这些获取子元素的方法，能让开发者在 JavaScript 开发中更加高效地操作网页元素，实现各种丰富的交互效果。