为什么document.getElementById("item" ).value很难分配给变量？

Question

在我看来，像var thingy = document.getElementById("item").value这样的东西应该创建一个变量，把这个元素的值放在其中，并在调用变量时调用元素的值。

我知道这不是那么简单，但我不明白为什么。

考虑到全局变量和页面加载，我读过很多类似的问题。页面卸载似乎解释了为什么将HTML页面链接到外部javascript文件，但我不明白为什么没有简单的解决方案。

是什么使得将变量分配给外部HTML文档的元素如此复杂，以至于人们通常采用jquery的简单$()分配？

Answer 1

保持对元素的"实时"引用

var thingy = document.getElementById("item").value在执行该行时复制该值并将其存储在thingy中。

要保存值的"实时"副本，您需要存储对元素的引用

var thingy = document.getElementById("item")

然后你可以稍后致电

thingy.value以获得当前值。

这与您使用jQuery 的情况相当

var thingy = $("#item")

使用var thingy = $("#item").val()将产生与复制当前值之前相同的行为，并且对thingy的后续调用将不是"活动"值。

---

引用不为空

开箱即用的脚本标记是同步解析的，也就是说，当它们被解析器击中时。脚本之后的任何元素都不会被加载，也不可用于查询。

我相信jQuery会挂接到DOMContentLoaded事件，并在DOM树完全可用(所有元素都已解析(后激发您的代码。他们会给你一些参与这项活动的新手。

$(function(){})
$(document).ready(function(){})
jQuery(function($){ });

在vanilla.js中，通过挂接到DOMContentLoaded事件也可以实现同样的效果

document.addEventListener('DOMContentLoaded', function(){
/* DOM tree fully parsed and available here */
});

HTML5为script标记引入了defer属性，所以我们根本不必担心它，我们的外部脚本将在DOM解析后被调用。请注意，这只适用于外部脚本，不适用于内部

<script src="mysite.js" defer></script>
....
/* inside mysite.js */
//DOM ready good to go
var thingy = document.getElementById("item");

Answer 2

您很可能面临这个问题，因为您试图在dom完全加载之前获取元素，而jquery在function.ready中工作，因此它等待页面准备好

Answer 3

当我们键入var thingy = document.getElementById("item").value时，此时您只得到当前值。这是有道理的，因为当值总是变化时，很难操作值和dom elements。。当您总是希望thingy始终返回当前值时，您需要一个函数。

var thingy = this.getValue();
getValue(){
return document.getElementById("item").value;
}

是什么使得将变量分配给外部HTML的元素文档如此复杂，以至于人们通常求助于jquery的simple$((任务？

什么都没有。这只是偏好。

编辑：查看@Profesor Allmans的答案，了解您问题的更多细节。不过，你必须发布一些解决方案的代码。