类型错误：getAttribute 不是 JavaScript 中的函数

作者

TypeError: getAttribute 不是 JavaScript 中的函数

TypeError: getAttribute is not a function in JavaScript

出现“TypeError: getAttribute is not a function”错误的原因有多种：

  • getAttribute在 jQuery 对象而不是 DOM 元素上调用方法。
  • 在不是有效 DOM 元素的对象上调用方法。
  • 拼写错误getAttribute（区分大小写）。
  • 将 JS 脚本标记放在声明 DOM 元素的代码上方。

getattribute 不是函数

如果您使用 jQuery，请改用.attr方法，因为 jQuery 对象不公开getAttribute方法。

索引.js
// ✅ use `attr` instead of `getAttribute`
const result = $('#box').attr('your-attribute');
console.log(result);

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

索引.js
const obj = {};

// ⛔️ Uncaught TypeError: obj.getAttribute is not a function
obj.getAttribute('data-test');


对不是有效 DOM 元素的对象调用
getAttribute方法会导致错误。

只调用getAttribute有效的 DOM 元素

确保在getAttribute()声明 DOM 元素后，在有效的 DOM 元素上调用该方法并将 JS 脚本标记放在 body 标记的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box" data-test="example">Box</div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

请注意，JS 脚本标签必须放在正文的底部，在 DOM 元素之后。否则，我们最终会index.js在创建 DOM 元素之前运行该文件。

这是文件的代码index.js。

索引.js
const box = document.getElementById('box');

// 👇️ "example"
console.log(box.getAttribute('data-test'));

请注意，该getAttribute方法只能在有效的 DOM 元素上调用。

如果错误仍然存​​在，请确保您没有拼错，getAttribute因为它区分大小写。

您还可以console.log调用方法的值并检查它是否是有效的 DOM 元素。 getAttribute

调用前检查元素是否存在getAttribute

如果您调用该方法的元素有时不存在，请在调用该getAttribute
方法之前有条件地检查该元素是否存在。

例如，一个基本的 DOM 元素有一个对象类型，所以我们可以getAttribute在调用方法之前检查该值是否是一个对象并包含该属性。

索引.js
const box = null;

if (typeof box === 'object' && box !== null && 'getAttribute' in box) {
  console.log(box.getAttribute('data-test'));
}

我们的if条件使用逻辑与 (&&) 运算符，因此要if运行该块，必须满足所有条件。

我们首先
检查变量是否box存储了一个类型为 object 的值，因为 DOM 元素的类型为 object 。

然后我们
检查变量是否不等于 null。不幸的是，如果您使用 来检查 null 的类型console.log(typeof null)，您将得到一个"object"值，因此我们必须确保该值不是
null。

索引.js
console.log(typeof null); // 👉️ object
我们检查的最后一件事是对象包含属性。 getAttribute

然后我们知道我们可以安全地调用getAttribute对象上的方法。

这种方法称为鸭子打字。

使用 duck-typing 时，我们只需检查对象是否实现了特定的属性或方法，如果实现了，我们就假定它是正确类型的对象。

结论

getAttribute()要解决“getAttribute is not a function”错误，请确保在声明 DOM 元素后在有效的 DOM 元素上调用该
方法，并将 JS 脚本标记放在 body 标记的底部。

# 额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：