JavaScript无法获取user-name元素innerHTML的问题求助

我尝试获取class为user-name的元素中的demo@....内容，使用了以下代码：

var x = document.getElementsByClassName("user-name")[0].innerHTML; 
console.log("x is: " + x);

但执行后返回结果为空：

x is:

解决办法 #

可以从这几个方向排查和处理：

1. 确保DOM加载完成后再执行代码
   如果代码执行时目标元素还没被渲染出来，就会拿到空内容。可以把代码放到DOM加载完成的回调里，或者把脚本放在页面底部：

document.addEventListener('DOMContentLoaded', function() {
  var userEl = document.getElementsByClassName("user-name")[0];
  if (userEl) {
    console.log("x is: " + userEl.textContent.trim());
  }
});

2. 处理异步加载的内容
   如果demo@....是通过AJAX、接口请求动态生成的，需要等待内容加载完成再获取，或者用MutationObserver监听元素变化：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    const userEl = document.querySelector(".user-name");
    if (userEl && userEl.textContent.trim()) {
      console.log("x is: " + userEl.textContent.trim());
      observer.disconnect(); // 获取到内容后停止监听
    }
  });
});

// 监听页面内容变化
observer.observe(document.body, { childList: true, subtree: true });

3. 改用textContent获取纯文本
   有时候元素的文本内容嵌套在子节点中，用textContent能更准确拿到纯文本内容：

var userEl = document.getElementsByClassName("user-name")[0];
if (userEl) {
  var x = userEl.textContent.trim();
  console.log("x is: " + x);
}

4. 先确认元素是否存在
   避免因为元素不存在导致报错，先做存在性检查：

var userEl = document.getElementsByClassName("user-name")[0];
if (!userEl) {
  console.log("找不到class为user-name的元素，请检查选择器是否正确");
} else {
  console.log("x is: " + userEl.textContent.trim());
}

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