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

1、DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现;每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型:

Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE
Node.NOTATION_NODE

其中,1、2、3、9、10、11最常用,要确定某种元素类型可以使用以下方法:

elementNode.nodeType === Node.ELEMENT_NODE // 非IE,IE9以下无法访问Node类型
elementNode.nodeType === 1 // 所有浏览器

2、以下方法返回的都是原生的NodeList对象

elementNode.childNodes
document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName() //返回HtmlCollection对象,与NodeList类似,多了一个namedItem('name')方法
document.getElementsByTagNameNS()

NodeList是一种类数组对象,有length属性,但并不是Array的实例,访问NodeList中的节点对象可使用item方法或[]语法。每次访问NodeList对象实际上都是重新进行一次查询,因此通常可以将NodeList转化为数组对象。

function nl2array(nodeList){
       var array = null;
       try{
         array = Array.prototype.slice.call(nodeList, 0);// FF
       }catch(){
         array = [];
         for (var i = 0, len = nodeList.length; i < len; i++){
            array.push(nodeList[i]);
         }
       }
       return array;
     }

3、操作DOM节点有以下的方法:

// appendChild 讲解点添加到末尾,若该节点已在DOM结构中,则将其重新放置
     var node = elementNode.appendChild(newNode);
     node === newNode; // true
     var node2 = elementNode.appendChild(otherNode.firstChild);
     node2 === elementNode.lastChild; // true
     node2 === otherNode.firstChild; // false

1      //insertBefore,将节点插入到某一节点前面
2       var node = elementNode.insertBefore(newNode, null);
3       node === elementNode.lastChild; // true
4       var node2 = elementNode.insertBefore(newNode, elementNode.firstChild);
5       node2 === elementNode.firstChild;// true

1     // replaceNode 使用新节点替换旧子节点,返回被替换节点
2       var node = elementNode.replaceChild(newNode, elementNode.lastChild);

1     // removeChild,想要删除某节点必须通过该节点的父级元素
2       var node = elementNode.removeChild(elementNode.firstChild);
3       elementNode.parentNode.removeChild(elementNode);

//cloneNode,该方法只会复制元素中的html特性,
      //IE中有一bug,他会复制元素的事件处理程序,在使用该方法时最好将事件处理程序去掉
      var node = elementNode.cloneNode(true);
      node.childNodes.length > 0 // true
      var node1 = elementNode.cloneNode(false);
      node1.childNodes.length === 0 //false

4、document对象是HTMLDocument类型的实例,所有浏览器中都可以访问HTMLDocument类型的构造函数和原型。document中访问子节点有如下快捷方式:

1         document.documentElement // 指向<html>元素
2       document.body // 指向body元素
3       document.doctype //指向<!DOCTYPE>的引用,IE8之前将该元素当做Node.COMMENT_NODE类型,IE9、FF、Chrom将该元素作为document的第一个子节点
4       document.head || document.getElementsByTagName('head') //HTML5中新加的属性

5、document.getElementById('id'),IE8及较早版本中不区分id的大小写;IE7及早期版本中有bug:

1     <input type="text" name="element" />
2     <div id="element"></div>
3     // 元素a拥有name与某元素b的id重复,且在a在b之前,则调用该方法会返回a元素
4       document.getElementById('element'); // input元素

6、所有HTML元素都是HTMLElement类型的实例,继承自Element类,比如:HTMLBodyElement、HTMLFormElement、HTMLFrameElement等,除IE外的浏览器都可以访问这些类型的构造函数及原型。IE中将comment节点作为element类型的派生类,因此调用document.getElementsByTagName('*')会将comment节点一并返回。

 

7、html元素有Attribute(特性)跟Property(属性)的区分。

操作特性的方法主要有getAttribute()、setAttribute()、removeAttribute(),这三个方法可以操作以HTMLElement类型属性形式定义的特性(id、class、title、lang、dir),和自定义属性。如:<div id="element" myAttr="myself"></div> element.getAttribute("myAttr")。

属性是指该元素作为javascript对象,除以上特性外一切可以通过点语法访问的属性,如innerHTML、nodeType等。

特性可以出现在html元素声明中,属性不可以(出了也没用);特性可以通过css属性选择符语法来查询元素,属性不可以

 

8、element.attributes属性是一个NamedNodeMap对象,与NodeList类似。该属性返回所有在element中声明的特性,IE中会返回所有可能的特性,但在声明的特性中有一个specified属性,该属性为true则为以声明特性。

 

9、IE9之前不会解析文本之间的空白节点,如下:

<ul id="mylist">
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>
    mylist.childNodes === 3; //IE8
    mylist.childNodes === 7; //FF

如果只想访问元素子节点可以使用如下api:

childElementCount       //返回子元素节点个数
      firstElementChild       //第一个元素子节点
      lastElementChild        //最后一个元素子节点
      previousElementSibling  //前一个兄弟元素
      nextElementSibling      //后一个兄弟元素
      children                //返回所有的元素子节点
时间: 2024-12-13 04:48:50

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

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

浏览器兼容性测试小记-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中的元素:f

Dom与浏览器兼容性说明_DOM

作为一个Web前端工作者,你是否在工作中常被浏览器兼容性问题所困惑.例如Css样式? 明明在 IE浏览器里显示一切正常的网页.到了FireFox或谷歌浏览器中却乱作一团.或许你在使用JavaScript和Dom编写网页脚本时,也遇到过类似问题. 明明在FireFox浏览器里运行正常的脚本.到了IE里却出现错误. 比如说获取触发js事件的源目标.还有鼠标位置或元素位置问题.动态为元素绑定事件等...我将在下面列举部份Dom指令在IE和FireFox等浏览器 不兼容性的问题!限于篇幅.我不在该页对提

JavaScript中解决多浏览器兼容性23个问题的快速解决方法_javascript技巧

一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

Javascript 多浏览器兼容性问题及解决方案_javascript技巧

CSS 多浏览器兼容性问题及解决方案 一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:

css与javascript跨浏览器兼容性总结_javascript技巧

本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

Web字体格式介绍及浏览器兼容性一览

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及各浏览器兼容情况. Web字体格式介绍TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输

js在浏览器兼容教程:DOM方法及对象引用

文章简介:js在浏览器兼容教程:DOM方法及对象引用. 1. getElementById [分析说明]先来看一组代码: <!-- input对象访问1 --><input id="id" type="button" value="click me" ōnclick="alert(id.value)"/> 在Firefox中,按钮没反应,在IE中,就可以,因为对于IE来说,一个HTML 元素的 ID 可

本地IIS上发布的网站测试浏览器兼容性 服务器IP无效

问题描述 本地IIS上发布的网站测试浏览器兼容性 服务器IP无效 我在本地发布IIS上发布了一个网站 在用BrowserShots.org 在线测试浏览器兼容性的时候报错,说服务器的IP127.0.0.1无效? 解决方案 127.0.0.1是你本机地址..BrowserShots.org 怎么可能访问到你的电脑..你要发布网站后在再试.如果没有服务器,设置路由器开放80端口指向你的电脑,然后去路由器查看你公网ip地址,贴公网的ip地址,而不是局域网的 解决方案二: BrowserShots.or