我的测试人生........
【转】浏览器兼容性测试小记-DOM篇（二）
上一篇 /
下一篇 2014-05-29 23:33:03
/ 个人分类：测试技术
1、DOM中的所有节点都继承自Node类型，IE9之前将DOM节点作为COM对象来实现；每个DOM节点都有一个nodeType属性来表明节点类型，总共有12个类型：
1 Node.ELEMENT_NODE 2 Node.ATTRIBUTE_NODE 3 Node.TEXT_NODE 4 Node.CDATA_SECTION_NODE 5 Node.ENTITY_REFERENCE_NODE 6 Node.ENTITY_NODE 7 Node.PROCESSING_INSTRUCTION_NODE 8 Node.COMMENT_NODE 9 Node.DOCUMENT_NODE 10 Node.DOCUMENT_TYPE_NODE 11 Node.DOCUMENT_FRAGMENT_NODE 12 Node.NOTATION_NODE |
其中，1、2、3、9、10、11最常用，要确定某种元素类型可以使用以下方法：
elementNode.nodeType === Node.ELEMENT_NODE // 非IE,IE9以下无法访问Node类型
elementNode.nodeType === 1 // 所有浏览器
2、以下方法返回的都是原生的NodeList对象
1 elementNode.childNodes
2 document.getElementsByName()
3 document.getElementsByClassName()
4 document.getElementsByTagName() //返回HtmlCollection对象，与NodeList类似，多了一个namedItem('name')方法
5 document.getElementsByTagNameNS()
NodeList是一种类数组对象，有length属性，但并不是Array的实例，访问NodeList中的节点对象可使用item方法或[]语法。每次访问NodeList对象实际上都是重新进行一次查询，因此通常可以将NodeList转化为数组对象。
1 function nl2array(nodeList){ 2 var array = null; 3 try{ 4 array = Array.prototype.slice.call(nodeList, 0);// FF 5 }catch(){ 6 array = []; 7 for (var i = 0, len = nodeList.length; i < len; i++){ 8 array.push(nodeList[i]); 9 } 10 } 11 return array; 12 }3、操作DOM节点有以下的方法： 1 // appendChild 讲解点添加到末尾，若该节点已在DOM结构中，则将其重新放置 2 var node = elementNode.appendChild(newNode); 3 node === newNode; // true 4 var node2 = elementNode.appendChild(otherNode.firstChild); 5 node2 === elementNode.lastChild; // true 6 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); |
1 //cloneNode，该方法只会复制元素中的html特性， 2 //IE中有一bug，他会复制元素的事件处理程序，在使用该方法时最好将事件处理程序去掉 3 var node = elementNode.cloneNode(true); 4 node.childNodes.length > 0 // true 5 var node1 = elementNode.cloneNode(false); 6 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之前不会解析文本之间的空白节点，如下： 1 <ul id="mylist"> 2 <li>li1</li> 3 <li>li2</li> 4 <li>li3</li> 5 </ul> 6 mylist.childNodes === 3; //IE8 7 mylist.childNodes === 7; //FF |
如果只想访问元素子节点可以使用如下api： 1 childElementCount //返回子元素节点个数 2 firstElementChild //第一个元素子节点 3 lastElementChild //最后一个元素子节点 4 previousElementSibling //前一个兄弟元素 5 nextElementSibling //后一个兄弟元素 6 children //返回所有的元素子节点 |
|
|
收藏
举报
TAG:
