`
zhang19841017
  • 浏览: 79741 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

跨浏览器编程之JavaScript

阅读更多


关键字: javascript

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

 

序号 操作 分类 IE
(6.0)
FireFox
(2.0)
Mozilla
(1.5)
当前 
浏览器
备注
1 "." 访问tag的固有属性 OK OK OK OK  
2 "." 访问tag的用户定义属性
eg: <input type="checkbox" myattr="test" >
OK NO NO undefined 可以用 getAttribute函数 替代
3 obj.getAttribute 访问tag的固有属性 OK OK OK OK

 

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

 

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

 

分享到:
评论

相关推荐

    用于跨浏览器网页编程

    在进行网页开发时,由于不同的浏览器对于HTML、CSS及JavaScript的支持程度不一,开发者往往需要编写能够兼容多种浏览器的代码,即“跨浏览器编程”。本文将从一个具体的示例出发,深入探讨如何通过JavaScript来检测...

    如何编写跨浏览器的javascript程序

    在JavaScript编程领域,编写跨浏览器代码是一项至关重要的技能。由于不同的浏览器对JavaScript的支持程度和实现方式存在差异,因此,为了确保程序在各种浏览器环境中都能正常运行,开发者需要掌握一些核心策略和技巧...

    vc浏览器编程资料及实例集

    VC浏览器编程,主要指的是使用Microsoft Visual C++ (VC++) 进行Internet Explorer (IE) 控件的开发,以便在应用程序中嵌入Web浏览功能。这个压缩包“vc浏览器编程资料及实例集”很可能是包含了一系列关于如何使用...

    javascript 跨浏览器的事件系统

    在探索跨浏览器的事件系统时,首先需要理解事件驱动编程的重要性以及JavaScript的事件模型。事件驱动编程是一种编程范式,在这种范式中,程序的流程由事件控制,例如用户与网页的交互动作、窗口行为、定时器到期等。...

    js 日历 控件(可跨浏览器-国内样式)

    3. **跨浏览器兼容性**:不同的浏览器可能对JavaScript的支持程度不同,因此需要对IE、Firefox、Chrome、Safari、Edge等主流浏览器的差异进行处理,确保代码能在各种环境下正常运行。这通常需要用到像`feature ...

    js跨浏览器是正对目前各浏览器标准不同

    JavaScript(JS)是一种广泛应用于网页和网络应用的编程语言,其跨浏览器兼容性问题一直是开发者面临的挑战。由于各个浏览器在实现JavaScript标准时可能存在差异,因此理解并解决这些差异是提高用户体验和确保代码...

    行业分类-设备装置-多浏览器平台执行javascript脚本的方法及装置.zip

    JavaScript是一种广泛使用的编程语言,用于实现网页的动态功能,但它在不同浏览器上的行为可能有所差异,这需要开发者采取特定策略来处理。 首先,了解JavaScript引擎的差异是关键。每个浏览器都有自己内置的...

    如何在浏览器中运行JavaScript脚本:深入解析与实践指南

    JavaScript是一种高级的、解释型的编程语言。它是一种基于原型、多范式的动态脚本语言,广泛应用于网页开发中,用来增强网页的交互性、动态性,实现客户端的页面行为。本文将详细介绍如何在浏览器中运行JavaScript...

    网络编程基础篇之javascript

    JavaScript,作为全球最广泛使用的编程语言之一,是网络编程领域中的基石,特别是在前端开发中扮演着至关重要的角色。本文将深入探讨JavaScript的基础知识,旨在为初学者提供一个全面的入门指南。 首先,JavaScript...

    《JavaScript编程精解》.pdf

    由于不同浏览器可能对JavaScript的实现存在差异,跨浏览器兼容性成为了前端开发中的一个重要话题。这需要开发者遵循特定的规范,并在必要时使用转译工具或polyfills来确保代码在不同环境中的运行一致性。 10. ...

    JavaScript_DOM编程艺术第二版(中文)

    跨浏览器兼容性是JavaScript DOM编程中的一个挑战,本书可能会讲解如何处理不同浏览器对DOM API的实现差异,以确保代码在各种环境下都能正常运行。了解这些技巧对于开发健壮的Web应用至关重要。 最后,本书可能还会...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    1. JavaScript基础知识:JavaScript是一种在浏览器中运行的脚本语言,它是实现网页动态效果和交云的核心技术之一。要精通DOM编程,首先要对JavaScript语言本身有足够的理解,包括变量、数据类型、运算符、函数、对象...

    c#浏览器编程 包含源代码

    在这个“C#浏览器编程 包含源代码”的主题中,我们将深入探讨如何利用C#来创建一个自定义的浏览器应用。 首先,让我们了解C#在浏览器编程中的基本概念。C#可以用来创建Web浏览器,这通常涉及到使用Windows ...

    JavaScript_高级编程

    JavaScript一种直译式脚本语言,是一种动态...它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

    pwnjs一个用于浏览器开发的Javascript库

    标题"pwnjs一个用于浏览器开发的Javascript库"表明该资源是一个名为pwnjs的JavaScript库,特别设计用于浏览器环境中的开发。这个库可能包含了一系列工具和函数,帮助开发者在Web应用中实现特定的安全或黑客技术相关...

    傲游浏览器主页上javascript焦点图切换效果(iE,firefox).zip

    总的来说,这个项目展示了如何使用JavaScript和可能的CSS技术来创建一个跨浏览器的焦点图组件,它不仅涉及到编程技巧,还涵盖了用户体验设计和前端性能优化等多个方面。对于想要提升Web开发技能的人来说,这是一个...

    checkBox嵌套(跨浏览器)

    使用jQuery库可以简化跨浏览器的JavaScript编程。jQuery提供了`.change()`方法来监听复选框状态变化,并有丰富的选择器和DOM操作方法。此外,还有一些jQuery插件,如iCheck、Uniform等,可以实现统一的复选框样式和...

    网页编程电子书Javascript高级教程.rar

    随着时间的推移,它已经发展成为一个功能强大的、跨平台的编程语言,不仅限于浏览器,还可以用于服务器端开发(如Node.js)以及移动应用开发。 本教程可能涵盖以下关键知识点: 1. **基础语法**:包括变量、数据...

    javascript网络编程基础教程

    JavaScript,作为前端开发的核心语言,其在网络编程中的角色至关重要,因为它可以直接在用户的浏览器中运行,实现与服务器的数据交换。 首先,我们要了解JavaScript的基础知识,包括变量、数据类型、控制结构(如...

    IE编程实例 简单的浏览器的实现

    在IT领域,IE编程是指利用Internet Explorer的API接口来开发应用程序,通常是用于增强或扩展浏览器的功能。本实例是一个简单的浏览器的实现,它基于C++语言,通过解析HTML、处理网络请求以及显示网页内容来模拟IE...

Global site tag (gtag.js) - Google Analytics