在声明js之前，如何在js中使用HTML元素

How can I use HTML elements in js before declaring it?

本文关键字：js HTML 元素 声明 之前      更新时间：2023-09-26

我正在尝试用HTML5画布制作一个2D游戏。所以我要做的是为js 定义画布

var canvas = document.getElementById('gamecanvas');

当我把这句话放在<canvas>标签后面时，代码运行得很好。但是当我把脚本放在script标签中的head标签中时（在写<canvas>标签之前，它会给我错误

ncaught TypeError: Cannot read property 'getContext' of null

这是因为画布在js代码之前没有"声明"，因为JS逐行读取代码。

但是，本教程在编写canvas标记之前已经编写了代码。这怎么可能发生。

还有一个问题，为什么JS在声明函数之前使用函数时没有给出任何错误？它不应该是一样的吗？

但是，本教程在编写画布标记之前已经编写了代码。这怎么可能发生。

直到元素被添加到DOM之后，它才运行代码。

代码在函数中。调用该函数是为了响应load事件。

还有一个问题，为什么JS在声明函数之前使用函数时没有给出任何错误？它不应该是一样的吗？

函数声明要进行提升（这本质上意味着它们是在编译时而不是运行时发现的）。

我知道如何解决这个问题的3个解决方案。最简单和最好的是（正如上面的人所写的）

<body onload="doSomething()">

因为html是从页面顶部到底部加载代码，所以可以预见，第一个加载的是javascript，他的函数会做什么，他们必须做什么，找到ID，但如何，当页面还没有加载时。上面的onload函数将执行您输入的函数，之后将加载整个主体。

另一种方法是将<script>标记放在页面的末尾，这样javascript将作为最后一个加载。或者，如果你对Jquery开放，Jquery 的基本功能

$(document).ready(function(){ ... TO DO ...});

也会这么做。

在页面准备好之前，不要执行引用DOM元素的代码。页面准备好后调用函数：

<body onload="doSomething()">

函数doSomething（）当然可以出现在它引用的元素之前的页面上，只要该函数只在元素在DOM中之后执行即可。

相关文章：