如何为特定类父元素下的获焦子元素添加类？

我来帮你排查下现有代码的问题，再给出精准的修复方案～

首先，你当前代码的核心问题有两个：

• 当Tab键触发时，event.target就是被聚焦的那个.child元素（也就是你的label标签），但你用了target.querySelector(".child")——这是在当前元素内部查找带.child类的元素，而当前元素本身就是目标，所以这个查找会返回null，自然没法添加类。
• 你的判断逻辑只检查了目标元素有没有.parent祖先，但没确认目标元素本身就是.child，这样如果聚焦到.parent里的其他元素（比如那个a.link），代码也会执行，不符合你的需求。

正确的实现方式 #

我们需要调整判断逻辑，直接检查当前聚焦的元素是否是.parent下的.child，然后直接给它添加类：

方案1：沿用你的Tab键触发思路

document.addEventListener('keydown', function(event) {
  // 确认是Tab键触发
  if (event.keyCode === 9) {
    const target = event.target;
    // 同时满足两个条件：当前元素是.child，且有.parent类的祖先
    if (target.classList.contains('child') && target.closest('.parent')) {
      target.classList.add('new-class');
    }
  }
});

方案2：用focus事件更精准（推荐）

如果你的需求是**只要元素获得焦点（不管是Tab还是点击）**就添加类，用focus事件会更合适，因为聚焦行为不止Tab一种：

document.addEventListener('focus', function(event) {
  const target = event.target;
  if (target.classList.contains('child') && target.closest('.parent')) {
    target.classList.add('new-class');
  }
}, true); // 第三个参数true表示捕获阶段监听，确保能覆盖所有元素的focus事件

你的HTML结构无需修改 #

<div class="parent"> 
  <input type="checkbox" /> <!-- hidden input -->
  <label class="child"> <!-- 这个元素被Tab聚焦时会添加类 -->
    <span>Icon</span> 
  </label> 
  <a href="#" class="link">link</a> 
</div>

额外优化：失去焦点时移除类 #

如果需要在元素失去焦点时自动移除new-class，可以搭配blur事件：

document.addEventListener('blur', function(event) {
  const target = event.target;
  if (target.classList.contains('child') && target.closest('.parent')) {
    target.classList.remove('new-class');
  }
}, true);

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