编辑按钮功能报错：e.target.previousSibling.previousSibling.setAttribute不是函数

问题根源 #

previousSibling会捕获DOM中的所有节点类型，包括换行、空格这类文本节点，而文本节点并没有setAttribute方法。你连续调用两次previousSibling时，大概率拿到的不是目标元素节点，因此触发报错。

修复方案 #

1. 使用previousElementSibling（推荐） #

previousElementSibling只会定位前一个元素节点，自动跳过文本节点，精准拿到目标元素：

const editBtn = document.createElement("button");
editBtn.classList.add("edit");
editBtn.textContent = "Edit";
newLi.appendChild(editBtn);

// 移除无意义的空事件监听
// editBtn.addEventListener("click", () => {});

// 优化事件委托：不要绑定到所有元素，建议绑定到父容器（这里假设父容器是ul/ol）
document.querySelector("ul").addEventListener("click", (e) => {
  if (!e.target.classList.contains("edit")) return;
  
  const targetElement = e.target.previousElementSibling?.previousElementSibling;
  if (targetElement) {
    targetElement.setAttribute("contenteditable", "true");
    targetElement.focus();
  }
});

2. 手动遍历筛选元素节点（兼容旧浏览器） #

如果需要适配非常老旧的浏览器，可以手动遍历前序节点，直到找到元素类型的节点：

// 工具函数：获取前一个元素节点
function getPrevElement(el) {
  let prevNode = el.previousSibling;
  while (prevNode && prevNode.nodeType !== 1) {
    prevNode = prevNode.previousSibling;
  }
  return prevNode;
}

const editBtn = document.createElement("button");
editBtn.classList.add("edit");
editBtn.textContent = "Edit";
newLi.appendChild(editBtn);

document.querySelector("ul").addEventListener("click", (e) => {
  if (!e.target.classList.contains("edit")) return;
  
  let targetElement = getPrevElement(e.target);
  targetElement = getPrevElement(targetElement);
  if (targetElement) {
    targetElement.setAttribute("contenteditable", "true");
    targetElement.focus();
  }
});

额外优化点 #

• 删掉冗余的editBtn.addEventListener("click", () => {});，这个空监听完全没用。
• 避免给document.querySelector("*")绑定事件，这会让页面所有元素都触发事件，严重影响性能。建议直接绑定到编辑按钮的父容器（比如列表容器），或者直接给每个编辑按钮绑定点击事件：

// 直接给编辑按钮绑定事件，更高效直观
editBtn.addEventListener("click", () => {
  const targetElement = editBtn.previousElementSibling?.previousElementSibling;
  if (targetElement) {
    targetElement.setAttribute("contenteditable", "true");
    targetElement.focus();
  }
});

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