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

Answer 2

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 W3 Schools (check out JavaScript & HTML DOM in left menu). Also, check out quirksmode.org's compatibility tables 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 3

1. Frameworks are well tested and proven, and are designed to less code and focus on your business logic (For which you will be paid !!)
2. When you are coding, you are utilizing time for which your customer/boss is paying you, so they arent paying to master DOM, they need solution. Wasting their time/money will not do any good for you because no one will give you any award for mastering DOM.
3. If and only if you are paid to develop a framework, then you need to master DOM.
4. Understanding and Mastering are two different thing, understanding DOM is must to know how it happens inside that might help you while debugging.
5. Spend an hour of day to study DOM nodes and their attributes in a while, just to keep an update. Most of the time they are designed to be quite self explanatory. When a new version arrives, look at "Whats new", differences between old version and new version etc.