第10 章 DOM

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.操作节点

 

posted @ 2017-05-12 15:39  阿波  阅读(135)  评论(0编辑  收藏  举报