javaScript 高级程序设计笔记——DOM

摘要：一类型在中，所有的节点类型都继承自类型。包含文档中所有带特性的元素包含文档中所有的元素包含文档中所有的元素包含文档中所有带特性的元素一致性检测因为分为多个级别，也包含多个部分，因此检测浏览器实现了的哪些部分就十分必要。

DOM是针对HTML和XML文档的一个API
DOM描绘了一个层次化的节点树，允许开发人员轻松自如地添加、删除、替换、修改页面的某一部分

一、节点层次

DOM将HTML文档描绘成一个层次化的节点树，HTML文档中的任何内容都可以通过树中的一个节点来表示：

HTML元素表示成元素节点

HTML属性表示成属性节点

注释表示成注释节点
......

DOM中共有12种节点类型。

（一） Node类型

在javascript中，所有的节点类型都继承自Node类型。Node类型定义了节点类型的一些基本属性和方法，这些属性和方法被所有的节点共享。

1、基本属性

（1）nodeType：表明节点的类型

元素节点.nodeType = 1

文本节点.nodeType = 3

（2）nodeName：节点的名称

元素节点.nodeName = 元素的标签名（大写）

（3）nodeValue：节点的值

元素节点.nodeValue = null

2、节点关系

文档中所有的节点之间存在着各种关系，节点间的关系可以用传统的家族关系来描述。
（1）childNodes属性

作用：返回节点的所有子节点，这些子节点组成NodeList对象（NodeList对象并不是Array实例）

语法：someNode.childNode

访问保存在NodeList对象中的子节点

someNode.childNodes[0];

someNode.childNodes.item(0)

（2）parentNode属性

作用：指向文档树中的父节点

包含在childNodes列表中的所有节点都有相同的父节点

（3）firstChild、lastChild属性

分别指向childNodes列表中的第一个和最后一个节点

（4）previousSibling、nextSibling属性

（5）ownerDocument属性

该属性指向整个文档的文档节点

（6）hasChildNodes()方法

当节点包含一个或多个子节点时返回true

3、操作节点

DOM提供了一些操作节点的方法：

（1）添加节点

appendChild()：向NodeList列表的末尾添加一个节点，并返回新增的节点

insertBefore(newNode,参照节点)：向参照节点的前面插入newNode，并返回新节点

（2）替换节点

replaceChild(新节点，要替换的节点)：要替换的节点被新节点替换，并被方法返回

（3）删除节点

removeChild(要删除的节点)：删除要删除的节点，并返回要删除的节点

注意：上述四个方法操作的是某个节点的子节点，即这四个方法均需要先取得父节点（parentNode）

4、其他方法

（1）cloneNode(true/false)

作用：复制调用该方法的节点

参数为true时：执行深复制，即复制节点及其整个子节点树

参数为false时：执行浅复制，即只复制该节点本身

复制后的节点及其子节点属于文档，但是它没用父节点

（2）normalize()

作用：处理文档树中的文本节点，该方法会删除空文本节点/或者将相邻的文本节点合并为一个文本节点

（二） Document类型

Document类型可以表示HTML页面或者其他基于XML的文档，其中最常见的是作为HTMLDocument 实例的document对象，该对象表示整个HTML页面。Document节点具有下列特征：

nodeType = 9

nodeName = "#document"

nodeValue = null

parentNode = null

ownerDocument = null

1.文档的子节点

DOM规定Document节点的子节点可以是以下几种：
（1）DocumentType

通常标签看成一个与文档其他部分不同的实体，可以通过doctype属性访问该标签

语法：var doctype = document.doctype

因为不同的浏览器对该属性的支持差别很大，所以该属性的用处不大

（2）Element
有两个内置属性可以快速地访问Document节点的子节点：

documentElement：访问文档的元素 //var html = document.documentElement

body:访问元素 //var body = document.body

（3）Comment

按照定义，出现在元素外部的注释应该算是文档的子节点，然而不同的浏览器对这些外部注释的解析不同，故通常不在元素外部使用注释。

（4）ProcessingInstruction

2、文档信息

document对象作为HTMLDocument的一个实例，还有几个标准Document对象没有的属性：

title：获取