时间戳

首页 > 解决方案 > 未捕获的类型错误：在 Chrome 控制台中运行 JavaScript 时无法读取 null 的属性“子项”

javascript - 未捕获的类型错误：在 Chrome 控制台中运行 JavaScript 时无法读取 null 的属性“子项”

问题描述

在 chrome 控制台中执行我的 JS 代码时出现此错误

Uncaught TypeError: Cannot read property 'children' of null
    at getFollowers (<anonymous>:98:53)
    at <anonymous>:57:7

我的功能是

function getFollowers(){
  var followersDiv = document.querySelector('div[role="presentation"]').querySelector('li').parentElement.children;
  for (var i = 0;i<followersDiv.length;i++){
    var tempUser = followersDiv[i].lastElementChild.children[0].children[1];
    followers.push({
      userID: tempUser.children[0].textContent,
      userName: tempUser.children[1].textContent,
    });
  }
  document.querySelector('[aria-label="Close"]').click();
}

这条线似乎在这里遗漏了一些东西

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

有人可以帮我弄这个吗？

标签： javascriptgoogle-chromeconsole

解决方案

我不会说您所指的那条线缺少某些东西。我会说这条给定的行期望事情在这里没有提供足够的保证。

一种或另一种方式，构建 tempUser 是为了尝试使用可以为空的东西。在我看来，你的代码是相当乐观的：你假设 lastElementChild 是 nonEmpty，有一个非空数组的 children 字段等等......“followersDiv[i]”之后的每一步都可能导致失败，你没有检查价值观的内容。

有两种策略可以使您的代码更健壮，IMO：

  • 使用像 lodash 这样的外部库来获得更健壮的代码。特别是，您可以使用 _.get 和 _.isEmpty
  • 尝试在您的 querySelector 中使用更准确的 CSS 选择器，因为如果您的选择器足够好，我不确定您是否需要手动浏览 DOM。这样，您就不会有不符合您期望的节点。

推荐阅读