DOM 操作、向后兼容性和跨浏览器担忧

Question

我是否可以安全地使用现代 DOM 操作和遍历方法（如 document.querySelector）而不用担心向后兼容性和跨浏览器合规性？

Answer 1

我将在这里进行任意选择，这当然可以针对许多秒差距进行辩论。

我认为现代浏览器的列表基于它们是否符合 W3C 标准和可用性：

• Firefox（35 及以上版本）
• Chrome（31 及以上版本）
• Internet Explorer（版本 10 及更高版本），包括移动设备
• Safari（7.1 及以上版本）
• IOS Safari（7.1 及以上版本）
• Android 浏览器（37 及以上版本）
• Chrome（移动版）（40 及更高版本）

这些浏览器都能够使用现代 CSS 选择器、document.querySelector、DOMParser、innerHTML、outerHTML、insertAdjacentHTML 和 document.getElementsByClassName。关于浏览器使用情况的一些统计数据：

来自W3Schools.com 的全球浏览器统计信息。 （不是特定版本）

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 % 

来自StatCounter.com 的全球浏览器统计信息。 （不是特定的版本）

February 2014 to February 2015

Chrome  IE      Firefox Safari  Opera   Others

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

来自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%

向后兼容性

当谈到 DOM 操作和向后兼容性时，这些总是安全的选择：

关于文档：

• document.getElementById，自 IE5.5/FF1.0/Chrome 1 起支持。
• document.getElementsByTagName，自 IE5.5/FF1.0/Chrome 1 起支持 *
• document.getElementsByName，从 IE5.5/FF1.0/Chrome 1 开始支持 *
• document.createElement 或 document.createTextNode

在节点上：**

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

决定您是否需要支持旧版浏览器完全由您决定。如果您的雇主仍在使用 IE6，那么您需要支持（并说服您的老板升级），但是可以假设全球 65% 以上的互联网用户正在使用现代浏览器。放大第一世界国家时，这个数字会上升。

* 注意也适用于Element
** 注意，Element 继承自节点

Answer 2

查找使用选择器的 Jquery 是一种简单的管理方法。 http://www.w3schools.com/jquery/jquery_ref_selectors.asp http://jquery.com/