DOM 操作、向后兼容性和跨浏览器问题

Question

我能否安全地使用像 document.querySelector 这样的现代 DOM 操作和遍历方法，而不必担心 向后兼容性 和 跨浏览器合规性?

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/

DOM 操作、向后兼容性和跨浏览器问题

DOM manipulation, backwards compatibility and cross browser worries

javascript

dom

cross-browser

backwards-compatibility

向后兼容性