JavaScript获取DOM元素报错：children[1]不存在时如何处理？

我用这段JavaScript代码获取卡片内某段落的内容并插入到其他位置：

const xx = e.target.parentElement.children[1].children[1].innerHTML;   
imgText.innerHTML = xx;

但部分卡片没有最后一层children[1]，控制台抛出错误：

Uncaught TypeError: e.target.parentElement.children[1].children[1] is undefined

我试过用if (x != null){} else{}判断，但还是报错，该怎么解决？

解决建议 #

1. 逐层校验或使用可选链避免链式调用报错 #

你之前的判断没用到关键位置——直接链式调用时，只要中间某一层元素不存在（比如e.target.parentElement.children[1]本身就是undefined），继续访问.children[1]就会直接抛出错误，根本走不到你的判断逻辑。

推荐用ES6+的可选链操作符?.，它会在某一层为null/undefined时直接终止访问，返回undefined，不会报错：

const targetElement = e.target.parentElement?.children[1]?.children[1];
if (targetElement) {
  imgText.innerHTML = targetElement.innerHTML;
}

如果你的运行环境不支持可选链，就用嵌套的if逐层判断：

const parent = e.target.parentElement;
if (parent && parent.children[1]) {
  const childNode = parent.children[1];
  if (childNode.children[1]) {
    imgText.innerHTML = childNode.children[1].innerHTML;
  }
}

2. 改用选择器定位（更稳定） #

依赖children索引的写法非常脆弱，只要DOM结构稍微调整（比如中间加了个元素），代码就会失效。建议给目标段落加个专属类名（比如card-desc），然后用querySelector直接定位：

// 先找到当前卡片的根元素，再找内部的目标段落
const targetElement = e.target.closest('.card-container').querySelector('.card-desc');
if (targetElement) {
  imgText.innerHTML = targetElement.innerHTML;
}

closest('.card-container')会向上查找最近的带card-container类的父元素，再通过类名直接定位目标内容，不管中间层级怎么变，只要类名正确就能正常工作，稳定性提升很多。

3. 用try-catch捕获错误兜底 #

如果上面的方案都不适用，也可以用try-catch包裹代码，捕获错误后做兜底处理：

try {
  const xx = e.target.parentElement.children[1].children[1].innerHTML;   
  imgText.innerHTML = xx;
} catch (err) {
  // 可以设置默认内容，或者什么都不做
  imgText.innerHTML = '暂无内容';
}

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