如何获取第二个tbody的ID？调用getElementById获取titleNotification返回null

兄弟，我看你遇到的问题是能拿到外层的bindNotification，但内层的titleNotification却返回null，大概率是这几个原因，给你几个实用的解决办法：

1. 最常见的问题：代码执行时机太早 #

你是不是在DOM还没完全加载完成的时候就调用了getElementById("titleNotification")？浏览器是从上到下解析HTML的，如果你的JS代码写在页面顶部，那这时候内层的那个tbody还没被渲染出来，自然拿不到。

解决办法就是把获取元素的代码放在DOM加载完成的事件监听里：

document.addEventListener('DOMContentLoaded', function() {
  // 等DOM完全渲染好再执行获取操作
  const titleTbody = document.getElementById('titleNotification');
  console.log(titleTbody); // 现在应该能正常拿到目标元素了
});

2. 检查ID是否唯一 #

虽然可能性不大，但还是要确认一下页面里有没有其他元素也用了titleNotification这个ID。getElementById只会返回页面中第一个匹配该ID的元素，如果有重复ID的情况，也可能导致异常（不过你返回的是null，所以更可能是时机问题，但检查一下总没坏处）。

3. 如果是动态生成的元素 #

如果这个titleNotification是通过JS动态插入到页面里的（比如AJAX请求后添加的），那你得等动态插入完成之后再去获取它。比如在插入元素的回调函数里执行获取操作：

// 假设你是通过动态创建元素插入的场景
function insertTitleTbody() {
  const newTbody = document.createElement('tbody');
  newTbody.id = 'titleNotification';
  newTbody.style.cssText = 'position:fixed; margin-top:-4px; margin-left:-3px;';
  // 插入到对应的td容器中
  document.querySelector('#bindNotification td').appendChild(newTbody);
  
  // 插入完成后立即获取
  const titleTbody = document.getElementById('titleNotification');
  console.log(titleTbody);
}

4. 换个方式通过父元素查找 #

如果上面的方法都不行，你可以先拿到外层的bindNotification，再通过它来查找内层的tbody：

const outerTbody = document.getElementById('bindNotification');
const titleTbody = outerTbody.querySelector('#titleNotification');
console.log(titleTbody);

这种方式也能绕过一些时机问题，但前提是外层元素已经存在，且内层元素已经被渲染到页面中。

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