如何使用querySelector方法获取父元素的最后一个子元素

针对子元素动态增减、需要实时匹配最后一个子元素的需求，分两种使用场景给出实现方式：

1. CSS 样式场景：自动匹配最后一个子元素 #

如果是要给最后一个子元素设置样式，直接用 CSS 原生的:last-child伪类即可，该选择器会实时匹配 DOM 结构，子元素增删时会自动更新选中目标，不需要额外写 JS 逻辑。

/* 选中.list-container下的最后一个子元素，动态变化时自动生效 */
.list-container > p:last-child {
  /* 自定义样式，比如修改底部间距、高亮等 */
  margin-bottom: 0;
  color: #f00;
}

提示：如果父容器下混有其他类型的标签，要选中同类型标签的最后一个，可以用:last-of-type替代:last-child，匹配精度更高。

2. JS 逻辑场景：实时获取/监听最后一个子元素 #

如果是要在交互逻辑中拿到最后一个子元素做操作，有两种实现思路：

（1）按需实时获取（性能最优，优先推荐） #

DOM 原生提供的属性本身就是实时同步最新结构的，你只需要在每次要操作子元素的时候现取现用即可，拿到的永远是当前最新的最后一个元素，不需要额外做监听。

// 先获取父容器
const listContainer = document.querySelector('.list-container')

// 写法1：直接用lastElementChild属性，会自动跳过空白文本、注释节点，返回最后一个元素节点（最推荐）
const lastItem = listContainer.lastElementChild

// 写法2：从子元素集合中取最后一位，children是实时更新的动态集合，永远匹配最新DOM
const lastItem2 = listContainer.children[listContainer.children.length - 1]

注意：不要用lastChild属性，这个属性会把父容器内的换行空白文本、注释节点都算成子节点，大概率拿不到你想要的实际元素节点。

（2）自动监听子元素变化触发逻辑 #

如果你没法在所有增删子元素的逻辑里插入回调（比如子元素是第三方插件动态修改的），可以用MutationObserver监听父容器的子节点变化，每次变化时自动获取最新的最后一个子元素执行逻辑：

const listContainer = document.querySelector('.list-container')

// 子元素变化时的处理逻辑
function onListChange() {
  const currentLastItem = listContainer.lastElementChild
  // 这里写你需要对最后一个子元素执行的操作，比如绑定事件、打标识等
  console.log('当前最后一个子元素：', currentLastItem)
}

// 初始化监听器
const observer = new MutationObserver(onListChange)
// 启动监听：只监听直接子元素的增删，不监听属性变化、后代节点变化，性能最优
observer.observe(listContainer, {
  childList: true,
  subtree: false
})

// 后续不需要监听时，调用 observer.disconnect() 即可销毁监听器

补充说明：如果增删子元素的逻辑是你自己写的，优先用按需获取的方案，在每次增删操作完成后主动获取最后一个子元素即可，比MutationObserver的性能开销更低。

内容的提问来源于stack exchange，提问作者gamer beast