首页 测试 体会 查看内容

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

2014-6-25 14:32| 发布者: tianzc| 查看: 635| 评论: 0

摘要:   1、DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现;每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型:1 Node.ELEMENT_NODE2 Node.ATTRIBUTE_NODE3 Node.TEXT_NODE4 Node ...
1     // appendChild 讲解点添加到末尾,若该节点已在DOM结构中,则将其重新放置2      var node = elementNode.appendChild(newNode);3      node === newNode; // true4      var node2 = elementNode.appendChild(otherNode.firstChild);5      node2 === elementNode.lastChild; // true6      node2 === otherNode.firstChild; // false1      //insertBefore,将节点插入到某一节点前面2       var node = elementNode.insertBefore(newNode, null);3       node === elementNode.lastChild; // true4       var node2 = elementNode.insertBefore(newNode, elementNode.firstChild);5       node2 === elementNode.firstChild;// true1     // 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 // true5       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元素
  3、操作DOM节点有以下的方法:

鲜花

握手

雷人

路过

鸡蛋

扫一扫关注最新动态

毒镜头:老镜头、摄影器材资料库、老镜头样片、摄影
爱评测 aipingce.com  
返回顶部