Search code examples
javascriptdomcross-browserbackwards-compatibility

DOM manipulation, backwards compatibility and cross browser worries

Can I use modern DOM manipulation and traversal methods like document.querySelector safely without worrying about backwards compatibility and cross-browser compliance?

Solution

  • I'm going to make an arbitrary selection here, which of course can be debated for many parsecs.

    The list which I deem modern browsers is based on their compliance to the W3C standard and availability:

    • Firefox (from version 35 and up)
    • Chrome (from version 31 and up)
    • Internet Explorer (from version 10 and up), including mobile
    • Safari (from version 7.1 and up)
    • IOS Safari (from version 7.1 and up)
    • Android Browser (from version 37 and up)
    • Chrome (mobile) (from version 40 and up)

    These browsers are all capable of using modern CSS selectors, document.querySelector, DOMParser, innerHTML, outerHTML, insertAdjacentHTML and document.getElementsByClassName. Some statistics about browser usage:

    Global browser statistics from W3Schools.com. (not version specific)

    2015

            Chrome  IE      Firefox Safari  Opera

February    62.5 %  8.0 %   22.9 %  3.9 %   1.5 % 
January     61.9 %  7.8 %   23.4 %  3.8 %   1.6 %

    Global browser statistics from StatCounter.com. (not version specific) 

    February 2014 to February 2015

Chrome  IE      Firefox Safari  Opera   Others

46.08%  20.78%  17.67%  10.36%  1.42%   3.69%

    Global browser statistics from CanIuse.com

    February 2015

IE 8    IE 9    IE10    IE11
2.9%    1.82%   1.44%   8.02%

FF 35   FF36    FF37    FF38    FF39
8.93%   0.72%   0.02%   0%      0%

Chr 38  Chr 39  Chr 40  Chr 41  Chr 42
0.68%   1.97%   27.38%  0.19%   0.17%

Sfr 7.1 Sfr 8
0.59%   1.33%

Isfr 7.1    iSfr 8.1
1.6%        5.1%

Chrome Android 40
10.51%

    Backwards compatibility

    When talking about DOM manipulation and backwards compatibility these are always safe options:

    On document:

    • document.getElementById, supported since IE5.5/FF1.0/Chrome 1.
    • document.getElementsByTagName, supported since IE5.5/FF1.0/Chrome 1 *
    • document.getElementsByName, supported since IE5.5/FF1.0/Chrome 1 *
    • document.createElement or document.createTextNode

    On Node: **

    • childNodes
    • appendChild, removeChild, replaceChild
    • setAttribute, removeAttribute, getAttribute
    • cloneNode, parentNode
    • contains
    • previousSibling, nextSibling

    To decide you need to support older browser is entirely your call. If you have an employer that still uses IE6, then you need to support that (and convince your boss to upgrade), however one can assume that more than 65% of the global internet users is using a modern browser. This number goes up when zooming in on the first world countries.

    * Note also applies to Element
    ** Note, Element inherits from node