无法在 JavaScript 中设置 Null 的属性

作者

无法在 JavaScript 中设置 Null 的属性

Cannot set properties of Null in JavaScript

出现“无法设置 null 的属性”错误的原因有 3 个：

  1. 在存储null值的变量上设置属性。
  2. 在 DOM 中不存在的元素上设置属性。
  3. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法设置 null 的属性

如果您在存储值的变量上设置属性，则会发生此错误null。

索引.js
const obj = null;
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'src')
obj.src = 'value';

const arr = null;
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting '0')
arr[0] = 'value';

要解决“无法设置 null 的属性”错误，请在初始化变量时提供回退值。

索引.js
const fromDb = null;

const obj = fromDb || {};
obj['src'] = 'value'; // 👉️ {src: 'value'}

const arr = fromDb || [];
arr[0] = 'value'; // 👉️ ['value']

如果左边的值是假的（例如 ），逻辑 OR (||) 运算符返回右边的值null。

要解决“无法设置 null 属性”错误，请确保您正在访问的 DOM 元素存在。getElementById()在使用该方法并向其传递一个不存在的 ID后尝试设置属性时，通常会抛出该错误。

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

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'Hello world';
我们向该方法提供了一个idDOM 中不存在的值，并返回了一个值。尝试在值上设置属性会导致错误。 getElementByIdnullnull

确保您正在访问正确的 DOM 元素并添加条件检查以确保找到该元素，然后再为其设置属性。

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

if (el) {
  el.innerHTML = 'Hello world';
} else {
  console.log('element not found');
}

要解决“无法设置 null 属性”错误，请确保在正文底部插入 JS 脚本标记。JS 脚本标签应该放在 HTML 元素声明之后。

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

    <div id="box">Content</div>
  </body>
</html>

请注意，JS 脚本位于div元素上方。该index.js文件在div创建元素之前运行，因此我们无法div
从该index.js文件访问。

索引.js
const el = document.getElementById('box');
console.log(el); // 👉️ null

// ⛔️ Cannot set properties of null (setting 'innerHTML')
el.innerHTML = 'Hello world';

相反，将 JS 脚本标签放在 body 标签的底部，在它尝试访问的所有 DOM 元素之后。

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

    <!-- ✅ GOOD - div already exists ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在，我们可以访问文件中的div元素了index.js。

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

// ✅ Works
el.innerHTML = 'Hello world';

结论

尝试在值上设置属性时发生“无法设置 null 属性”错误null。

当元素不存在于 DOM 中时，存储值的变量null通常从诸如 之类的方法返回
。getElementById()

–

发表评论