How to master Document Object Model (DOM)?

Question

Been using Javascript libraries like Prototype and jQuery for development, for a while now. While its a boon using those libraries, the one downside is that using such libraries probably doesn't help in understanding what happens under the hood.

1. So how does one master DOM?
2. Will understanding DOM be of more help when using Javascript libraries?
3. When not using libraries, what benefits does one have by understanding DOM?

Many Thanks in advance

Answer 1

1. So how does one master DOM?
   This is almost as general as saying "How does one master programming?", but I'll give it a shot.

   Practice is key. You can't just read a few books and become good with it. You need practice, and experience to know what exactly is going on when you do different things, and how different browsers interpret what you're doing.

   Of course, there are things you can do, one is to start taking tutorials at HTML Dog (check out JavaScript & HTML DOM in left menu). Also, check out caniuse.com so you can see what is supported in the DOM. Blogs are a great help, too. John Resig's blog (creator of jQuery) is a good resource for some more advanced DOM techniques. Taking a look into how JavaScript libraries' code to see how they do things. This will give you some ideas as to where to start. Of course, you need to have some knowledge & understanding of the DOM for this to be useful, first. The DOM is a mess, so it can take lots of time and patience to really master it.

   You'll need to master the following, in a cross browser way, which is why it's much better to use an already written framework.

   • DOM manipulation
   • Event handling
   • AJAX requests
     .

2. Will understanding DOM be of more help when using Javascript libraries?
   Yes. JavaScript libraries are great, but you can do some very unfavorable things in JavaScript frameworks if you don't know what they framework is (essentially) doing behind the scenes. For example, jQuery selectors are designed to traverse the DOM in a specific way. If you don't understand how jQuery traversal works, it can have significant performance implications depending on your circumstances.

3. When not using libraries, what benefits does one have by understanding DOM?
   Well, when not using a JavaScript library, you have to have a pretty solid understanding of the DOM to do anything in JavaScript. It can be hard to develop something that is maintainable that works across all browsers if you aren't comfortable with everything in the DOM.

Of course, you should almost never do development without a JavaScript framework. Pick one that meets your needs and master it. It's much better than trying to re-invent the wheel (unless you plan on learning more about wheels).

Answer 2

1. By writing JS without a library or by studying the code of a library
2. Yes. For example, you will understand why doing certain actions using a library can be slow and how to do them better
3. If you're not using a library you'd actually have to understand the DOM to be able to do anything ;)