Chrome控制台执行JS报错：Cannot read property 'children' of null求助

这个错误的核心原因很明确：你在尝试访问一个null值的children属性。在你的链式DOM调用中，只要其中某一步找不到对应的元素，就会返回null，后续再访问它的属性就会抛出这个错误。我们一步步来排查和修复：

1. 先排查初始的DOM选择器问题 #

你的第一行代码：

var followersDiv = document.querySelector('div[role="presentation"]').querySelector('li').parentElement.children;

这里的风险极高：如果document.querySelector('div[role="presentation"]')找不到元素返回null，或者里面的querySelector('li')返回null，后续的.parentElement就会报错。这很可能是你报错的根源之一。

2. 你怀疑的那行代码确实存在风险 #

var tempUser = followersDiv[i].lastElementChild.children[0].children[1];

这行同样是链式调用，任何一个环节的节点不存在（比如followersDiv[i].lastElementChild是null，或者它的children[0]不存在），都会导致读取children时抛出错误。

修复方案：分步获取+空值检查 #

我们把链式调用拆成单独的步骤，每一步都检查节点是否存在，避免一次性崩溃。修改后的代码如下：

function getFollowers(){
  // 分步获取根容器，每一步都做存在性检查
  const presentationDiv = document.querySelector('div[role="presentation"]');
  if (!presentationDiv) {
    console.error('无法找到role="presentation"的div元素');
    return;
  }
  
  const liElement = presentationDiv.querySelector('li');
  if (!liElement) {
    console.error('在目标div中找不到li元素');
    return;
  }
  
  const followersDiv = liElement.parentElement.children;
  if (!followersDiv || followersDiv.length === 0) {
    console.error('未获取到关注者列表容器');
    return;
  }

  // 遍历列表时，对每个节点做存在性检查
  for (var i = 0; i < followersDiv.length; i++) {
    const followerItem = followersDiv[i];
    const lastChild = followerItem.lastElementChild;
    if (!lastChild) continue; // 当前项结构异常，跳过
    
    const firstChildOfLast = lastChild.children[0];
    if (!firstChildOfLast) continue;
    
    const tempUser = firstChildOfLast.children[1];
    if (!tempUser) continue;

    // 最后检查要提取文本的节点是否存在
    const userIDEl = tempUser.children[0];
    const userNameEl = tempUser.children[1];
    if (!userIDEl || !userNameEl) continue;

    followers.push({
      userID: userIDEl.textContent.trim(), // 加trim()去除多余空格
      userName: userNameEl.textContent.trim(),
    });
  }

  // 关闭按钮也要做存在性检查
  const closeBtn = document.querySelector('[aria-label="Close"]');
  if (closeBtn) {
    closeBtn.click();
  } else {
    console.error('无法找到关闭按钮');
  }
}

额外注意：动态加载的页面需要等待元素出现 #

如果你的目标页面是通过AJAX动态加载内容的（比如滚动加载关注者），那么在执行getFollowers时，目标DOM可能还没渲染出来。这种情况下，你可以用轮询的方式等待元素出现：

// 等待指定元素出现后再执行回调
function waitForElement(selector, callback) {
  const element = document.querySelector(selector);
  if (element) {
    callback();
    return;
  }
  // 每500ms检查一次，直到元素出现
  setTimeout(() => waitForElement(selector, callback), 500);
}

// 使用方式：等待目标div出现后再执行getFollowers
waitForElement('div[role="presentation"]', getFollowers);

这样可以确保你在DOM完全渲染后再执行代码，避免因为元素未加载导致的null错误。

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