无法在 JS 中读取 null 的属性（读取“parentNode”）

作者

无法在 JS 中读取 null 的属性（读取 ‘parentNode’）

TypeError: Cannot read property ‘parentNode’ of Null in JS

“无法读取 null 的属性（读取‘parentNode’）”错误的发生有两个原因：

  1. 访问parentNode空值（不存在的 DOM 元素）上的属性。
  2. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法读取 null 的属性父节点

下面是错误如何发生的示例。

索引.js
const content = document.getElementById('does-not-exist');
console.log(content); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
const parentNode = content.parentNode;

我们试图访问导致错误的值parentNode的属性。null

访问前确保DOM元素存在parentNode

id要解决该错误，请确保在获取 DOM 元素时使用正确的。

id当向方法传递无效时，通常会发生错误getElementById
。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <!-- 👇️ `id` should match your JS code -->
      <div id="content">Content</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

idHTML 代码中元素的名称应与您在调用 JavaScript 代码中的方法时指定的名称相id匹配document.getElementById()。

将JS脚本标签放在body标签的底部

将 JS 脚本标签放在正文的底部。

JS 脚本标签应该在声明 DOM 元素之后运行。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - script is run before div is created ⛔️ -->
    <script src="index.js"></script>

    <div>
      <div id="content">Content</div>
    </div>
  </body>
</html>
该index.js文件在创建两个元素之前运行div，因此您无法访问文件内部的元素。 index.js
索引.js
const content = document.getElementById('content');
console.log(content); // 👉️ null

// ⛔️ Cannot read properties of null (reading 'parentNode')
const parentNode = content.parentNode;

在声明所有 DOM 元素之后，您应该将index.jsscript 标签放在 body 标签的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <div id="content">Content</div>
    </div>

    <!-- ✅ GOOD - divs are already created ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在div可以在文件内部访问这些元素index.js。

索引.js
const content = document.getElementById('content');
console.log(content); // 👉️ div#content

// ✅ Works
const parentNode = content.parentNode;
console.log(parentNode); // 👉️ div

HTML 代码是从上到下解析的，因此 script 标签必须放在 body 标签的底部，在它需要访问的所有 DOM 元素之后。

使用属性时的注意事项parentNode：

  1. 尝试访问parentNodeaDocument或
    DocumentFragment节点上的属性会返回null– 它们永远不会有父级。
  2. null如果 HTML 元素已创建但尚未附加到 DOM，则该属性返回。

结论

id要解决“Cannot read properties of null (reading ‘parentNode’)”错误，请确保在获取 DOM 元素时使用正确的方法。

id当向方法传递无效时，通常会发生错误getElementById
。