chokk Posted January 22, 2011 Share Posted January 22, 2011 Hey all,Consider this page: <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test document</title></head><body><a href="#">test link</a></body></html> This document contains one link, right? So what if I wanted JavaScript to tell me just that.I would write something like this: <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test document</title><script type="text/javascript">document.write(document.links.length);</script></head><body><a href="#">lol</a></body></html> When I view the modified page in any browser I get "0".However, when I move the script past the link like this: <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test document</title></head><body><a href="#">lol</a><script type="text/javascript">document.write(document.links.length);</script></body></html> A "1" is displayed on the page. Can anyone explain this? Link to comment Share on other sites More sharing options...
jeffman Posted January 22, 2011 Share Posted January 22, 2011 An HTML document is not like a computer program where the whole thing is parsed and compiled before the thing executes. Rather, an HTML document is parsed and created as it is downloaded, "word by word."Scripts are executed as soon as the browser reads them. Elements described by text in the document are created in the DOM only when the browser has read that text. A script that attempts to access a DOM element before the element has been created will fail. So a script in the <head> element cannot access a DOM element immediately. A script placed after the element's text can access the element.Most external scripts and scripts in the <head> element wait until the window's load event has fired before accessing DOM elements. Link to comment Share on other sites More sharing options...
chokk Posted January 23, 2011 Author Share Posted January 23, 2011 window.onload = document.write(document.links.length); still displays 0.. What am I doing wrong? Link to comment Share on other sites More sharing options...
Ingolme Posted January 23, 2011 Share Posted January 23, 2011 window.onload = document.write(document.links.length); still displays 0.. What am I doing wrong? That's not how you work with events.To do it properly, you have to do this:window.onload = function() { document.write(document.links.length);} Putting "document.write" after the page has loaded will cause the page to be cleared. I don't recommend document.write() to output data. If you're just trying to show the information to yourself I recommend alert() instead. Link to comment Share on other sites More sharing options...
chokk Posted January 23, 2011 Author Share Posted January 23, 2011 Excellent, thanks for clearing that up!So by putting this event at the top of my script, I effectively make sure none of the code in the script is executed before the window has loaded? Link to comment Share on other sites More sharing options...
Fmdpa Posted January 23, 2011 Share Posted January 23, 2011 I put my scripts at the end of the body (the very last thing before </body> are my scripts). This eliminates the problem of your scripts running before the DOM tree is loaded. Also, it allows the main content to load first. So anyone with a slower internet connection won't have to wait for the scripts to load before they can see the page. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.