JS 最后获取孩子 - Javascript

在JavaScript中，如果你想要获取一个元素的最后一个子元素，有几种不同的方法可以做到。本文将介绍以下两种方法：

1. lastElementChild属性

这是一种获取元素最后一个子元素的简单方法。可以通过在DOM元素上调用lastElementChild属性来获取该元素的最后一个子元素。例如，我们有以下DOM结构：

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

我们可以使用以下代码来获取父元素parent的最后一个子元素：

const parent = document.getElementById('parent');
const lastChild = parent.lastElementChild;
console.log(lastChild); // 输出 <p>Child3</p>

需要注意的是，lastElementChild属性返回的是一个元素节点，而不是文本节点。

2. childNodes属性和nodeValue属性

另一种获取元素最后一个子元素的方法涉及使用childNodes属性和nodeValue属性。childNodes属性返回一个元素的子节点列表。每个子节点都是一个节点对象，可以使用nodeValue属性获取其节点值。

以下是一个例子：

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

我们可以使用以下代码来获取父元素parent的最后一个子元素：

const parent = document.getElementById('parent');
const childNodes = parent.childNodes;
const lastChild = childNodes[childNodes.length - 1];
console.log(lastChild); // 输出 <p>Child 3</p>

需要注意的是，childNodes属性返回的是一个节点列表，包括文本节点和元素节点。在这种情况下，最后一个子节点是一个元素节点。

这两个方法都可以用来获取一个元素的最后一个子元素。但是，在大多数情况下，lastElementChild属性更容易使用并且更加可读。