为何使用parentNode和nextSibling无法正确获取目标div？

你的问题出在依赖event.target和nextSibling/lastChild进行DOM定位，这俩方法特别容易因为HTML里的空格、换行产生的文本节点失效，而且event.target不一定是你绑定点击事件的.card-container（比如用户点到里面的img或span，target就变成这些子元素了）。

不用id的话，换更可靠的相对定位方式就行，步骤如下：

1. 先把点击事件的event参数传进函数，HTML里的onclick改成copyContent(event)
2. 用event.currentTarget获取绑定事件的.card-container元素（不管点到子元素，这个永远是绑定事件的那个容器）
3. 用querySelector和closest来精准定位目标元素，完全规避文本节点的干扰

修改后的完整代码：

JavaScript #

const copyContent = async(event) => {
  try {
    // 获取绑定点击事件的.card-container容器
    const container = event.currentTarget;
    // 在容器内找到"Copied!"提示元素
    const copied = container.querySelector('.copied');
    // 找到当前卡片的父元素.card，再获取里面的input值
    const card = container.closest('.card');
    const copyText = card.querySelector('.link').value;

    await navigator.clipboard.writeText(copyText);
    console.log('Content copied to clipboard');
    copied.style.animation = "appear 4s linear";
    // 可选：动画结束后重置样式，避免下次点击不生效
    setTimeout(() => {
      copied.style.animation = '';
    }, 4000);
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

HTML #

<div class="cards-container">
  <div class="card">
    <div class="card-container" onclick="copyContent(event)">
      <div>
        <img src="https://google.com">
        <span>#1</span>
      </div>
      <div class="copied">
        <span>Copied!</span>
      </div>
    </div>
    <input class="link" type="text" value="https://google.com">
  </div>


  <div class="card">
    <div class="card-container" onclick="copyContent(event)">
      <div>
        <img src="https://yahoo.com">
        <span>#2</span>
      </div>
      <div class="copied">
        <span>Copied!</span>
      </div>
    </div>
    <input class="link" type="text" value="https://yahoo.com">
  </div>
</div>

为什么原来的代码会报错？ #

• event.target可能是.card-container里的img/span，此时event.target.parentNode就不是你想的那个父元素，后续定位全错
• nextSibling和lastChild会把HTML里的换行、空格当成文本节点，导致你拿到的不是目标DOM元素，而是null，自然就报错Cannot read properties of null (reading 'style')

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