下面比较了几种浏览器之间的差异,在写javascript代码时 要时刻注意这些差异
序号 | 操作 | 分类 | IE | FireFox | Mozilla | 当前 | 备注 |
1 | "." | 访问tag的固有属性 | OK | OK | OK | OK |
|
2 | "." | 访问tag的用户定义属性 | OK | NO | NO | OK | 可以用getAttribute函数 替代 |
3 | obj.getAttribute | 访问tag的固有属性 | OK | OK | OK | OK |
|
4 | obj.getAttribute | 访问tag的用户定义属性 | OK | OK | OK | OK |
|
5 | document.all | 访问document的所有子元素 | OK | OK | NO | OK | 建议用childNodes对象或者getElementById函数实现对应操作。 |
6 | obj.all | 访问非document元素的所有子元素 | OK | NO | NO | OK | 同上 |
7 | 根据元素的id/name来取得元素。 | OK | NO | NO | OK | 注意:很多元素是没有name属性的,eg: td, div,span... | |
8 | 变量名 = "" | 隐式定义变量-通过向变量名附值方式定义一个新的变量。 | OK | OK | OK | OK | 建议:为避免必要的麻烦,显示定义变量。 |
9 | id | 通过id直接调用对象 | OK | OK | NO | OK | eval()函数用来执行脚本,所以向eval函数里面传入对象id/name的话,IE同样会返回对象的引用。 |
10 | name | 通过name直接调用对象 | OK | NO | NO | OK | 同上/ 原因同7 |
11 | name | 支持的特殊字符("!",".","@","#","$","<",...) | NO | OK | OK | NO | 其它的字符没有测试 |
12 | tr.innerHTML = "" | 设置TR元素的内部HTML脚本 | NO | OK | OK | NO | 在IE中,table、tr的innerHTML是只读属性,不能够对其直接设置。可以通过insertRow/insertCell函数进行设置。 |
13 | cells对象访问 | 访问tr的cells对象 | NO | OK | OK | undefined | 可以将其插入Table再访问,或者可以用getElementsByTagName函数 对td/th访问。 |
14 | (index) | 访问集合类对象 | OK | NO | NO | OK | 建议用正式的操作符"[]". |
15 | obj.toString() | 取得对象的字符串"[object 对象类型的名称]". | NO | OK | OK | NO | 可以省略toString()函数,直接用对象来操作。 |
16 | obj.class | 定义对象的css式样/风格。 | NO | OK | NO | - | 无法写测试代码,会有编译错误!可以自己用typeof(class) == null来测试一下,没有异常就在代码中可以使用。 |
17 | const | 保留关键字,用于定义常量。 | NO | OK | OK | - | 暂时只能不使用const。 |
18 | input.type | 变更input元素的类型 | NO | OK | OK | NO | IE可以初始input元素类型,但是不能变更类型。 |
19 | obj.children | 访问对象的子元素集合 | OK | NO | NO | OK | 可以用childNodes对象替代。 |
20 | node.replaceNode | 替换新的节点对象 | OK | NO | NO | OK | 可以用replaceChild函数替换。 |
21 | node.removeNode | 删除已有节点对象 | OK | NO | NO | OK | 可以用oldNode.parentNode.removeChild(oldNode)方式实现。 |
22 | node.insertBefore | 在指定节点对象前面插入一个节点对象 | OK | OK | OK | OK |
|
23 | obj.parentElement | 访问对象的父元素 | OK | NO | NO | OK | 可以用parentNode对象替代。 |
24 | obj.childNodes.length | 返回子节点的数量,和tag的数量相同。 | OK | NO | NO | OK | FF/Mozilla中,空白或者换行是文本节点,是childNodes的成员。 |
25 | obj. | 向指定的位置插入元素 | OK | NO | NO | OK | insertAdjacentElement函数和insertAdjacentText函数也类似。 |
26 | createElement() | 创建指定类型元素。 | OK | NO | NO | OK | 可以先创建出对象元素,再进行属性设置;或者直接以InnerHTML的形式加到对应位置。 |
27 | nodeName | 取对象(tag,attribute,textnode)节点名称 | OK | OK | OK | OK | 有人说存在差异,不知道是具体的前提条件,先记录备考。 |
28 | window.event | 取得当前的事件对象 | OK | NO | NO | ? | 可以主动向事件的响应函数传入event参数。 |
29 | event.target | 取得事件的触发对象 | NO | OK | OK | ? | 可以和srcElement共同使用;可以主动向事件的响应函数传入触发对象元素。 |
30 | event.srcElement | 取得事件的触发对象 | OK | NO | NO | ? | 可以和target共同使用;可以主动向事件的响应函数传入触发对象。 |
31 | event对象属性 | 当前三个浏览器的共同拥有的属性: | altLeft | bubbles | bubbles | ? | event对象的不同点太多,在使用的时候需要一一检查才行。具体可以用页面下方的测试区域试验。 |
32 | 注册event | 用attachEvent函数注册 | OK | NO | NO | - | 小心内存泄漏!!! |
33 | 注册event | addEventListener函数注册 | NO | OK | OK | - |
|
34 | 注册event | obj.onxxx = Function("响应函数名称或代码");方式注册 | OK | OK | OK | - |
|
35 | 销毁event | detachEvent函数销毁 | OK | NO | NO | - |
|
36 | 销毁event | removeEventListener函数销毁 | NO | OK | OK | - |
|
37 | 销毁event | obj.onxxx = null;方式注册 | OK | OK | OK | - |
|
38 | 触发event | fireEvent函数 | OK | NO | NO | - |
|
39 | 触发event | dispatchEvent函数 | NO | OK | OK | - |
|