-2

I have doubts on the domready, onload, body, head. when i am linking some js into head, it's not working. otherwise, its working in the body.

And i have noticed in the JSFIDDLE, it mentiond.

What are means fo this and differnce?

Could you please explain about it?

Darious
  • 121
  • 1
  • 13
  • 2
    Already answered on stackoverflow [dom ready vs onload](http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – Rajan Singh Nov 26 '15 at 04:46
  • 1
    `domready` and `onload` are comparable, but `` and `` are VERY different. Go read any HTML tutorial. – Jonathan Lam Nov 26 '15 at 04:47

2 Answers2

3

Javascript that accesses the DOM must not execute UNTIL the DOM has been loaded.

Code that runs in the <head> section of the document will execute BEFORE the DOM has been loaded and thus if it tries to operate on the DOM, the DOM will simply be empty.

Code that runs in the <body> section of the document will execute AFTER any DOM elements that are before that script tag, but BEFORE any DOM elements that are after the script tag.

If you put <script> tags at the very end of the <body> section right before the </body> tag, then the whole DOM will be ready when that script executes.

DOMContentLoaded (which jsFiddle calls onDomReady) is an event that fires when the DOM is now loaded and is available for script to access. If you run your code when the DOMContentLoaded event fires, then the DOM will be ready for your code to access at that point.

window.onload is an event that fires when the DOM is now loaded and any resources specified in the HTML of the page are also done loading (like images). This always fires after the DOMContentLoaded event.

You can see further description of this issue here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

If code works when in the <body>, but not in the <head>, then you are probably running the code too early in the <head> tag before the DOM is ready. You can either just leave it near the end of the <body> or you can hook it up to one of the load events and then you can put it in the <head> tag if you want.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
0

<head> contains all the information regarding the Page properties, CSS and JavaScript. Though CSS and JavaScript can be included in the body as well. Head will include Page's meta information, Title, base URL etc.

<body> contains the actual content of the body. Which users visiting the website actually see or interact with.

DOM is Document Object Model. It's the basic structure or you can say the skeleton of the Page on which the page stands.

domready is an event which is fired as soon as the DOM has finished loading. For eg: Suppose a page has only one image. It will wait for the image tag to be parsed. As soon as the image tag is received it will be fired. It will NOT wait for whole image to be loaded from the source.

onload is an event which is fired when complete(DOM + content) page is loaded. In the previous example in donready, onload will wait for the image to be fetched from the source and then will be fired.

Ashish Choudhary
  • 2,004
  • 1
  • 18
  • 26