How to properly execute your DOM manipulation JavaScript?

jQuery is the most popular JavaScript library for DOM manipulation ,it has a healthy community and huge base of users around the world .Also jQuery has a lot of plugins to solve and provide developers with solutions to many common and uncommon web development problems.In this small article(and a part of a serie of articles) i'm going to show you some clever tricks to effectively work with JavaScript and jQuery.

So lets start with the first thing you should know:

Before you can work with JavasScript and jQuery to manipulate the DOM you need to tell the browser to execute your code only when the DOM is ready i.e when all page elements are loaded otherwise your code may or will not function properly.To do that it'is very easy and straightforward,you need to listen for the ready event which is emitted by the browser when DOM is ready .Basically we have 3 ways to listen for the DOM ready event

1 With plain JavaScript using document.addEventListener .The only shortcoming of this method, it doesn't work in older IE versions but i guess this is not going to be a problem in future since the majority of users will stop using older versions.You don't have to include jQuery to use this one because it is part of the standard and all modern browsers are implementing it

document.addEventListener('DOMContentLoaded',function(){ // Your code goes here }); 1 Using jQuery ready function :

$(document).ready(function(){ /* your code goes here */}); 2 Or just

$(function(){ /* your code goes here */});

So these are the 3 methods you can use to listen for content ready event and you should remember to only execute your DOM manipulation code inside listeners for the ready event ,otherwise you code will execute fast before the page has completely loaded missing some elements that your code is working or depending on so you'll endup getting wierd unexplained errors.I remember when i first begin writing code for DOM manipulation that i always forget to listen for the ready event and wasted a lot of time to figure out what's wrong with my code so hope you do not waste your time too .

I forget to mention that there exists also another way which is used especially if your target old browsers because it works everywhere regarding of the use of jquery or a modern browser .

function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}

This method checks for document.readyState if it contains the "in" string for "loading" ,if yes we seta timeout to recheck again ,if not we execute our function f which is supposedly our DOM listner function here.So after adding the line above you just need to execute your code in this way:

r(function(){ // your code goes here }); Original code by original author for this method is here

So that's all for now folks and see you in another article.

comments powered by Disqus