不能读懂你的null属性？试试这几个方法！

避免 JavaScript 中使用 getAttribute() 时出现的“无法读取 null 的属性”错误

简介

在 JavaScript 中，使用 getAttribute() 方法来获取元素的属性非常常见。然而，当你使用 ECharts 和地图时，切换到空白页面后，重置页面时，可能会遇到 “Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')” 的错误。本文将深入探讨此错误产生的原因并提供有效的解决方法。

错误根源

此错误表示 getAttribute() 无法读取 null 的属性。这种情况通常发生在以下情况下：

• 使用 getAttribute() 之前，元素已被移除或其属性已被修改。
• 元素不存在，因为用户在页面上进行了某些操作或页面加载不完整。

解决方法

要避免此错误，在使用 getAttribute() 之前，必须先对元素的合法性进行验证。有几种方法可以做到这一点：

1. 使用 document.querySelector() 检查元素是否存在

const element = document.querySelector('#my-element');
if (element) {
  // 获取元素属性
  const value = element.getAttribute('data-value');
}

2. 使用 element.getAttribute() 检查元素的属性是否存在

const element = document.getElementById('my-element');
if (element.getAttribute('data-value')) {
  // 获取元素属性
  const value = element.getAttribute('data-value');
}

3. 使用 try-catch 块捕获错误

try {
  // 获取元素属性
  const value = element.getAttribute('data-value');
} catch (error) {
  // 处理错误
  console.error(error);
}

代码示例

以下是使用前两种方法的代码示例：

// 使用 document.querySelector()
const element = document.querySelector('#my-element');
if (element) {
  const value = element.getAttribute('data-value');
  console.log(value); // 输出：my-value
} else {
  console.log('元素不存在');
}

// 使用 element.getAttribute()
const element = document.getElementById('my-element');
if (element.getAttribute('data-value')) {
  const value = element.getAttribute('data-value');
  console.log(value); // 输出：my-value
} else {
  console.log('属性不存在');
}

结论

通过采取这些预防措施，你可以有效地避免 “Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')” 错误，并确保你的代码在所有情况下都能正常运行。

常见问题解答

1. 为什么在使用 ECharts 和地图时更容易出现此错误？

ECharts 和地图通常涉及动态加载和卸载元素。如果页面在未正确清除元素的情况下重置，则可能会出现此错误。

2. 除了提到的方法之外，还有其他避免此错误的方法吗？

一种替代方法是使用 Element.matches() 方法检查元素是否与给定的选择器匹配。例如：

if (element.matches('#my-element')) {
  // 获取元素属性
  const value = element.getAttribute('data-value');
}

3. 此错误与 “TypeError: Cannot set properties of null (setting 'innerHTML')” 错误有什么区别？

这两者都是类似的错误，但它们针对不同的操作。getAttribute() 读取属性值，而 innerHTML 设置元素的 HTML 内容。

4. 此错误是否会影响其他浏览器？

是的，此错误可以在所有支持 JavaScript 的现代浏览器中发生。

5. 此错误是否可以由其他原因引起？

除了提到的原因外，此错误还可能是由以下原因引起的：

• 异步加载导致元素在 getAttribute() 调用时尚未加载。
• 元素的 display 属性设置为 none，使其在页面上不可见。