TypeError：getElementById 不是 JavaScript 中的函数

TypeError: getElementById 不是 JavaScript 中的函数

TypeError: getElementById is not a function in JavaScript

“getElementById 不是函数”错误的发生有两个原因：

方法拼写错误getElementById（名称区分大小写）
getElementById在元素而不是对象上使用该方法document
。

typeerror getelementbyid 不是函数

错误拼写 getElementById() 方法

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

索引.js


// ⛔️ notice capital D in id - (should be getElementById)
const btn = document.getElementByID('btn');

// ✅ correct
const btn = document.getElementById('btn');

我们拼错了
导致错误的document.getElementById方法。

在不是元素的元素上调用 getElementById()`document`

如果您对getElementById()不是document.

索引.js


// -------------------------------------------

// ⛔️ using the method on another element instead of the document
btn.getElementById('box');

// ✅ correct
const box = document.getElementById('box')

在第二个示例中，我们getElementById在不是对象的元素上调用了方法document。

页面上只能有一个具有特定 ID 的元素，因此将方法限定为特定元素是没有意义的。该方法只能在对象上使用document。

正确使用document.getElementById()方法

确保getElementById()正确拼写方法，因为它区分大小写，并且只调用对象上的方法document。

索引.html


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

  <body>
    <!-- 👇️ button with `id` of `btn`  -->
    <button id="btn">Click me</button>

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

现在我们可以调用对象getElementById上的方法了document。

索引.js


// ✅ Works
const btn = document.getElementById('btn');
console.log(btn); // 👉️ button#btn

我们getElementById正确拼写了方法并在document
对象上调用了它，所以一切都按预期进行。

该document.getElementById方法只能在对象上调用，因为在 DOM 中document只有 1 个元素具有给定的值。id

确保在调用 getElementById 时指定正确的标识符

假设我们有前面代码示例中的 HTML。

索引.html


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

  <body>
    <!-- 👇️ button with `id` of `btn`  -->
    <button id="btn">Click me</button>

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

调用该document.getElementById()方法时，请确保将正确的 ID 传递给它，因为标识符区分大小写。

索引.js


// ✅ Works
const btn = document.getElementById('btn');
console.log(btn); // 👉️ button#btn

// ⛔️ returns null
const notBtn = document.getElementById('BTN');
console.log(notBtn); // 👉️ null

对该getElementById()方法的第一次调用按预期工作并返回正确的元素。

对该方法的第二次调用返回，null因为我们拼错了id元素的 the。

当使用不存在的
getElementByIdan 调用该方法时，返回。idnull

使用 querySelector 而不是 getElementById

还有其他方法，如
querySelectordocument可以在对象或特定元素
上调用。

这是一个例子。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="box">
      <div class="first">Box 1</div>
      <div class="second">Box 2</div>
    </div>

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

这是相关的 JavaScript 代码。

索引.js


// 👇️ calling getElementById() on the document
const box = document.getElementById('box');

// 👇️ calling querySelector on an element
const second = box.querySelector('.second');

console.log(second); // 👉️ div.second

该querySelector方法接受一个选择器并返回 DOM 中与给定选择器匹配的第一个元素。