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

Question

我正在尝试使用 HTML5 canvas.so 制作 2D 游戏，我需要做的是为 js

定义 canvas

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

当我将这句话放在 <canvas> 标记之后时，代码运行良好。但是当我将脚本放在 script 标签中的 head 标签内时（在编写 <canvas> 标签之前，它给了我错误

ncaught TypeError: Cannot read property 'getContext' of null

这是因为 canvas 不是 js 代码之前的 "declared" 因为 JS 逐行读取代码。

不过，这个tutorial在写canvas标签之前已经写好了代码。怎么会这样。

还有一个问题，为什么JS在声明之前使用一个函数不报错？不应该是一样的吗？

Answer 1

However, this tutorial has written the code before writing the canvas tags. How could that happen.

只有在元素添加到 DOM 之后，运行才会显示代码。

代码在函数中。该函数被调用以响应 load 事件。

One more question, why JS doesn't give any error when using a function before declaring it?shouldn't it be the same?

函数声明会被提升（这实际上意味着它们是在编译时发现的，而不是运行时）。

Answer 2

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

<body onload="doSomething()">

函数 doSomething() 当然可以出现在页面上它引用的元素之前，只要该函数仅在元素位于 DOM.

之后执行

Answer 3

我知道解决该问题的 3 种解决方案。最简单和可能最好的是（正如上面有人写的那样）

<body onload="doSomething()">

因为html是从页面顶部到底部加载代码，可以预见首先会加载javascript，他的功能会做，他们必须做的事情，发现ID，但是当页面还没有加载时如何加载。上面的onload函数会执行你输入的函数，整个body加载完成后。

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

的基本功能

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

也会这样做。

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