jQuery点击事件获取同祖先元素指定ID文本返回空问题排查

首先先确认你的HTML结构大概是类似这样的对吧？

<div id="parent">
  <div id="lookAtMe">需要获取的文本内容</div>
  <button id="button">点击按钮</button>
</div>

控制台返回空字符串，大概率是这几个原因导致的，咱们一个个排查：

1. DOM加载时机不对，元素还没被解析 #

如果你的JS代码是直接写在<head>标签里的，那浏览器执行这段代码的时候，页面里的#button和#lookAtMe还没被渲染出来，这时候获取元素会得到null，后续的操作自然拿不到文本。

解决办法：
把JS代码放在页面底部（</body>标签之前），或者用DOMContentLoaded事件包裹，确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  // 这里写你的点击事件代码
});

2. 找父/祖父元素的方式错误 #

很多人会误用parentNode来获取父元素，但如果你的#button和#lookAtMe的直接父元素不是#parent（比如中间多了一层嵌套），那this.parentNode就不是你要找的容器，自然找不到#lookAtMe。

正确做法：用closest('#parent')来找到最近的#parent祖先元素，然后在这个容器里查找#lookAtMe：

document.getElementById('button').addEventListener('click', function() {
  // 找到最近的#parent容器
  const parentBox = this.closest('#parent');
  if (!parentBox) {
    console.error('找不到#parent容器哦');
    return;
  }
  // 在容器里找目标元素
  const targetTextEl = parentBox.querySelector('#lookAtMe');
  if (targetTextEl) {
    // 用textContent获取纯文本，trim去掉前后多余空格
    const text = targetTextEl.textContent.trim();
    console.log(text);
  } else {
    console.error('#parent里找不到#lookAtMe元素');
  }
});

3. 文本获取方式错误 #

如果你用了innerHTML，那如果#lookAtMe里有其他HTML标签，可能会拿到一堆标签代码；如果误用了value（这是表单元素的属性，div没有），那肯定返回空。应该用textContent（推荐，获取所有文本，包括隐藏的）或者innerText（获取可见文本）。

4. 目标元素文本是动态加载的 #

如果#lookAtMe的文本是通过AJAX或者其他JS动态添加的，那你点击的时候可能文本还没加载完成，这时候也会返回空。这种情况需要确保文本加载完成后再触发点击，或者监听文本变化的事件。

你可以对照上面的情况排查一下，应该能解决问题~

内容的提问来源于stack exchange，提问作者Gita Prasetya Adiguna