Question

未捕获的类型错误：无法读取未定义的 getElementById 的属性

2022-09-22

3768

javascript html dom-events getelementbyid

我想通过 id 获取元素，但如果我使用 getElementById 并传递正确的 id，则会收到“Uncaught TypeError：无法读取未定义的属性（读取‘getElementById’）”的错误

列表项 html

<div class="optionRow">
                    <label for="option1"> <input class="option" type="radio" value="a" id="option1" name="option">
                        Option 1 </label>
                </div>

JavaScript

allOptions[1].document.getElementById('option1').innerHTML = data.a;
    allOptions[2].document.getElementById('option2').innerHTML = data.b;
    allOptions[3].document.getElementById('option3').innerHTML = data.c;

询问为什么会出现此错误？

Answer 1

to ask why this error ?

只有 document 对象提供 getElementById 函数。 id 必须是唯一的，因此不需要 HTMLElement 版本。

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll(), getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

因此，在您的情况下， getElementById 的正确用法应为：

document.getElementById('option1').innerHTML = data.a;

但请注意， input 不支持 innerHTML 。如果您想更改 value ，请执行：

document.getElementById('option1').value= data.a;

Answer 2

只需将 allOptions[1].document.getElementById('option1') 更改为 document.getElementById('option1')

因为 document 对象是 HTML 文档的根节点。您可以调用 document 或 window.document ，而不是从元素调用。

Answer 3

尝试

document.getElementById('option1').innerHTML = data.a;

document 是一个巨大的容器，包含有关该网站的许多信息。查看此网站： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById 了解更多信息。其中还有一个指向 document 元素的链接。

问候！