章节
问答
笔记
评论
占位
占位

内置方法的兼容处理

因为浏览器大战,前端总是不断的跟各种兼容做斗争,不仅仅只是CSS盒子模型方面,浏览器的接口也存在各种各样的坑,看看在针对DOM的操作接口的处理中遇到兼容问题。

我直接抽取了sizzle里面的功能判断,具体的代码部分我们可以参考右侧代码:

关于属性attributes

简单来说,就是IE8之前的版本,需使用getAttribute('className')才能获得class属性的值,FF及IE8之后的版本则是W3C的标准getAttribute('class')。

这是因为IE 混淆了 DOM 对象属性(property)及 HTML 标签属性(attribute),造成了对 setAttribute、getAttribute 的不正确实现。

关于getElementById

查找元素是最常见的DOM操作,我们可以使用document对象提供的方法:

document.getElementById

取到有id的元素节点:

var div = document.getElementById("myDIV") //取到引用

这个是最常见的处理了,但是如果id是小写:

var div = document.getElementById("mydiV") //无效(IE7之前可以)

可见在IE8之前是不区分大小写的。

除此之外,如果页面有多个ID相同,也只会返回文档中第一次出现的元素。IE8之前在针对表单的处理时候,表单的name与id重名,并且name在id之前,则会返回表单元素:

<input name="aaron" value="测试">
<div id="aaron">重名</div>

此时的结果在IE7则会返回input元素,其余浏览器正常返回div元素的引用。要避免话就尽量命名不重叠。

关于getElementsByTagName

如果选择器是通配符"*"的话,IE6-8会混杂注释节点,所以针对如果是tag为*的情况,我们需要做一个兼容的处理。

byTagName

递归一下,只选取nodeType为1的元素。

getElementsByClassName

可以通过此方法获取到含有某指定class的节点集合,注意是集合,也就是此函数返回一个数组。但是,IE却并不支持这个方法,但这方法却是很有实用性,所以,我们又不得不专门为IE实现这么一个函数。

getClassNames
getClassNames

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?