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>标签看成一个与文档其他部分不同的实体，可以通过doctype属性访问该标签
- 语法：var doctype = document.doctype
- 因为不同的浏览器对该属性的支持差别很大，所以该属性的用处不大
（2）Element
有两个内置属性可以快速地访问Document节点的子节点：
- documentElement：访问文档的<html>元素 //var html = document.documentElement
- body:访问<body>元素 //var body = document.body
（3）Comment
按照定义，出现在<html>元素外部的注释应该算是文档的子节点，然而不同的浏览器对这些外部注释的解析不同，故通常不在<html>元素外部使用注释。
（4）ProcessingInstruction
2、文档信息
document对象作为HTMLDocument的一个实例，还有几个标准Document对象没有的属性：
- title：获取<title>元素中的文本，即当前页面的标题 //document.title
- URL：返回地址栏中的URL
- domain：页面的域名
- referrer：返回链接到当前页面的URL
3、查找元素
（1）getElementById()
（2）getElementsByTagName()
- 该方法返回一个HTMLCollection对象，作为一个“动态”集合，该对象与NodeList很相似
-
访问HTMLCollection对象中元素的方法:
（假设, var images=document.getElementsByTagName("img");）- images[0]
- images.item(0)
- images.namedItem("myImage")=images["myImage"] //获取<img name="myImage"/>的图片
（3）getElementsByName()
4、特殊集合
为了方便访问文档的常用部分，document对象还提供了一些特殊的集合，这些集合都是HTMLCollection对象。
- document.anchors：包含文档中所有带name特性的<a>元素
- document.forms：包含文档中所有的<form>元素
- document.images：包含文档中所有的<img>元素
- document.links：包含文档中所有带href特性的<a>元素
5、DOM一致性检测
因为DOM分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要。
- document.implementation属性就可以实现检测浏览器对DOM版本的支持情况
- document.implementation.hasFeature(要检测的DOM功能名称，版本号)，若浏览器支持给定名称和版本的功能，该方法返回true。
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
