DOM node类型 document类型 element类型 text类型 DocumentFragment类型
Node类型
Html元素通过元素节点表示
特性通过特性节点表示
注释通过注释节点表示
属性通过属性节点表示
1.1节点信息
nodeType(每个节点都有，表示节点类型)，常用的如下：
1:element
2:attribute
3:text
9:document
nodeName(元素标签名)
nodeValue
1.2节点关系
每个节点都有一个childNodes属性，其中保存着一个nodeList对象。
父节点.childNodes[i] = 父节点.childNodes.item(i) 获得第i+1个子节点
父节点.childNodes.length 获得子节点个数
父节点.hasChildNodes(); 返回布尔值，判断是否有子节点
节点.parentNode 返回父节点
父节点.firstChild 返回第一个子节点
父节点.lastChild 返回最后一个子节点
节点.previousSibling 返回同列表中上一个节点
节点.nextSibling 返回同列表中下一个节点
节点.ownDocument 指向表示整个文档的文档节点
1.3操作节点
SomeNode指父节点
添加子节点：someNode.appendChild(newNode); 添加到末尾，返回新增节点
插入子节点：someNode.insertBefore(newNode, someNode.childNodes[i]); 返回新插入节点
替换子节点：someNode.replaceChild(newNode,someNode.childNodes[i]); 返回被替换的节点
移除子节点：someNode.removeChild(someNode.childNodes[i]); 返回被移除节点
1.4其他方法
创建副本：someNode.cloneNode(boolean);
Boolean为true时，进行深复制，复制整个节点树，但不复制js定义的 事件
Boolean为false时，进行浅复制，复制节点本身，但不复制js定义的 事件
Document类型
2.1document节点特征
nodeType:9;
nodeName:”#document”;
nodeValue:null;
parentNode:null;
ownerDocument:null
2.2文档子节点
指代html：
document.doucmentElement;
document.childNodes[0];
document.firstNode;
指代body：
document.body;
指代<!Doctype>：
document.doctype
2.3文档信息
document.title title内容
document.URL 地址栏中显示的URL
document.domain 页面域名
document.referrer 链接到当前页面的那个页面的URL
2.4查找元素
document.getElementById(元素ID); 当id唯一时，返回一个标签元素
document.getElementsByTagName(元素标签名); 返回的是零个或者多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象。HTMLCollection有一个方法是namedItem(name值)，使用这个方法可以通过元素的name值取得集合中的项。
document.getElementsByName(name值); 跟上一个方法类似。
document.querySelector(选择器) 在该文档元素的范围内查找匹配的元素，返回第一个元素
document.querySelectorAll(选择器) 在该文档元素的范围内查找匹配的元素，返回全部元素
2.5特殊集合
document.anchors 包含文档中含有name属性的a元素
document.applets 包含文档中所有的applet元素
document.forms 包含文档中所有的form元素
document.images 包含文档中所有的image元素
document.links 包含文档中含有href属性的a元素
这些都是集合，都需要.[i]和.item(i)获得其中一个元素
1.6DOM中各个功能检测
document.implementation.hasFeature(要检测的DOM功能的名称，版本号); 返回boolean
Ture：代表此浏览器支持这个给定的名称和版本号
例如：document.implementation.hasFeature(“CSS2”,”2.0”);
Element类型
3.1document节点特征
nodeType:1;
nodeName:元素标签名;
nodeValue:null;
parentNode:可能是Document或者是Element;
ownerDocument:HTMLDocument
元素.tagName 取得元素标签名
3.2 HTML元素
每一个Html元素都存在下列标准的特性：
id
title
lang
dir 语言方向
className
只有这5个特性才能以属性的形式添加到DOM对象中。对于自定义的属性，只能通过getAttribute、setAttribute进行操作。
例如：
<div id=”a” data-my=”hello”></div>
var p = document.getElementById("a");
p.mycolor = “red”;
console.log(p.getAttribute("mycolor ")); //null
alert(p.id); //a
alert(P.data-my); //undefined
console.log(p.getAttribute("data-my")); //hello
p.setAttribute("data-he","world");
console.log(p.getAttribute("data-he")); //world
3.3取得特性，设置特性
元素.getAttribute(“id”); 自定义和公认的特性都能通过这个方法得到。
<p id="a" data-my="hello">4154513212</p>
var p = document.getElementById("a");
p.getAttribute("data-my") = hello
元素.setAttribute(“id”,”a”); 自定义和公认的特性都能通过这个方法设置。
p.setAttribute("data-he","world");
元素.removeAttribute(“id”);
3.4 attributes属性
元素.attributes 返回一个NameNodeMap，类似NodeList。
Attributes属性中包含一系列节点，每个节点的nodeName是特性的名称，节点的nodeValue是特性的值
NameNodeMap还有以下方法：
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
element.attributes.getNamedItem(“id”).nodeValue; //id的值
element.attributes[ “id”].nodeValue; //id的值
一般还是用3.3提到的三个方法。
3.5创建元素
document.createElement(“div”);
document.createElement(“<div id=”a”>dhiqweohdwei</div>”); IE支持
通过appendChild()、insertBefore()、replaceChild()添加到文档树中。
3.6元素子节点
元素可以有任意数目的子节点和后代节点，它们可能是元素、文本、注释或者处理指令。
注意IE与其他浏览器对于子节点解析不一样。
例如:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
对于IE，ul的子节点个数是3；其他浏览器是7,3个li，4个文本（表示li元素之间的空白符）
当变成<ul><li>1</li><li>2</li><li>3</li></ul>，此时所有浏览器都认为ul只有3个节点
元素.childNodes 只包含它的子节点
元素.getEelementsByTagName（name），搜索起点是当前元素，可以通过这个访问元素的子节点或后代节点
Text类型类型
4.1document节点特征
nodeType:3;
nodeName:“#name“;
nodeValue:节点所包含的文本;
parentNode: Element;
ownerDocument: HTMLDocument
文本节点.data = 文本节点.nodeValue 节点所包含的文本
文本节点.length 保存节点中字符的数目
文本节点的方法：
text为字符串
appendData(text); 将text字符串添加到文本节点的末尾
deleteData(offset,count); 从offset指定的位置开始删除count个字符
insertData(offset,text); 从offset指定的位置插入text
replaceData(offset,count,text); 用text代替从offset指定的位置开始到offset+ count为止的文本处
splitText(offset); 在offset处将当前文本节点分成2个文本节点
substringData(offset,count); 提取从offset指定的位置开始到offset+ count为止的字符串
4.2创建文本节点
document.createTextNode(要插入节点中的文本);
4.3合并多个相邻文本节点
父节点.normallize()；
4.3分割文本节点
文本节点.splitText(offset);
Comment类型
此为注释类型。
nodeType:8;
nodeName:“#comment“;
nodeValue:注释内容;
parentNode: 可能是doucument或Element;
ownerDocument: HTMLDocument
没有子节点
创建comment节点：document.createComment(注释内容);
CDATASection类型
只针对基于XML的文档。
DocumentType类型
nodeType : 10
nodeName : doctype的名称
nodeValue ： null
parentNode ： Document
只有火狐、谷歌、Opera支持。
<!Doctype html>
Document.doctype.name = HTML <!DOCTYPE 之后的文本
DocumentFragment（文档片段）类型
这个类型在文档中没有对应的标记。
nodeType:11;
nodeName:“#document-fragment“;
nodeValue:null;
parentNode: null;
ownerDocument: HTMLDocument
虽然不能把文档片段直接添加到文档中，但可以将它作为仓库，可以在里面保存将来可能会添加到文档中的节点。
创建：document.createDocumentFragment();
如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会在浏览器中看到。添加到文档片段中的新节点同样也不属于文档。通过appendChild()、insertBefore()将文档片段添加到文档中。
例如：
var fragement = document.createDocumentFragment();
var ul = document.createElement("ul");
for(var i = 0; i<3;i++){
var li = document.createElement("li");
li.appendChild(document.createTextNode("Item"+i));
fragement.appendChild(li);
}
ul.appendChild(fragement);
document.body.appendChild(ul);
这样做防止浏览器反复渲染新信息。
