浏览器兼容性测试小记-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、禁止选择网页内容:

  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、在浏览器中打开新窗口问题:

  View Code

  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中不支持

  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方式

最新内容请见作者的GitHub页:http://qaseven.github.io/

时间: 2024-09-20 18:48:05

浏览器兼容性测试小记-DOM篇(一)的相关文章

IETester中文免费版 – 最佳网页IE浏览器兼容性测试工具

IETester中文免费版 – 最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存) 对于很多拥有自己博客或者接触网页制作的朋友,肯定会遇到自己辛苦写好的页面在不同的浏览器下显示出来的效果截然不同吧,喜欢追求完美的朋友就肯定希望能尽量在不同浏览器下对页面进行测试并保证其正常显示了.当然,像FireFox.Safari.Opera等浏览器还可以随意地安装卸载,然而,最麻烦的莫过于微软的"IE"系列了. 基本上你不能用常规的方法同时在一个系统中安装IE5.IE6.IE7甚至IE8

13个不同浏览器兼容性测试的免费软件工具

前端开发人员最头疼的,莫过于形形色色的浏览器间的兼容性问题.每天绞尽脑汁地为这些本不应该存在的东西费尽心思.由于各个浏览器内核及解析方式的不同,使得相同的前端代码不能实现相同的效果.所以,培养良好标准的代码编写习惯的同时,熟练掌握浏览器兼容性测试的常用工具也是必需的了.这里是网络上传播较多的13个不同操作系统中各色浏览器兼容性测试的软件工具. HTML和CSS验证 首先让我们先看一看检查验证HTML与CSS的方法.我应该说到的是由于我在MAC上工作,会略微偏向于MAC.不要担心,仍然有许多平台独

10款很棒的浏览器兼容性测试工具

  对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Superpreview 这是为微软自己发布的跨浏览器测试工具,您可以同时查看您的网页在

11款超赞的浏览器兼容性测试工具

  对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Superpreview 这是为微软自己发布的跨浏览器测试工具,您可以同时查看您的网页在多个浏览器的呈现情况,对页面排版进行直观的比较. IETester 专门用于测试网页在IE浏览器各个版本中兼容性的工具,版本包含IE5.5至IE9的各个版本,很不错的一款工具,推荐. BrowserShots BrowserShot

浏览器兼容性测试,现在有没有一款软件能模拟主流浏览器(火狐,ie,google)

问题描述 浏览器兼容性测试,现在有没有一款软件能模拟主流浏览器(火狐,ie,google) 浏览器兼容性测试,现在有没有一款软件能模拟主流浏览器(火狐,ie,google) 解决方案 分别下载,然后进行测试.没有这样的软件 解决方案二: 一般是IE+chrome可以一起,Firefox没见过合并的

再谈浏览器兼容性测试

今天跟大家聊一个老生常谈的话题:浏览器兼容性测试. 测试国内网站的同学是不是已经非常头疼了,因为面对的浏览器除了国际大牌如IE, Chrome, Firefox, Opera, Safari, 还有国内诸多屌丝级的浏览器如:360安全浏览器,360极速浏览器,360影视浏览器(360碉堡了,会不会再搞出一些购物浏览器,买火车票浏览器啊?)搜狗双核浏览器,猎豹,淘宝,世界之窗,百度浏览器,还没完呢,听说过枫树浏览器吗?没听过的赶紧去科普科普吧!另外我今天还被不知不觉安装了云帆影视浏览器.再想想这些

网站的浏览器兼容性测试

中介交易 SEO诊断 淘宝客 云主机 技术大厅 浏览器是互联网产品客户端的核心软件,也是网站访问的必备软件.不同厂商的浏览器对Java.JS.ActiveX.plin-ins的支持承担也各有差异.即使是同一厂家的浏览器,也会存在不同的版本的问题.例如,ActiveX是Microsoft的产品,是为Internet Explore而设计的;JS是Netscape的产品等.另外,框架和层次结构风格在不同的浏览器中也有不同的显示.目前最为常用的浏览器为IE6.0.IE7.0,但由于操作习惯的问题,还有

多浏览器兼容性测试整体解决方案 F2etest

F2etest 详细介绍 F2etest 是一个面向前端.测试.产品等岗位的多浏览器兼容性测试整体解决方案. 在之前,我们一般有三种解决方案: 本机安装大量的虚拟机,一个浏览器一个虚拟机,优点:真实,缺点:消耗硬盘资源,消耗CPU资源,打开慢,无法同时打开多个虚拟机 使用IeTester等模拟软件,优点:体积小,资源消耗小,缺点:不真实,很多特性不能代表真实浏览器 公用机器提供多种浏览器,优点:不需要本地安装,不消耗本机资源,缺点:资源利用率低,整体资源消耗非常恐怖 现在,有了F2etest,一

浏览器兼容性小记-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.