创建节点
1、document.createElement()
2、document.createTextNode()
3、document.createDocumentFragment()
4、document.createComment()
document.createElement()
通过指定名称创建一个元素
document.createElement还能创建对当前浏览器不支持的标签名，在IE6-8下，这是一个著名的hack
可以使用IE的条件编译来让IE浏览器执行只针对它的代码
document.createTextNode()
创建文本节点
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
document.createDocumentFragment()
定义和用法
createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。
document.createComment()
createComment() 方法可创建注释节点。
高效创建节点的方法
1、innerHTML
2、outerHTML
3、innerText
4、outerText
innerHTml
用来设置或获取当前标签的起始和结束里面的内容
使用innerHTml的限制
字符串的最左边不能出现空白，IE6-8会自动移除掉它
大多数浏览器不会对script标签进行脚本执行操作
不能单独创建meta，style，link等元素，一定要在前面加上一些字符。
实际上大多数浏览器通过innerHTml插入元素并不会执行其中的脚本，IE8及更早版本是唯一能够在这个情况下执行此脚本的浏览器，但必须满足一些条件
（1）为script标签添加defer属性（只有IE支持defer）
（2）script标签要在有作用域的元素之后，script被认为是无作用域的元素，也就是在页面中是看不到的元素，与style或注释元素类似
outerHTML
outerHTML返回调用它的元素及所有子节点的HTML标签
outerHTML写模式会替换掉节点
innerText
设置或获取位于对象起始和结束标签内的文本
outerText
设置或获取整个元素包括子节点
查找节点
firstChild 第一次子节点
lastChild 最后一个子节点
parentNode 父节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
childNodes 获取子节点，childNodes属性返回包含被选节点的子节点的NodeList。
提示：如果选定的节点没有子节点，则该属性返回不包含节点的NodeList。如需循环子节点列表，使用nextSibling属性，要比使用父对象的childNodes列表效率更高。childNodes会将空格也识入节点
documentElement 属性以一个元素对象返回一个文档的文档元素，文档返回对象为HTML元素
tabName 返回元素的标签名，在HTML中，tagName属性的返回值始终是大写的
ownerDocument 属性以document对象的形式返回节点的owner document，在HTML中，HTML文档本身始终是元素的ownerDocument
hasChildNodes 方法返回true，如果指定节点拥有子节点，否则返回false
children 返回一个Node的子elements（ Internet Explorer 6 - 8 支持该属性，但是可能会错误地包含注释 Comment 节点。）
以下方法查找的仅元素节点（以下方法IE8不支持，可看MDN查看补丁方法）
firstElementChild 第一个元素节点
lastElementChild 最后一个元素节点
nextElementSibling 下一个元素兄弟节点
previousElementSibling 上一个元素兄弟节点
childElementCount 表示给定元素的子元素数（不支持IE8）
遍历实现
例子：
var str = '';
function travel(space,node) {
if(node.tagName){
str += space + node.tagName + '<br/>'
}
var len = node.childNodes.length;
for(var i=0;i<len;i++){
travel(space+'_|',node.childNodes[i])
}
}
travel('',document)
document.write(str)
节点遍历去除空白节点
nodeType
当nodeType的值为1时是元素节点，为3时是文本节点
类数组对象HTMLCollection
Ele.getElementsByTagName() 返回带有指定标签名的对象的集合。
document.scripts 返回一个HTMLCollection对象,包含了当前文档中所有<script>元素的集合.
document.links 返回一个包含文档中所有具有 href 属性值的 <area> 元素 <a> 元素的集合。
document.images 返回当前文档中所有image元素的集合
document.forms 返回当前文档中<from>元素的集合
tr.cells cells 集合返回表格中所有单元格的一个数组。
select.options options集合可返回包含<select>元素中所有<option>的一个数组
类数组对象NamedNodeMap
NamedNodeMap接口表示属性节点Attr对象的集合。尽管在NamedNodeMap里面的对象可以像数组一样通过索引来访问，但是它和NodeList不一样，对象的顺序没有指定。
可以使用attribute对象返回NamedNodeMap
类数组对象的动态性
NodeList，HTMLCollectios，NamedNodeMap三个集合都是动态的，是有生命、有呼吸的对象。
它们实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映这些对象中。
每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息
节点查找
getElementById()和getElementsByName()使用时前面要加document，其他的一些方法不限制
getElementById()和getElementsByName()和getElementsByTagName()在IE6-IE8中可以使用，getElementsByClassName()IE9和以上支持，querySelector()和querySelectorAll()在IE8和以上都支持
getElementById()
getElementsByName() 方法可以返回带有指定名称的对象的集合，该方法与getElementById()方法相似，但是它查询元素的name属性，而不是id属性。另外，因为一个文档中的
name属性可能不唯一（如HTML表单中的单选按钮通常具有相同name属性），所有getElementByName()方法返回的是元素的数组，而不是一个元素
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.all() all[]是一个多功能的类似数组的对象，它提供了对文档中所有HTML元素的访问。
all[]已经被document接口的标准的getElementById()方法和getElementByTagName()方法和document对象的getElementsByName()方法所取代。尽管如此，这个all[]数组在已有的代码中仍然使用
all[]包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提起它们。然而，更为常见的是使用all[]数组，根据它们HTML属性name和id来访问元素。如果多个元素拥有指定的name,将得到共享同一名称的元素的一个数组。
操作节点
添加节点 appendChild()
appendChild()方法向节点添加最后一个子节点。也可以使用appendChild()方法从一个元素向另一个元素中移动元素。
例子：
<body>
<ul id="myUI">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var myUI = document.getElementById('myUI');
var txt = document.createTextNode('4');
var li = document.createElement('li');
li.appendChild(txt);
myUI.appendChild(li);
var firstLi = myUI.firstElementChild;
myUI.appendChild(firstLi);
</script>
</body>
insertBefore()
insertBefore()方法在指定的已有子节点之前插入新的子节点。也可以使用 insertBefore()方法插入/移动已有元素。
该节点有两个参数，第一个参数是要插入的内容，第二个参数是要插入的位置，第二个参数可以为null,当第二个参数为null时则插入到最后
例子：
<body>
<ul id="myUI">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var el = document.getElementById('myUI');
var newItem = document.createElement('li');
var textNode = document.createTextNode('4');
var moveNode = el.getElementsByTagName('li')[0];
newItem.appendChild(textNode);
el.insertBefore(newItem,null);
el.insertBefore(moveNode,el.getElementsByTagName('li')[0]);
</script>
</body>
replaceChild()方法
用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
parentNode.replaceChild(newChild,oldChild);
newChild用来替换oldChild的新节点，如果该节点已经存在于DOM树种，则它会被从原位置删除。
oldChild被替换掉的原始节点。
replacedNode和oldChild相等。
例子：
<body>
<ul id="myUI">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var el = document.getElementById('myUI');
var li0 = el.getElementsByTagName('li')[0];
var li1 = el.getElementsByTagName('li')[1];
var newLi = document.createElement('li');
var newTxt = document.createTextNode('二');
var newLi1 = document.getElementsByTagName('li')[2];
newLi.appendChild(newTxt);
el.replaceChild(newLi,li1);
el.replaceChild(newLi1,li0);
</script>
</body>
cloneNode()
返回调用该方法的节点的一个副本
var dupNode = node.cloneNode(deep);
node 将被克隆的节点
dupNode 克隆生成的副本节点
deep 是否采用深度克隆，如果为true，则该节点的所有后代节点也会被克隆，如果为false，则只克隆该节点本身。
例子：
<body>
<ul id="myUI">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="divUI">
</div>
<script>
var ul = document.getElementById('myUI');
var div = document.getElementById('divUI');
var cloneUI = ul.cloneNode(true);
cloneUI.id = 'childUI';
div.appendChild(cloneUI);
</script>
</body>
normalize()
合并相邻的Text节点 IE8以上都支持
例子：
<script>
var div = document.createElement('div');
var textNode = document.createTextNode('DOM节点');
div.appendChild(textNode);
var textNode2 = document.createTextNode('之节点操作');
div.appendChild(textNode2);
document.body.appendChild(div);
console.log(div.childNodes.length); //2
div.normalize();
console.log(div.childNodes.length); //1
</script>
splitText()
按照指定的位置把文本节点分割为两个节点 IE8以上都支持
返回新的文本节点
例子：
<body>
<script>
var div = document.createElement('div');
var textNode = document.createTextNode('DOM探索之节点操作篇');
div.appendChild(textNode);
document.body.appendChild(div);
var newNode = div.firstChild.splitText(5);
document.write(div.firstChild.nodeValue);
document.write('<br>'+newNode.nodeValue);
document.write(div.childNodes.length);
</script>
</body>
删除节点
removeChild()
removeChild()方法指定元素的某个指定的子节点以Node对象返回被删除的节点，如果节点不存在则返回null
例子：
<body>
<ul id="el">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var el = document.getElementById('el');
el.removeChild(el.getElementsByTagName('li')[1]);
</script>
</body>
removeNode()
IE的私有实现，将目标节点从文档中删除，返回目标节点，参数是布尔值，默认值是false，只删除目标节点并且保存子节点，如果传入true的话，那么就和removeChild()是一样的了
例子：
<body>
<ul id="el">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var el = document.getElementById('el').getElementsByTagName('li')[0];
var removeNode = el.removeNode(true);
</script>
</body>
innerHTML
<body>
<div id="el"></div>
<script>
var div = document.createElement('div');
document.write(div.parentNode); //此时谷歌和IE浏览器均显示为null
document.body.removeChild(document.body.appendChild(div));
document.write(div.parentNode); //此时谷歌上显示的是null,但是IE8上显示的不是，会造成内存泄漏
document.write(div.parentNode.nodeType);
var el = document.getElementById('el');
document.body.innerHTML = '';
document.write(el.parentNode);//此时所有浏览器显示的都是null
</script>
</body>
deleteContents()
textContent