DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点数,允许开发人员添加、移除和修改页面的一部分。
注意:IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。
10.1节点层次
节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。
10.1.1Node类型
DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript是作为Node类型实现的;JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本类型与方法
每个节点都有一个nodeType属性,用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示,任何节点类型必居其一:
通过比较上面这些变量,可以容易地确定节点的类型。例如
if(someNode.nodeType==Node.ELEMENT_NODE){ //IE不兼容 因为没有公开Node构造函数 alert("Node is an element."); }
if(someNode.nodeType==1){ //适用于所有浏览器 alert("Node is an element."); }
cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。
cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点数;在参数为false的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为一个“孤儿”,除非通过appendChild(),insertBefore()或replaceChild()将它添加到文档中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOCUMENT OBJECT MODEL</title> </head> <body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <script> var myList=document.getElementsByTagName("ul")[0]; var shallowList=myList.cloneNode(false); var deepList=myList.cloneNode(true); console.log(deepList); //<ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> 深复制
console.log(deepList.childNodes.length); //3
console.log(shallowList); //<ul></ul> 浅复制
console.log(shallowList.childNodes.length) //1 </script> </body> </html>
最后normalize(),这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或DOM操作等原因,可能会出现文本节点不包括文本,或者连续出现两个文本节点的情况。当子某个节点上调用这个方法时,就会在该节点的后代节点中查询上述两种情况。如果找到了空文本节点,就删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。
3.操作节点