TypeError: getElementsByTagName 不是 JS 中的函数

TypeError: getElementsByTagName is not a function in JS

“TypeError: getElementsByTagName is not a function”错误的发生有多种原因：

对getElementsByTagName()非 DOM 元素的值调用方法。
将 JS 脚本标记放在声明 DOM 元素的代码上方。
拼写错误getElementsByTagName（区分大小写）。

typeerror getelementsbytagname 不是函数

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

索引.html


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

  <body>
    <div class="box">
      <p>Box 1</p>
      <p>Box 2</p>
    </div>
    <div class="box">
      <p>Box 3</p>
      <p>Box 4</p>
    </div>

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

请注意，JS 脚本标签位于 body 标签的底部。

如果我们将 JS 脚本标记放在声明 DOM 元素的代码之上，它们将无法在文件中访问index.js。

这是index.js.

索引.js


const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box]

// ⛔️ TypeError: getElementsByTagName is not a function
const paragraphs = boxes.getElementsByTagName('p');

我们

在 a 而不是 DOM 元素上调用了Element.getElementsByTagNameNodeList方法，因此发生了错误。

`getElementsByTagName`仅在有效的 DOM 元素上调用该方法

要解决“getElementsByTagName 不是函数”错误，请确保只getElementsByTagName在有效的 DOM 元素上调用该方法，并在声明 DOM 元素后将 JS 脚本标记放在正文的底部。

索引.js


const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box]

// ✅ Works
const paragraphs = boxes[0].getElementsByTagName('p');

console.log(paragraphs); // 👉️ [p, p]

0通过访问的索引处的元素NodeList，我们得到了一个 DOM 元素，我们可以在该元素上安全地调用该getElementsByTagName方法。

调用前检查元素是否存在`getElementsByTagName`

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

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

索引.js


const box = null;

if (typeof box === 'object' && box !== null && 'getElementsByTagName' in box) {
  const result = box.getElementsByTagName('p');
}

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

我们首先检查变量是否box存储具有对象类型的值，因为 DOM 元素具有对象类型。

然后我们
检查变量是否不等于 null。不幸的是，如果你检查 null – 的类型console.log(typeof null)，你会得到一个"object"值，所以我们必须确保该值不是
null。

索引.js


console.log(typeof null); // 👉️ object

我们检查的最后一件事是对象包含属性。 getElementsByTagName

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

如果错误仍然存在，请确保您的拼写正确 – 它区分大小写并且很难拼写。 getElementsByTagName