时间戳

首页 > 解决方案 > 为什么 document.getElementById("item").value 很难分配给变量？

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

问题描述

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

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

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

是什么让为外部 HTML 文档的元素分配变量如此复杂以至于人们通常求助于 jquery 的简单分配？$()

标签： javascriptjqueryhtml

解决方案

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

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

要保留值的“实时”副本，您将存储对元素的引用

var thingy = document.getElementById("item")

然后你可以稍后打电话

thingy.value获取当前值。

这与听起来您一直在使用 jQuery 的方式相当

var thingy = $("#item")

usingvar thingy = $("#item").val()会产生与之前复制当前值相同的行为，并且后续调用thingy不会是“实时”值。

使该引用不为空

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

DOMContentLoaded我相信一旦 DOM 树完全可用（所有元素都已解析），jQuery 就会挂钩事件并触发您的代码。他们为您提供了一些参与此事件的速记。

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

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

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

HTML 5 为 script 标签引入了defer属性，所以我们完全不用担心它，我们的外部脚本会在 DOM 被解析后被调用。请注意，这仅适用于外部脚本，不适用于内部脚本

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

推荐阅读