节点层次
Node类型
所有节点类型都继承自Node
节点类型：
- 元素节点
- 文本节点
- 属性节点
节点类型
属性 说明
nodeType 表明节点类型 Node类型中定义了12个数值常量表示节点类型
nodeName 保存元素的标签名
nodeValue
节点关系
NodeList对象，一种类数组对象，用于保存一组有序的节点。
基于DOM结构动态执行查询的结果
属性 说明
childNodes 返回NodeList对象 访问的话，可以用方括号[num]和item(num)
parentNode 指向文档树中的父节点
previousSibling
nextSibling
firstChild
lastChild
ownerDocument 指向整个文档的文档节点
方法
hasChildNodes() 在节点包含一或多个子节点的情况下返回true
节点操作
插入
方法 appendChild() 用于向childNodes列表的末尾添加一个节点，返回新增节点 insertBefore() 参数(要插入的节点，参照节点)任何DOM节点不能同时出现在文档的多个位置上。
如果传入的节点已经试文档的一部分，那结果就是该节点从原来的位置转移到新位置。移除
方法 replaceChild() reomveChild()
上述四个方法都是某个节点的子节点，必须取得其父节点。
其它方法
方法 cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本 normalize() 处理文档树中的文本节点 主要处理空文本节点，和连续出现的两个空文本节点。Document类型
document对象是HTMLDocument(继承自Document)的一个实例，表示整个HTML页面。
document对象是window对象的一个属性
document节点特征：
- nodeType=9
- nodeName=”#document”
- nodeValue = null
- parentNode = null
- ownerDocument = null
- 其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
文档的子节点
属性 说明
documentElement 始终指向HTML页面中的<html>元素
body 直接指向<body>元素
doctype 取得对<!DOCTYPE>的引用，浏览器支持不一致
注释，不同浏览器的处理也不一致
文档信息
属性 说明
titile 包含着<title>元素中的文本，显示在浏览器窗口的标题栏或标签页
/*网页请求有关*/
URL 包含页面完整的URL
domain 包含页面的域名
referrer 保存着链接到当前页面的那个URL，没有的话是空字符串
/*上述三个职业domain可以设置，如果这回为不包含的域，将出错。如果域名一开始是松散的，就不能将它设置为紧绷的。*/
查找元素
方法
getElementById()
getElementsByTagName() 返回包含零个或多个元素的NodeList，在HTML文档中会返回HTMLCollection。可以通过方括号[num] 或者 item(num)访问，还有length属性，namedItem()方法，听过元素的namedItem特征取得集合中的项。提过了按名称访问["name"].
getElementsByName()
特殊集合
这些集合都是HTMLCollection对象
document.anchors 包含文档中所有带name特性的<a>元素
document.applets 包含文档中的所有de<applet>元素怒，不建议使用
document.forms 包含文档中所有的<form>元素
document.images 包含文档中所有的<img>元素
document.links 包含文档中所有的href特征的<a>元素
DOM一致性检测
属性
document.implementation DOM1级提供了一个方法hasFeature()
文档写入
write()
writel()
open()
close()
Element类型
用于表现XML或HTML元素，提供对元素标签名、子节点即特征的访问。
Elment节点特征：
- nodeType = 1
- nodeName = “元素标签名”
- nodeValue = null
- parentNode = Document 或Element
- 其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference.
HTML元素
html元素存在的标准特征，可以获得或者设置这些标准特征
属性
id
titile
lang
dir
className
所有的HTML元素都是由HTMLElement或者更具体的子类型来表示的。
page263
取得特征
操作特征的3个方法
方法
getAtrribute()
setAtrribute() 特征名和特征值
removeAtrribute()
注意：
- 特征名不区分大小写。
- html5规范：自定义的特征应该加上data-前缀以便验证
两类特殊的属性，在用属性访问和通过getAtrribute()访问的值不相同
- style
- 通过getAttribut()访问，返回的是style包含的css文本
- 通过属性访问，则会返回一个对象
- 像onclick这样的事件处理函数，
- 通过getAttribute访问，会返回字符串
- 通过属性访问，会返回javascript函数
设置特征
在DOM元素添加一个自定义的属性，该属性不会自动成为元素的特征，IE除外
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型
NamedNodeMap 是一个动态几何
元素的每一个特性都是由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。
NamedNodeMap方法
方法
getNamedItem(name)
removeNamedItem(name)
setNameItem(node)
item(pos)
遍历元素的特征是，attributes属性很有用
function outputAtrributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for(i = 0,len=element.attributes.length;i < len ;i ++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if(element.attributes[i].specified){ //兼容IE
pairs.push(attrName +"=\""+ attrValue + "\"");
}
}
return pairs.join(" ");
}
创建元素
createElement() 参数：要创建元素的标签名
元素的子节点
- 存在childNodes中，
- IE和其它浏览器在处理空白的方式上面不同，要注意这点差别
- 可以在getElementsByTagName()方法的前面加上元素，表示这个元素的子节点和后代节点
Text类型
文本节点由Text类型表示，包含可以照字面解释的纯文本内容。
text节点具有的特征：
- nodeType = 3
- nodeName = “#text”
- nodeValue = “节点所包含的文本”
- parentNode = Element
- 不支持(没有)子节点
Text属性和方法
属性
nodeValue 访问Text节点中包含的文本
data 访问Text节点中包含的文本
length 保存着节点中字符的数目
方法
appendData(text)
deleteData(offset,count)
insertData(offset,text)
replaceData(offset,count,text)
splitText(offset)
substringData(offset,count)
创建文本节点
createTextNode()
DOM规范化文本节点
相邻文本节点合并的方法，由Node类型定义，normalize()
浏览器在解析文档时永远不会创建相邻的文本节点。这种情况之后作为执行DOM操作的结果出现。
分割文本节点
Text类提供了一个相反的的方法：splitText()，将一个文本节点分割成两个文本节点，即按照指定的位置分割nodeValue的值。
分割文本节点是从文本节点中提取数据的一种常用DOM解析技术
Comment类型
注释在DOM中通过Comment类型来表示。
Comment节点的特征：
- nodeType = 8
- nodeName= “#comment”
- nodeValue = “注释内容”
- parentNode = Document 或 Element
- 不支持（没有）子节点
Comment类型和Text类型继承相同的基类，用于除了splictText()方法之外的所有方法。
createComment()传递注释文本，创建注释节点
CDATASection类型
只针对基于XML的文档，表示的是CDATA区域
特征：
- nodeType = 4
- nodeName = “#cdata-section”
- nodeValue = CDATA区域内容
- parentNode = Document或Element
- 不支持(没有)子节点
多数浏览器会把CDATA区域错误地解析为Comment或Element。
真正的xml文档，可以通过document.createCDataSection()来创建CDATA区域。
DocumentType类型
仅有Firefox、Safari、Opera支持它。
包含着与文档的doctype有关的信息
特征
- nodeType = 10
- nodeName = doctype
- nodeValue= null
- parentNode= Document
- 不支持(没有)子节点
DOM1级不支持动态创建
DOM1级属性：
name
entities
natations
DocumentFragment类型
DocumentFragment类型在文档中没有对应的标记。
是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源。
文档片段用于不会成为文档树的一部分
特征：
- nodeType = 11
- nodeName = “#document-fragment”
- nodeValue = null
- parentNode = null
- 子节点= Element、ProcessingInstruction、Comment、Text、CDATASection、EntityReference
Attr类型
元素的特征在DOM中以Attr类型来表示。
特征：
- nodeType = 2
- nodeName = 特征名称
- nodeValue = 特征的值
- parentNode = null
- 在HTML中不支持（没哟）子节点
- 在XML中子节点可以是Text或EntityReference
不认为是DOM文档树的一部分
属性：
name
value
specified 用于区别特性是否在代码中指定的，还是默认的
方法：
createAtrribute()传入特征名称并创建新的节点。
动态样式
动态样式：在页面刚加载时不存在的样式。在页面加载完成之后添加到页面中
将元素添加到
而不是元素中，才能保证浏览器中行为一致。function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
注意：加载外部样式文件的过程是异步的，也就加载样式与执行javaScript代码的过程没有固定的次序。
使用