一、node类型
nodeType属性:表明节点的类型
nodeName
nodeValue
2、节点关系
childNode
parentNode
previousSibling
nextSibling
firstChild
lastChild
hasChildNodes():这个方法在节点包含一或多个子节点的情况下返回true
DOM节点之间的关系如下图所示:
3、操作节点
appendChild(node):用于向childNodes 列表的末尾添加一个节点。返回值是插入的节点。
var obody = document.body;
var oP = document.getElementById("p");
var node = document.createElement("strong"); //创建一个元素节点
var textNode = document.createTextNode("I am strong");//创建一个文本节点
node.appendChild(textNode); // 文本节点挂载到元素节点strong上
var returnedNode = obody.appendChild(node); //strong 挂载到body节点上
console.log(returnedNode == node); //true
console.log(obody.lastChild == node); //true
注意：如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档中的多个位置上。
insertBefore(newChild, refChild)
这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。
replaceChild(newChild, oldChild)
接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。
removeChild()
与使用replaceChild()方法一样，通过removeChild()移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。
4、其他方法
cloneNode(boolean)
用于创建调用这个方法的节点的一个完全相同的副本。
注意：cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性，例如事件处理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切都不会复制。IE 在此存在一个bug，即它会复制事件处理程序，所以我们建议在复制之前最好先移除事件处理程序。
normalize()
这个方法唯一的作用就是处理文档树中的文本节点。
二、Document类型
JavaScript 通过Document 类型表示文档。在浏览器中，document 对象是HTMLDocument（继承自Document 类型）的一个实例，表示整个HTML 页面。而且，document 对象是window 对象的一个属性，因此可以将其作为全局对象来访问。Document 节点具有下列特征：
nodeType 的值为9；
nodeName 的值为"#document"；
nodeValue 的值为null；
parentNode 的值为null；
ownerDocument 的值为 null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。
1、文档的子节点
documentElement属性
该属性始终指向HTML 页面中的元素
documentBody属性
指向body元素
document.doctype
var doctype = document.doctype; //取得对的引用
2、文档信息
document.title
document.URL
document.domain 可以设置
document.referrer 获取来源页面的URL
由于跨域安全限制， 来自不同子域的页面无法通过JavaScript 通信。而通过将每个页面的document.domain 设置为相同的值，这些页面就可以互相访问对方包含的JavaScript 对象了
3、查找元素
document.getElementById
document.getElementsByTagName
getElementsByName()
4、特殊集合
document.anchors，包含文档中所有带name 特性的元素；
document.applets，包含文档中所有的
5、DOM一致性检测
document.implementation.hasFeature(feature, version)
6、文档写入
document.write()
document.writeIn()
document.open()
document.close()
三、Element类型
Element 类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
- nodeType 的值为1；
- nodeName 的值为元素的标签名；
- nodeValue 的值为null；
- parentNode 可能是Document 或Element；
- 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection 或EntityReference。
nodeNametagName访问元素的标签名
这里的元素标签名是div，它拥有一个值为"myDiv"的ID。可是，div.tagName 实际上输出的是"DIV"而非"div"。在HTML 中，标签名始终都以全部大写表示；而在XML（有时候也包括XHTML）中，标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在HTML 还是XML 文档中执行，最好是在比较之前将标签名转换为相同的大小写形式
1、HTML元素
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用。
className，与元素的class 特性对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class 是ECMAScript 的保留字
var div = document.getElementById("myDiv");
console.log(div.id);
console.log(div.className);
console.log(div.title);
console.log(div.lang);
console.log(div.dir);
2、获取特性
getAttribute()
注意：有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同
第一类：style属性
3、设置特性
setAttribute()
这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值。
注意：这里我们要区分[特性]和][属性]的概念。
- 特性：比如class、id……
- 属性：包括特性，可以自定义属性。
当我们为一个元素添加一个属性时，如果是特性，则可以直接添加，如果是自定义属性，必须用setAttribute()
removeAttribute
这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性
4、attributes属性
5、创建元素
document.createElement()
6、元素的子节点
childNodes
四、Text类型
文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含HTML 代码。Text 节点具有以下特征：
nodeType 的值为3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个Element；
不支持（没有）子节点。
nodeValue 属性或data 属性: 访问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 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count)：提取从offset 指定的位置开始到offset+count 为止处的字符串。
1、创建文本节点
document.createTextNode(text)
2、规范化文本节点
normalize()
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello! Tom");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Jerry");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
console.log(element.childNodes.length); //2
element.normalize();
console.log(element.childNodes.length); //1
console.log(element.firstChild.nodeValue); //hello! TomJerry
3、分割文本节点
Text 类型提供了一个作用与normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode 相同。来看下面的例子。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello Tom");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue); //hello
console.log(newNode.nodeValue); // Tom
console.log(element.childNodes.length); //2
五、Attr类型
attr表示特性类型