javascript代码位置及某些时候无法实现效果的联系

来源：互联网发布：企业报表软件编辑：程序博客网时间：2024/06/16 01:45

一般常规的可以看到javascript代码会放在head标签部分，或者在BODY中，他们的区别在于加载顺序的不同，一般在没有明确规定DOM全部加载完成后执行的情况下，head部分的JAVASCRIPT代码是最先被执行的，所以就有可能，当你在head内的javascript代码会调用到还未加载的dom时会发生错误，因为这个元素并未被加载，因此在很早之前学JQUERY的时候会出现效果无法显示的情况。(API对于window对象onload的解释:

The browser loads applications, embedded objects, and images as soon as it encounters theapplet, embed, and img objects during parsing. Consequently, the onload event for these objects occurs before the browser parses any subsequent objects. To ensure that an event handler receives theonload event for these objects, place the script object that defines the event handler before the object and use the onload attribute in the object to set the handler.

)

所以放在HEAD中js代码一般是写一些需要立即加载的东西。

如果一定要在head中存放则可以通过,window.onload=function(){ //code }处理，即等DOM全部加载完全后执行。

另外关于js的onload事件和JQ的ready事件的区别在于，onload是指当页面所有内容（DOM元素外的一些媒体资源等）加载完成后执行，且只执行一次.

JQ中的$(document).ready(function(){})则只是需要DOM元素加载完毕，而不必等到资源全部加载完全，不过这也可能导致无法对某些对象进行处理,因为资源，图档，内嵌的东西并未加载完全就已经运行了

js代码位置的错误事例：

<html><head><script type="text/javascript">var test=document.getElementById("test");//未加载DOM模型就运行了，找不到对象alert(test.nodeName);</script></head><body><div id="test" ></div></body></html>

正确形式：

<body><div id="test" ></div><script type="text/javascript">var test=document.getElementById("test");alert(test.nodeName);</script></body>

或者

<head><script type="text/javascript">window.onload=function(){var test=document.getElementById("test");alert(test.nodeName);}</script></head>

已经很久没有碰过前端的东西，现在想转行,特意从0开始学习，以前学的不好，所以认知不一定对，如果本文所述有错或者理解方面出现问题的地方，希望各位能够指出。感激不尽!

0 0