如何在JavaScript中选择唯一父元素下指定类名的子元素？

核心解决方案：限定查找范围，避免全局匹配 #

你不需要给子元素设置唯一类名，有两种高效的方式实现需求：

1. 先定位父元素，再在父元素内部查询子元素

先通过getElementById获取唯一的目标父元素，再调用父元素的querySelector/querySelectorAll方法，这样只会在该父元素的后代节点中查找匹配的子元素，完全不会影响其他父元素下的元素：

// 获取目标父元素
const targetParent = document.getElementById('task-item2');
// 在父元素内部查找指定类名的子元素
const taskTitle = targetParent.querySelector('.task-title');

// 获取子元素内容
const titleContent = taskTitle.textContent;

// 追加到指定的同类别子元素（示例：task-item1下的task-title）
const appendTarget = document.getElementById('task-item1').querySelector('.task-title');
appendTarget.textContent += titleContent;

2. 使用复合CSS选择器直接定位

直接通过「父元素ID + 子元素类名」的复合选择器，让document.querySelector精准定位到指定父元素下的目标子元素：

// 直接定位task-item2下的task-title
const taskTitle = document.querySelector('#task-item2 .task-title');
const titleContent = taskTitle.textContent;

// 追加到指定的同类别子元素
const appendTarget = document.querySelector('#task-item1 .task-title');
appendTarget.textContent += titleContent;

批量处理多个父元素的场景

如果需要对所有task-item类的父元素进行统一操作（比如把每个父元素下task-title的内容追加到同个父元素的task-description中），可以用querySelectorAll遍历处理：

// 获取所有task-item父元素
const allTaskItems = document.querySelectorAll('[id^="task-item"]');

allTaskItems.forEach(item => {
  const title = item.querySelector('.task-title');
  const description = item.querySelector('.task-description');
  // 追加内容到目标子元素
  description.textContent += title.textContent;
});

原理说明 #

• 当在具体元素上调用querySelector/querySelectorAll时，查找范围被限定在该元素的DOM子树内，不会全局匹配；
• 复合选择器#task-item2 .task-title的含义是：选择所有拥有task-title类、且祖先元素ID为task-item2的元素，天然限定了查找范围。

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