首页 web前端 js教程 javascript 浏览器兼容性代码一览表

javascript 浏览器兼容性代码一览表

Jun 01, 2016 am 09:54 AM
javascript 兼容性

序号

操作

分类

IE
(6.0)

FireFox
(2.0)

Mozilla
(1.5)

当前
浏览器

备注

1

"."

访问tag的固有属性

OK

OK

OK

OK

 

2

"."

访问tag的用户定义属性
eg: myattr="test">

OK

NO

NO

OK

可以用getAttribute函数 替代

3

obj.getAttribute

访问tag的固有属性

OK

OK

OK

OK

 

4

obj.getAttribute

访问tag的用户定义属性
eg: 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

OK

同上

7

getElementById()

根据元素的id/name来取得元素。
如果元素只设置name属性,没有设置id属性。

OK

NO

NO

OK

注意:很多元素是没有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

OK

同上/ 原因同7

11

name

支持的特殊字符("!",".","@","#","$"," eg: document.getElementsByName("aaaa!page");

NO

OK

OK

NO

其它的字符没有测试

12

tr.innerHTML = ""

设置TR元素的内部HTML脚本

NO

OK

OK

NO

在IE中,table、tr的innerHTML是只读属性,不能够对其直接设置。可以通过insertRow/insertCell函数进行设置。

13

cells对象访问

访问tr的cells对象
前提:tr元素是被删除后的tr对象,或者是用cloneNode(true)复制的删除前的tr对象

NO

OK

OK

undefined

可以将其插入Table再访问,或者可以用getElementsByTagName函数 对td/th访问。
删除后的rows对象不存在这个问题。其它元素?

14

(index)

访问集合类对象
eg: document.
getElementsByTagName("TD")(0)

OK

NO

NO

OK

建议用正式的操作符"[]".

15

obj.toString()

取得对象的字符串"[object 对象类型的名称]".
eg: td == "[object HTMLTableCellElement]"

NO

OK

OK

NO

可以省略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

NO

IE可以初始input元素类型,但是不能变更类型。
如果必须变更,可以用更换input元素的方式。

19

obj.children

访问对象的子元素集合
eg: document.body.children.length;

OK

NO

NO

OK

可以用childNodes对象替代。

20

node.replaceNode

替换新的节点对象
eg: oldNode.replaceNode(newNode);

OK

NO

NO

OK

可以用replaceChild函数替换。

21

node.removeNode

删除已有节点对象
eg.oldNode.removeNode(true);

OK

NO

NO

OK

可以用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

OK

可以用parentNode对象替代。

24

obj.childNodes.length

返回子节点的数量,和tag的数量相同。
eg:document.body.childNodes.length;

OK

NO

NO

OK

FF/Mozilla中,空白或者换行是文本节点,是childNodes的成员。
可以用node.getElementsByTagName()回避。

25

obj.
insertAdjacentElement

向指定的位置插入元素
eg: obj.insertAdjacentElement("beforeBegin",button);

OK

NO

NO

OK

insertAdjacentElement函数和insertAdjacentText函数也类似。
可以用insertBefore函数实现类似功能。

26

createElement()

创建指定类型元素。
前提:元素为HTML脚本
eg:document.createElment("");

OK

NO

NO

OK

可以先创建出对象元素,再进行属性设置;或者直接以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:help

29

event.target

取得事件的触发对象
eg: e.target;

NO

OK

OK

可以和srcElement共同使用;可以主动向事件的响应函数传入触发对象元素。
eg:help

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

-

 

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

蓝牙5.3和5.2版本的比较及差异解析 蓝牙5.3和5.2版本的比较及差异解析 Dec 28, 2023 pm 06:08 PM

现在有不少手机都号称支持蓝牙5.3版本,那么蓝牙5.3和5.2的区别是什么呢,其实它们本质上都是蓝牙5的后续更新版本,在大部分的性能和功能上是没有多少区别的。蓝牙5.3和5.2的区别:一、数据速率1、5.3能够支持更高的数据速率最高可达2Mbps。2、而5.2只能最高达到1Mbps,则说明5.3能够更快、更稳定的传输数据。二、加密控制增强2、蓝牙5.3提高了加密密钥长度控制选项,提高了安全性,能够更好的连接门禁等设备。3、同时,由于管理员控制更加简单,在连接的时候还能更加的便捷、快速,5.2则无

i7-7700无法升级至Windows 11的解决方案 i7-7700无法升级至Windows 11的解决方案 Dec 26, 2023 pm 06:52 PM

i77700的性能运行win11完全足够,但是用户却发现自己的i77700不能升级win11,这主要是受到了微软硬性条件的限制,所以只要跳过该限制就能安装了。i77700不能升级win11:1、因为微软限制了cpu的版本。2、intel只有第八代及以上版本可以直升win11。3、而i77700作为7代,无法满足win11的升级需求。4、但是i77700在性能上是完全能流畅使用win11的。5、所以大家可以使用本站的win11直装系统。6、下载完成后,右键“装载”该文件。7、再双击运行其中的“一键

Go语言在Linux系统上的兼容性如何? Go语言在Linux系统上的兼容性如何? Mar 22, 2024 am 10:36 AM

Go语言在Linux系统上的兼容性非常好,它能够无缝地在各种Linux发行版上运行,并且支持不同架构的处理器。本文将介绍Go语言在Linux系统上的兼容性,并通过具体的代码示例展示其强大的适用性。1.安装Go语言环境在Linux系统上安装Go语言环境非常简单,只需要下载对应的Go二进制包并设置相关环境变量即可。以下是在Ubuntu系统上安装Go语言的步骤:

可以使用蓝牙耳机在飞行模式下吗? 可以使用蓝牙耳机在飞行模式下吗? Feb 19, 2024 pm 10:56 PM

随着现代科技的不断发展,无线蓝牙耳机已经成为人们日常生活中不可或缺的一部分。无线耳机的出现解放了我们的双手,让我们可以更自由地享受音乐、通话和其他娱乐活动。然而,当我们乘坐飞机时,我们往往会被要求将手机设置为飞行模式。那么问题来了,飞行模式可以用蓝牙耳机吗?在本文中,我们将探讨这个问题。首先,让我们来了解一下飞行模式的作用和含义。飞行模式是手机的一种特殊模式

详解win11对win10软件的兼容性问题 详解win11对win10软件的兼容性问题 Jan 05, 2024 am 11:18 AM

win10系统中的软件都已经进行了很完美的优化,但是对于最新的win11用户大家肯定都很好奇是不是可以支持这款系统,所以下面就给你们带来了win11支不支持win10软件详细介绍,快来一起了解一下吧。win11支持win10软件吗:1、Win10系统的软件甚至是Win7系统的应用都可以很好的进行兼容。2、经过使用Win11系统的大神反馈目前还没有出现应用不兼容的问题。3、所以大家可以放心大胆的升级,不过普通的用户建议等到Win11发布正式版再升级。4、Win11不仅是兼容性好,而且还有Windo

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

WIN10兼容性没了进行找回的操作步骤 WIN10兼容性没了进行找回的操作步骤 Mar 27, 2024 am 11:36 AM

1、右键点击程序,发现在打开的属性窗口中,没有找到【兼容性】选项卡。2、在Win10桌面,右键点击桌面左下角的开始按钮,在弹出的菜单里选择【运行】菜单项。3、这时会打开Win10的运行窗口,在窗口中输入gpedit.msc,然后点击确定按钮。4、这时就会打开本地组策略编辑器窗口,在窗口中依次点击【计算机配置/管理模板/Windows组件】菜单项。5、在打开的Windows组件菜单中,找到【应用程序兼容性】菜单项,然后在右侧窗口中找到【删除程序兼容性属性页】设置项。6、右键点击该设置项,在弹出的菜

解决 PHP 函数兼容性问题的最佳实践 解决 PHP 函数兼容性问题的最佳实践 May 01, 2024 pm 02:42 PM

最佳实践解决PHP函数兼容性问题:使用版本化的函数名称(例如:array_map_recursive())利用函数别名(例如:functionarray_map($callback,$array){...})检查函数可用性(例如:if(function_exists('array_map_recursive')){...})使用命名空间(例如:namespaceMyNamespace{...})

See all articles