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

21
votes

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?

8
javascriptjquery
You'll need a DOM API, you can't do this in vanilla JS (you can't do much of anything in vanilla JS). ;) – Quentin
What exactly do you want to achieve? Do you want to tell CSS that JavaScript is available? Do you want to do it as early as possible using browser-specific events? Does simple "onload" event work for you? Any additional input would help to give you the right answer. – Eugene Lazutkin
@David: What's jQuery written in then? – Tim Down
@Tim Down: It's written in JS … and makes use of the DOM APIs (the W3C and the Microsoft one with adjustments for browser bugs), so it isn't "vanilla" (and note the smiley). – Quentin
Mocking those who are less informed is not funny or cool. We were all there once. And besides, helping him understand why his statement wasn't semantically perfect would have been more useful than being smugly superior. – Slobaum

8 Answers

48
votes

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();
    }
  });
}
2
votes

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).

1
votes

If your aim is to add the class to body immediately as the page is loaded, perhaps to hide no-JS-fallback elements, you could do that just immediately inside the body tag rather than waiting for any events:

<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

(although in general if that's the aim it's better to remove the fallback elements as you go along replacing them with scripted elements, so that if one piece of script errors out all the other components on the page don't break.)

This is the fastest way to bind to elements: do so just immediately after creating them (inside the open tag if you only need to alter the elements; just after the close tag if you need to alter their contents). However this approach does tend to litter the page with ugly <script> blocks, which is why more people put the code all at the bottom or use an load/ready-handler.

0
votes
window.onload = function() {
   var elmt =  document.getElementsByTagName('body');
   if(elmt){
      elmt[0].className = 'javascript';
   }
}

That should do it.

EDIT: Updated to get element by tag name not ID.

0
votes

Simple:

window.onload = function() {
  document.body.className = "javascript";
}

Or in HTML:

<body onload="document.body.className = 'javascript'">...</body>

Unless you want to differentiate between "before onload" and "after onload", you can do it statically:

<body class="javascript">...</body>
0
votes

Did you try to put at the very end of your body the following?

<script>
    document.body.className = 'javascript';
</script>
0
votes

just put this

<script>document.body.className += ' javascript';</script>

before </body> tag. Simple and easy (and very close) solution.

0
votes

If just dealing with modern browsers, you could place this just after the opening body tag.

<script>
     document.body.classList.add("javascript");
</script>