Where should scripts be placed when referring to the DOM?_问答_开发者

Where should scripts be placed when referring to the DOM?

开发者 https://www.devze.com 2023-03-21 06:44 出处：网络

相关专题：dom javascript

If you have something like the code below, it is impossible to access any node type below the head tag. I am guessing the reason is the JavaScript code executed before the rest of the document was created. But is there a way to access these nodes from the head tag. I want to access them from the head tag because I like my JavaScript code to be in one location if possible. I know jquery uses $(document).ready(). Is there something similar to that?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htm开发者_JAVA技巧l xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var div  = document.getElementById('myDiv')
alert(div)
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id='myDiv'></div>
</body>
</html>

The simplest analog to jQuery's $(document).ready() is window.onload:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function(){
    var div  = document.getElementById('myDiv')
    alert(div)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id='myDiv'></div>
</body>
</html>

It is not as good because it will wait until all images are downloaded before it fires. If you must have the equivalent, you could use a microlib such as this one.

"I like my JavaScript code to be in one location if possible"

Yes: An external js file. It is bad practice to write js in the head. In the same way that writing styles in the head is poor. Hopefully you are using jquery for more than just the ready event, but it is an invaluable initializer even if you aren't. Write your js in a separate file, hopefully in some type of a container so you don't clutter the global namespace, and initialize it with $(document).ready();

You must wait for the 'onload' DOM event. jquery $(document).ready() is a wrapper for setting event handlers for onload.

Without jQuery you might try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function do_onload() {
    var div  = document.getElementById('myDiv')
    alert(div)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>

Well as a general rule i tend to put all inline js at the end of the document anyway, only externals do i usually put in the head. However, you can use the same methods jquery uses. I dunno exactly what the jq source looks like but something like this should work (untested):

window.onDomReady = function (fn) {
    if(document.addEventListener) {
      document.addEventListener("DOMContentLoaded", func, false);
    } else {
      document.onreadystatechange = function(func){
        if(document.readyState == "interactive") {
          fn(func);
        }
      }
    }
  };

And then you would use it like:

window.onDomReady(function(){
   // do your stuff
});

I dunno if thats completely cross browser compatible either... that would be on of the benefits of using something like jQuery instead of writing your own.