点击task-update元素获取兄弟元素修改类名：替代closest的可行方案

点击task-update元素时，需要获取它的兄弟元素并修改类名。当前用closest()的代码无效，因为closest()只会查找父级元素。不想用nextSibling或prevSibling方法，求其他实现方案。

相关代码 #

HTML模板

<template id="template-task">
    <li>
        <span id="task-title"></span>
        <input id="task-title-input" class="hide">
        <span id="task-text"></span>
        <input id="task-text-input" class="hide">
        <span id="task-update">Update</span>
        <span id="task-save" class="hide">Save</span>
        <span id="task-del">Delete</span>
    </li>
</template>

当前无效的JS代码

this.closest("#task-text").classList.add("hide");
this.closest("#task-text-input").classList.remove("hide");
this.closest("#task-title").classList.add("hide");
this.closest("#task-title-input").classList.remove("hide");
this.closest("#task-save").classList.remove("hide");

方法1：通过父容器定位目标元素 #

先通过closest()找到父级的<li>，再用querySelector()在这个父容器里精准查找兄弟元素。这种方法逻辑清晰，依赖固定的父级结构，代码可读性强。

// 先拿到父级li元素
const parentLi = this.closest('li');

// 依次操作各个目标元素
parentLi.querySelector('#task-title').classList.add('hide');
parentLi.querySelector('#task-title-input').classList.remove('hide');
parentLi.querySelector('#task-text').classList.add('hide');
parentLi.querySelector('#task-text-input').classList.remove('hide');
parentLi.querySelector('#task-save').classList.remove('hide');

方法2：批量操作优化 #

如果需要操作的元素可以分组，用querySelectorAll()批量处理，减少重复代码：

const parentLi = this.closest('li');

// 批量隐藏标题和文本元素
parentLi.querySelectorAll('#task-title, #task-text').forEach(el => el.classList.add('hide'));
// 批量显示输入框和保存按钮
parentLi.querySelectorAll('#task-title-input, #task-text-input, #task-save').forEach(el => el.classList.remove('hide'));

方法3：遍历父元素子节点筛选 #

通过父元素的children属性获取所有子元素节点，遍历筛选出需要操作的目标：

const siblingElements = Array.from(this.parentNode.children);

siblingElements.forEach(el => {
  switch(el.id) {
    case 'task-title':
    case 'task-text':
      el.classList.add('hide');
      break;
    case 'task-title-input':
    case 'task-text-input':
    case 'task-save':
      el.classList.remove('hide');
      break;
  }
});

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