跨浏览器编程之JavaScript

         刚参加工作的时候,曾经被一位日本高级工程师所折服,他所写的JavaScript代码非常工整、清晰,浏览器差异都非常的清楚。一直都很佩服他,同时很 讨厌浏览器的差异。然而程序员就是这样,很多事情都必须面对,譬如说现在就必须做跨浏览器的应用。网络上没有直接的好咚咚,没办法,一点一滴从零开始积 累,为自己为他人提供便利。

 

<script> function fixWidth() { var d = document.getElementById("div_area_width"); var w = d; while(w) { if (w.tagName == "DIV" && w.className == "post") break; w = w.parentNode; } if (w && d) { var tmp = w.clientWidth - 50; if (tmp <600) { tmp = w.offsetWidth - 50; } d.style.width = tmp; } } fixWidth(); </script>
序号 操作 分类 IE
(6.0)
FireFox
(2.0)
Mozilla
(1.5)
当前
浏览器
备注
1"."访问tag的固有属性OKOKOKOK 
2"."访问tag的用户定义属性
eg: <input type="checkbox" myattr="test" >
OKNO NO undefined可以用 getAttribute函数 替代
3obj.getAttribute 访问tag的固有属性OKOKOKOK

 

4obj.getAttribute 访问tag的用户定义属性
eg: <input type="checkbox" myattr="test" >
OKOKOKOK

 

5document.all访问document的所有子元素
eg:document.all
OKOKNO OK建议用childNodes 对象或者getElementById函数 实现对应操作。
有人说它不能取Div元素,测试结果是可以,不知道是不是还有其它因素会影响测试结果。
6obj.all访问非document元素的所有子元素
eg: document.getElementById("mydiv").all
OKNO NO undefined同上
7getElementById ()根据元素的id/name来取得元素。
如果元素只设置name属性,没有设置id属性。
OKNO NO NO注意: 很多元素是没有name属性的,eg: td, div, span...
8变量名 = ""隐式定义变量-通过向变量名附值方式定义一个新的变量。OKOKOKOK建议:为避免必要的麻烦,显示定义变量。
eg:var tmp;
9id通过id直接调用对象
eg: test_result_1.innerHTML = ""
OKOKNO OKeval() 函数用来执行脚本,所以向eval函数里面传入对象id /name的话,IE同样会返回对象的引用。
建议用document.getElementById(id) 方式调用
注意: 因为这个原因,IE中隐式定义的变量不能和HTML中元素的id/name相同。
10name通过name直接调用对象
eg: test_for_this_name.innerHTML = ""
OKNO NO NO同上/ 原因同7
11name支持的特殊字符( " ! " , "."," @ " , " # " , " $ " , " < ", ...)
eg: document.getElementsByName("aaaa!page");
NO OKOKOK其它的字符没有测试
12tr.innerHTML = ""设置TR元素的内部HTML脚本NO OKOKOK在IE中,table、tr的innerHTML是只读属性,不能够对其直接设置。可以通过insertRow/insertCell 函数进行设置。
13cells对象访问访问tr的cells对象
前提:tr元素是被删除后的tr对象,或者是用cloneNode(true)复制的删除前的tr对象
NO OKOKOK可以将其插入Table再访问,或者可以用getElementsByTagName 函数 对td/th访问。
删除后的rows对象不存在这个问题 。其它元素?
14(index)访问集合类对象
eg: document.
getElementsByTagName("TD")(0)
OKNO NO NO建议用正式的操作符"[]".
15 obj.toString() 取得对象的字符串" [object 对象类型的名称] ".
eg: td == "[object HTMLTableCellElement]"
NO OKOKOK可以省略 toString() 函数,直接用对象来操作。
注:在IE中返回
"[object]"
16 obj.class定义对象的css式样/风格。
eg: td.class="XPstyle";
NO OKNO -无法写测试代码,会有编译错误!可以自己用typeof(class) == null来测试一下,没有异常就在代码中可以使用。
在HTML脚本中用class,但是在Javascript中应该用classname (class是JS的保留关键字).
注意: 用 setAttribute可以把class值设置到对象中去,但是不会被当作css式样来解析。
17const保留关键字,用于定义常量。
eg:const HOURS = 24;
NO OKOK-暂时只能不使用const。
18input.type变更input元素的类型
eg: input.type="button";
NO OKOKOKIE可以初始input元素类型,但是不能变更类型。
如果必须变更,可以用更换input元素的方式。
19obj.children访问对象的子元素集合
eg: document.body.children.length;
OKNO NO undefined可以用childNodes 对象替代。
20node.replaceNode替换新的节点对象
eg: oldNode.replaceNode(newNode);
OKNO NO NO可以用replaceChild 函数替换。
21node.removeNode删除已有节点对象
eg.oldNode.removeNode(true);
OKNO NO NO可以用oldNode.parentNode.removeChild(oldNode) 方式实现。
22node.insertBefore在指定节点对象前面插入一个节点对象
document.body.insertBefore(newN, oldN);
OKOKOKOK 
23obj.parentElement 访问对象的父元素
eg: document.body.parentElement.id;
OKNO NO undefined可以用parentNode 对象替代。
24obj.childNodes.length返回子节点的数量,和tag的数量相同。
eg:document.body.childNodes.length;
OKNO NO NOFF/Mozilla中,空白或者换行是文本 节点,是childNodes的成员。
可以用node.getElementsByTagName() 回避。
25obj.
insertAdjacentElement
向指定的位置插入元素
eg: obj.insertAdjacentElement("beforeBegin",button);
OKNO NO undefinedinsertAdjacentElement 函数和insertAdjacentText 函数也类似。
可以用insertBefore 函数实现类似功能。
26createElement()创建指定类型元素。
前提:元素为HTML脚本
eg:document.createElment("<input type='radio' value='test'>");
OKNO NO NO可以先创建出对象元素,再进行属性设置;或者直接以InnerHTML的形式加到对应位置。
 
27nodeName取对象(tag,attribute,textnode)节点名称
eg: name = obj.nodeName;
OKOKOKOK有人说存在差异,不知道是具体的前提条件,先记录备考。
替代方案:
如果节点 是tag元素可以用"tagName"取值;如果节点 是attribut对象可以用"name"取值;如果节点是textnode元素 可以用nodeType==3判断。
28window.event取得当前的事件对象
eg: window.event;
OKNO NO ?可以主动向事件的响应函数传入event参数。
eg:<a οnclick="javascript:showHelp(event)">help</a>
29event.target取得事件的触发对象
eg: e.target;
NO OKOK可以和srcElement共同使用;可以主动向事件的响应函数传入触发对象元素。
eg:<a οnclick="javascript:showHelp(this, event)">help</a>
30event.srcElement取得事件的触发对象
eg: e.srcElement;
OKNO NO 可以和target共同使用;可以主动向事件的响应函数传入触发对象。
eg: var obj = (e.target) ? e.target : e.srcElemtn;
31event对象属性当前三个浏览器的共同拥有的属性:
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函数注册OKNO NO -小心内存泄漏!!!
事件处理完后一定要调用detachEvent函数销毁事件,而且要注意避免重复注册。
33注册eventaddEventListener函数注册NO OKOK- 
34注册eventobj.onxxx = Function("响应函数名称或代码");方式注册
eg: btn.onclick = Function(doclick);
btn.onclick = Function("return 1+1;");
OKOKOK- 
35销毁eventdetachEvent函数销毁OKNO NO - 
36销毁eventremoveEventListener函数销毁NO OKOK- 
37销毁eventobj.onxxx = null;方式注册
eg: btn.onclick = null;
OKOKOK- 
38触发eventfireEvent函数
eg:btn.fireEvent("onclick");
FF:
var e = document.createEvent("Events");
e.initEvent("click", true, false);
element.dispatchEvent(event)
OKNO NO - 
39触发eventdispatchEvent函数
eg:
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true);
btn.dispatchEvent(evt);
NO OKOK- 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值