跨浏览器编程之JavaScript
序号 | 操作 | 分类 | IE
(6.0) |
FireFox
(2.0) |
Mozilla
(1.5) |
当前
浏览器 |
备注 |
1 | "." | 访问tag的固有属性 | OK | OK | OK | ||
2 | "." | 访问tag的用户定义属性
eg: <input type="checkbox" myattr="test" > |
OK | NO | NO | 可以用 getAttribute函数 替代 | |
3 | obj.getAttribute | 访问tag的固有属性 | OK | OK | OK |
| |
4 | obj.getAttribute | 访问tag的用户定义属性
eg: <input type="checkbox" myattr="test" > |
OK | OK | OK |
| |
5 | document.all | 访问document的所有子元素
eg:document.all |
OK | OK | NO | 建议用childNodes 对象或者getElementById函数 实现对应操作。
有人说它不能取Div元素,测试结果是可以,不知道是不是还有其它因素会影响测试结果。 | |
6 | obj.all | 访问非document元素的所有子元素
eg: document.getElementById("mydiv").all |
OK | NO | NO | 同上 | |
7 | <> | 根据元素的id/name来取得元素。
如果元素只设置name属性,没有设置id属性。 |
OK | NO | NO | 注意: 很多元素是没有name属性的,eg: td, div, span... | |
8 | 变量名 = "" | 隐式定义变量-通过向变量名附值方式定义一个新的变量。 | OK | OK | OK | 建议:为避免必要的麻烦,显示定义变量。
eg:var tmp; | |
9 | id | 通过id直接调用对象
eg: test_result_1.innerHTML = "" |
OK | OK | NO | ev 建议用document.getElementById(id) 方式调用 注意: 因为这个原因,IE中隐式定义的变量不能和HTML中元素的id/name相同。 | |
10 | name | 通过name直接调用对象
eg: test_for_this_name.innerHTML = "" |
OK | NO | NO | 同上/ 原因同7 | |
11 | name | 支持的特殊字符( " ! " , "."," @ " , " # " , " $ " , " < ", ...)
eg: document.getElementsByName("aaaa!page"); |
NO | OK | OK | 其它的字符没有测试 | |
12 | tr.innerHTML = "" | 设置TR元素的内部HTML脚本 | NO | OK | OK | 在IE中,table、tr的innerHTML是只读属性,不能够对其直接设置。可以通过insertRow/insertCell 函数进行设置。 | |
13 | cells对象访问 | 访问tr的cells对象
前提:tr元素是被删除后的tr对象,或者是用cloneNode(true)复制的删除前的tr对象 |
NO | OK | OK | 可以将其插入Table再访问,或者可以用getElementsByTagName 函数 对td/th访问。
删除后的rows对象不存在这个问题 。其它元素? | |
14 | (index) | 访问集合类对象
eg: document. getElementsByTagName("TD")(0) |
OK | NO | NO | 建议用正式的操作符"[]". | |
15 | obj.toString() | 取得对象的字符串"
[object 对象类型的名称 ] ". eg: td == "[object HTMLTableCellElement]" |
NO | OK | OK | 可以省略 toString() 函数,直接用对象来操作。
注:在IE中返回 "[object]"。 | |
16 | obj.class | 定义对象的css式样/风格。
eg: td.class="XPstyle"; |
NO | OK | NO | 无法写测试代码,会有编译错误!可以自己用typeof(class) == null来测试一下,没有异常就在代码中可以使用。
在HTML脚本中用class,但是在Javas 注意: 用 setAttribute可以把class值设置到对象中去,但是不会被当作css式样来解析。 | |
17 | const | 保留关键字,用于定义常量。
eg:const HOURS = 24; |
NO | OK | OK | - | 暂时只能不使用const。 |
18 | input.type | 变更input元素的类型
eg: input.type="button"; |
NO | OK | OK | IE可以初始input元素类型,但是不能变更类型。
如果必须变更,可以用更换input元素的方式。 | |
19 | obj.children | 访问对象的子元素集合
eg: document.body.children.length; |
OK | NO | NO | 可以用childNodes 对象替代。 | |
20 | node.replaceNode | 替换新的节点对象
eg: oldNode.replaceNode(newNode); |
OK | NO | NO | 可以用replaceChild 函数替换。 | |
21 | node.removeNode | 删除已有节点对象
eg.oldNode.removeNode(true); |
OK | NO | NO | 可以用oldNode.parentNode.removeChild(oldNode) 方式实现。 | |
22 | node.insertBefore | 在指定节点对象前面插入一个节点对象
document.body.insertBefore(newN, oldN); |
OK | OK | OK | ||
23 | obj.parentElement | 访问对象的父元素
eg: document.body.parentElement.id; |
OK | NO | NO | 可以用parentNode 对象替代。 | |
24 | obj.childNodes.length | 返回子节点的数量,和tag的数量相同。
eg:document.body.childNodes.length; |
OK | NO | NO | FF/Mozilla中,空白或者换行是文本 节点,是childNodes的成员。
可以用node.getElementsByTagName() 回避。 | |
25 | obj.
insertAdjacentElement |
向指定的位置插入元素
eg: obj.insertAdjacentElement("beforeBegin",button); |
OK | NO | NO | insertAdjacentElement 函数和insertAdjacentText 函数也类似。
可以用insertBefore 函数实现类似功能。 | |
26 | createElement() | 创建指定类型元素。
前提:元素为HTML脚本 eg:document.createElment("<input type='radio' value='test'>"); |
OK | NO | NO | 可以先创建出对象元素,再进行属性设置;或者直接以InnerHTML的形式加到对应位置。
| |
27 | nodeName | 取对象(tag,attribute,textnode)节点名称
eg: name = obj.nodeName; |
OK | OK | OK | 有人说存在差异,不知道是具体的前提条件,先记录备考。
替代方案: 如果节点 是tag元素可以用"tagName"取值;如果节点 是attribut对象可以用"name"取值;如果节点是textnode元素 可以用nodeType==3判断。 | |
28 | window.event | 取得当前的事件对象
eg: window.event; |
OK | NO | NO | ? | 可以主动向事件的响应函数传入event参数。
eg:<a on |
29 | event.target | 取得事件的触发对象
eg: e.target; |
NO | OK | OK | ? | 可以和srcElement共同使用;可以主动向事件的响应函数传入触发对象元素。
eg:<a on |
30 | event.srcElement | 取得事件的触发对象
eg: e.srcElement; |
OK | NO | NO | ? | 可以和target共同使用;可以主动向事件的响应函数传入触发对象。
eg: var obj = (e.target) ? e.target : e.srcElemtn; |
31 | event对象属性 | 当前三个浏览器的共同拥有的属性:
altKey button cancelBubble clientX clientY ctrlKey screenX screenY shiftKey type
|
altLeft
behaviorCookie behaviorPart bookmarks boundElements contentOverflow ctrlLeft dataFld dataTransfer fromElement keyCode nextPage offsetX offsetY propertyName qualifier reason recordset repeat returnValue srcElement shiftLeft srcFilter srcUrn toElement wheelDelta x y
|
bubbles
cancelable currentTarget detail eventPhase explicitOriginalTarget isChar isTrusted layerX layerY metaKey originalTarget pageX pageY rangeOffset rangeParent relatedTarget target timeStamp view which |
bubbles
cancelable charCode currentTarget detail eventPhase explicitOriginalTarget isChar keyCode layerX layerY metaKey originalTarget pageX pageY popupWindowURI rangeOffset rangeParent relatedTarget requestingWindowURI target timeStamp view which |
? | event对象的不同点太多,在使用的时候需要一一检查才行。具体可以用页面下方的测试区域试验。 |
32 | 注册event | 用attachEvent函数注册 | OK | NO | NO | - | 小心内存泄漏!!!
事件处理完后一定要调用detachEvent函数销毁事件,而且要注意避免重复注册。 |
33 | 注册event | addEventListener函数注册 | NO | OK | OK | - | |
34 | 注册event | obj.on eg: btn.on btn.on |
OK | OK | OK | - | |
35 | 销毁event | detachEvent函数销毁 | OK | NO | NO | - | |
36 | 销毁event | removeEventListener函数销毁 | NO | OK | OK | - | |
37 | 销毁event | obj.on eg: btn.on |
OK | OK | OK | - | |
38 | 触发event | fireEvent函数
eg:btn.fireEvent("on FF: var e = document.createEvent("Events"); e.initEvent("click", true, false); element.dispatchEvent(event) |
OK | NO | NO | - | |
39 | 触发event | dispatchEvent函数
eg: var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true); btn.dispatchEvent(evt); |
NO | OK | OK | - |