JavaScript点击输入框修改同组嵌套图书图标问题求助

我希望点击输入框时修改对应的图书图标，目前使用代码var x = that.parentNode.parentNode.children[0].firstChild;无法获取目标元素。页面存在两个输入组，要求点击任意输入框仅修改其所在组内的图书图标，恳请帮忙解决该问题。

相关代码如下：

function show(that) {
  var x = that.parentNode.parentNode.children[0].firstChild;
  console.log(x);
}

<div>
  <div class="toggle-check-group" style="background:#bdeabd">
    <span>
        <a>
            <img src="book.png" /> Book
        </a>
    </span>
    <br />
    <label><input onclick="show(this)" /></label><br /><br />
    <label><input onclick="show(this)" /></label><br /><br />
    <label><input onclick="show(this)" /></label><br /><br />
    <label><input onclick="show(this)" /></label><br /><br />
  </div>
  <br /><br />
  <div class="toggle-check-group" style="background:#f9b9b9">
    <span>
        <a>
            <img src="book.png" /> Book
        </a>
    </span>
    <br />
    <label><input onclick="show(this)" /></label><br /><br />
    <label><input onclick="show(this)" /></label><br /><br />
    <label><input onclick="show(this)" /></label><br /><br />
    <label><input onclick="show(this)" /></label><br /><br />
  </div>
</div>

问题原因 #

原代码失效的核心点：

1. 依赖固定DOM层级定位，结构稍有变动就会出错
2. firstChild会优先获取文本节点（span内部的换行、空格都属于文本节点），而非目标img元素

解决方案 #

方案1：用closest精准定位父组（推荐） #

利用closest()方法直接找到当前输入框所在的.toggle-check-group容器，再通过querySelector定位组内的图书图标，逻辑清晰且不受DOM层级小变动影响：

function show(that) {
  // 找到当前输入框所属的分组容器
  const group = that.closest('.toggle-check-group');
  // 在分组内找到目标img元素
  const bookImg = group.querySelector('span a img');
  
  console.log(bookImg);
  // 这里添加修改图标的逻辑，比如更换图片地址
  // bookImg.src = "new-book-icon.png";
}

方案2：兼容旧浏览器的层级查找 #

如果需要兼容不支持closest()的旧浏览器，可以通过逐层向上遍历父节点找到分组容器：

function show(that) {
  let currentNode = that.parentNode;
  // 向上遍历直到找到.toggle-check-group
  while (currentNode && !currentNode.classList.contains('toggle-check-group')) {
    currentNode = currentNode.parentNode;
  }
  
  if (currentNode) {
    const bookImg = currentNode.querySelector('span a img');
    console.log(bookImg);
    // 执行修改图标操作
  }
}

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