javascript - "object.property"和 "document.getElementById().property"有什么区别

Question

这个问题已经有答案了:

Do DOM tree elements with IDs become global properties? (6 个回答)

已关闭 6 年前。

我有这个 HTML:

<input id="foo">Hello world!</input>

我想知道有什么区别

document.getElementById('foo').value

和

foo.value

在 JavaScript 中

Answer 1

foo.value 利用全局变量 foo，该变量是在元素为其建立 id 时创建的。两个版本都访问相同的对象并使用相同的数据。

仅使用 id 访问元素自 JavaScript 诞生以来就一直存在，并且一直延续到今天，但随着时间的推移，文档对象模型 API 被创建为具有更强大和完整的交互方式文件。

话虽如此，document.getElementById() 是更现代的方法。它是 Document Object Model API standard 的一部分 通常推荐使用它，因为它更清晰，并且提供了多种与 Web 文档中的元素交互的方式。

这是一个例子。

console.log(div.innerHTML);
div.innerHTML = "New Content!";
console.log(document.getElementById("div").innerHTML);

<div id="div">This is an element</div>