浏览器兼容性小记-DOM篇(一)

简介:

1、childNodes引入空白节点问题:使用childElementCount或children

2、innerText: FF中不支持该属性,使用textContent代替

3、变量名与某HTML对象id相同时,引用该变量只会取得id名与其相同的html对象(ie8-);声明变量时前面一律加上var,尽量避免id名与变量名相同

4、为ele.style.property赋值时一律带上单位:e.style.height= 34 + ‘px’

5、禁止选择网页内容:


//IE
document.onSelectStart = function(){
  return false;
}
//FF
-moz-user-select: none;
//Chrome
-webkit-user-select: none;


6、访问form中的元素:ff只支持document.formName.elements['elementName']的方式,ie下可以使用document.formName.item('name');统一使用elements的方式;凡是遇到集合类对象(NodeCollection、NodeList)一律使用collection['name']的方式

7、自定义html元素特性问题:IE下可以使用e.selfAttr = variable/e.selfAttr方式来设值和取值,FF中只能使用e.setAttribute(attr, value)/e.getAttribute('attr')方式

8、input元素的type特性问题:IE下该属性是只读的,FF中可以动态设置;一律不能修改,若需要修改则删除原来元素,重新创建新元素

9、window.location.href问题:就浏览器可以通过这种方式来获取当前页面url;应当统一使用window.location来方位页面url,如:location.hostname,location.port,location.pathname

10、在浏览器中打开新窗口问题:


//子窗口通过window.opener方式来访问父窗口,父窗口通过parentWin来控制子窗口
parentWin = window.open(url, name, properties);

11、body载入问题:FF中的body对象在body标签为载入完全时即可访问,IE下必须完全读入后才执行

12、function、new function(){}、new Function('.....')三者的区别

13、FF中不支持e.parentElement方式方位父元素,只能使用e.parentNode方式

14、Table操作问题,IE中无法使用innerHTML方式对table和tr进行操作;一般方法是借助js类库,将innerHLML转化为dom节点,并插入到tbody下

15、IE下不支持使用e.setAttribute方式来整体设值style属性问题:同时使用e.setAttribute('style', '.......')和e.style.cssText = ‘。。。。。。。’方式来设置

16、document.createElement('<div class="name"></div>')方式创建html元素在FF中不支持


//IE
document.createElement("<input type='radio'>");
//FF
var ipt = document.createElement('input');
ipt.type = "radio";

17、iframe问题:

<iframe src="xxx.html" id="frameId" name="frameName" />

IE 中可以通过window.top.frmaeId或window.top.frameName方式来访问farme;FF中只支持第二种方式;IE在iframe资源未加载完成时无法访问iframe.contentWindow对象

18、url encoding 问题:encodeURIComponent适用于对url后的参数编码、encodeURI:主要用于location对象跳转时对整个url编码

19、节点插入问题:IE:insertAdjacentElement(position,src);FF:insertBefore(src, ref)

20、IE9以下不能访问html元素的构造器,如判断元素是否为HTMLElement方法只能使用:e.nodeType === 1不能使用 e instanceof HTMLElement方式


目录
相关文章
|
JavaScript 前端开发 HTML5
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
27天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
27天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)