How can I detect DOM ready and add a class without jQuery?

I want to rewrite this line without using jQuery so it can be applied quicker (and before the downloading of the jQuery library). The line is...

$(document).ready(function() { $('body').addClass('javascript'); });

If I added it to the html element instead, would I be able to leave off the DOM ready part? One problem with this though is the validator doesn't like the class attribute on the html element, even if it is inserted with JS.

So, how would I rewrite that without jQuery?

Solution 1:

If you want to reproduce the jQuery's document.ready event, you can use the onreadystatechange or DOMContentLoaded events where applicable:

function domReady () {
  document.body.className += " javascript";
  // ...
}

// Mozilla, Opera, Webkit 
if ( document.addEventListener ) {
  document.addEventListener( "DOMContentLoaded", function(){
    document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
    domReady();
  }, false );

// If IE event model is used
} else if ( document.attachEvent ) {
  // ensure firing before onload
  document.attachEvent("onreadystatechange", function(){
    if ( document.readyState === "complete" ) {
      document.detachEvent( "onreadystatechange", arguments.callee );
      domReady();
    }
  });
}

Solution 2:

I dont know about vanilla JS, but you can write:

document.getElementsByTagName('body')[0].className += ' javascript';

at the bottom of the page (before closing the body tag).