Question

I’m about halfway through “Javascript the Definitive guide” and realize now that a primary reason for something like jquery is because of the extreme inconsistencies in the Javascript/DOM interface on different browsers. On virtually every page is the mention of some document property, with the proviso that (for example) it works on every browser except IE prior to version 8 (or Firefox or whatever).

So, is there a JS library out there that just implements the Javascript DOM exactly as it functions in say Chrome, but so that it can be used for all browsers. If there isn’t, then its seems pointless to learn the DOM – might as well just stick to Jquery it seems.

Answer 1

No such library exists that just makes all DOMs act the same. Part of the reason for that is that the DOM isn’t easy to patch in a reliable way that won’t conflict with things that other libraries might be doing. And, part of the reason is that some things can be modified in their native form. For example, if an object attribute that can be accessed directly (without a function call) sometimes has the wrong value in some browser, there’s no easy way to patch that to fix it. And, part of the reason is that many projects have blocks of code from many sources, some of which use the DOM directly and some of which uses a library. If the library changes the DOM behavior, then the code that uses the DOM directly and expects it to work the way it works in the native browser may break.

You can argue that all code should just code to the way the DOM is supposed to work and use this magic shim layer that fixes the DOM, but that’s a practical argument that you just can’t win. There’s way too much code out there that expects the IE6 DOM to work the broken way that it works in IE6. For example, jQuery itself expects the IE6 DOM to be broken. If you want to use this magic DOM fixer shim, then it would be completely incompatible with any jQuery code.

So instead, libraries have found that it’s better and easier to shadow the DOM with a parallel way of accessing things and the patches and browser fixes go in this parallel layer. Then, any existing code that expects the DOM to work the way that browser makes it work is not affected, but any code written to use the library works how the library expects it to. Both goals can be satisfied. Yes, it’s a “new” API to learn, but it really isn’t all that different. If you know the DOM API, much of jQuery is a direct parallel just expressed in a common jQuery form.

For example, in jQuery you can access any attribute on a DOM object with .attr("propName") where propName is the DOM property name. If you’ve learned the DOM property names, you now know how to access all of them in jQuery. Similarly you can select any set of objects in the page with jQuery(CSS3selector). So, if you know CSS3 selectors, then you now know how to select any set of objects in jQuery. Yes, there are many enhanced pieces of functionality in jQuery that add new features that don’t exist in the DOM, but you can learn those separately as desired. They aren’t in the regular DOM anyway.

Lastly, there are some shim libraries that will adding missing features. For example, there are shim libraries to add ES5 methods to standard javascript objects such as Array.indexOf(). These shim libraries do partially work the way you’re talking about. If the method is not present, they add it so it works just like the standard implementation works. They don’t attempt to fix a broken implementation, but they do add things that are missing because it’s an older browser version so that the developer can then just code to ES5 without worry about browser compatibility. This is a much more limited goal than fixing the whole DOM in all browsers and has generally been succcessful.