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($){ });

通过插入DOMContentLoaded事件，在vanilla.js中也可以实现

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

HTML 5在脚本标记中引入了defer属性，因此我们完全不必担心，解析DOM后将调用我们的外部脚本。请注意，这仅适用于外部脚本，不适用于内部

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

Answer 2

当我们键入MyItem { id: test_ onValueChanged: console.log("value changed from test") } Button { id: myButton_ text: "Change value" onClicked: test_.value = 42 }时，您只是在此时获得当前值。这是有道理的，因为当值始终更改时，操作值和var thingy = document.getElementById("item").value极为困难。当您始终希望dom elements始终返回当前值时，您需要一个函数。

thingy

是什么使将变量分配给外部HTML的元素文档如此复杂，人们通常会诉诸于jquery的简单性 $（）分配？

什么都没有。只是偏爱而已。

编辑：检查@Proffesor Allmans答案以获取有关您的问题的更多详细信息。不过，您必须发布一些代码以获取解决方案。

Answer 3

您最有可能遇到此问题，因为您试图在dom完全加载之前获取元素，而jquery在function.ready内部工作，因此它等待页面准备就绪

为什么document.getElementById（“ item”）。value很难分配给变量？

3 个答案:

保留对元素的“实时”引用

该引用不为空