javascript学习笔记之DOM
DOM(文档对象模型)，描述了一个层次化的节点树
一、DOM NODE相关公共属性与方法
DOM中所有节点都实现了NODE接口，该接口的公共属性和方法如下：
1.节点基本属性
1）NodeType 节点类型，利用12个数值来表示。常见的有：1代表元素节点，2代表属性节点，3代表文本节点，8代表注释节点，9代表document,11代表iframe
2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型.例：如果是元素节点，那么nodeName的值为元素的标签名，nodeValue为null.
2.节点关系相关属性
I.childNodes属性，返回一个NodeList对象，这是一个有生命，会呼吸的对象，能够实时，动态的反映节点结构。具有length属性，也可以利用方括号或者item()访问其中的节点。
II，parentNode属性，previousSibling属性，nextSibling属性，firstChild属性，lastChild属性。
IV，ownerDocument属性，该属性指向整个文档的文档节点Document.
如果想要的知识元素节点，那么对应的属性如下：
childNodes children
firstChild firstElementChild
lastChild lastElementChild
previousSibling previousElementSibling
nextSibling nextElementSibling
childNodes.length childElementCount
3.操作节点相关方法
hasChildNodes()方法
1）appendChild() 父节点调用，返回新增的节点；如果新增的节点已经是文档的一部分了，那么实现效果实际上是节点的移动，结果就是该节点从原来位置转移到新位置。
2）insertBefore() 父节点调用，接收两个参数。要插入的节点和作为参照的节点。
3)replaceChild() 父节点调用，接收两个参数，要插入的节点和要替换的节点。
4)removeChild() 父节点调用
5)cloneNode() 复制节点，如果要深复制，传入参数true，注意该节点不会复制节点的javascript属性，如事件处理程序等。
6)normalize()，其 作用在于处理文档树中相邻的文本节点
4，查找节点的相关方法
1)document.getElementById() 返回元素，
2)[document|parentNode].getElementsByTagsName() 返回NodeList,其他同上
3）document.getElementsByName() 查找单选按钮等的时候很有用
4）DOM扩展：document.querySelector();参数为css选择符，返回查找到的第一个元素
5)DOM扩展：document.querySelectorAll();参数为css选择符，返回查找到的所有元素
5，补充
虽然DOM为操作节点提供了丰富的方法，但是在需要给文档插入大量新html标记的情况下，通过DOM仍然非常麻烦，因为不仅要创建一系列的DOM节点，还要小心地按照正确的顺序插入，同时性能也不高。因此DOM扩展中定义了一下属性：
1.innerHTML属性 在读模式下，innerHTML返回与调用元素的所有子节点对应的html标记。在写模式下，innerHTML会根据制定的值创建新的DOM树，然后用这个DOM树替换掉原来元素的所有子节点。
2）outerHTML属性 在读模式下，outerHTML返回与调用元素的所有子节点对应的html标记。在写模式下，outerHTML会根据制定的值创建新的DOM树，然后用这个DOM树完全替换掉原来元素。
注意的是，为了提高内存和性能，在使用innerHTML，outterHTML属性时候，最好手工删除要被替换元素的所有事件处理程序和JavaScript对象属性。
二、document节点类型
其nodeType为9，nodeName为document，nodeValue为null
1.特有属性
1)document.docType属性，指向DocumentType子节点
2）document.documentElement属性，指向html元素
3）document.body属性，指向body元素
4）document.title属性，指向文档标题
5）document.url/domain/referer属性，url包含页面完整URL，domain包含页面域名，referer保存者链接到当前页面的前一个页面的链接（这些特性其实都存在于html头部中）
6）document.forms 可以获得页面所有的form元素
7)document.images 可以获得页面所有的images元素
8)document.anchors 可以获得页面所有带有name属性的<a>元素
9)document.links 可以获得页面所有带有href属性的<a>元素
10）document.compatMode='CSS1Compat' 标准模式下，'BackCompat' 混杂模式。这与meta中的定义有关。
2,特有方法
2）write(),writeln()用于页面的输出流；
3）open()，close()用于打开和关闭输出流，如果是在页面加载期间使用write(),writeln(),则不需要用到上述两个方法
4）createElement()方法 创建element类型的节点
5)createTextNode()方法，创建Text类型的节点，接受一个参数，（用得不多，完全可以使用innerHTML搞定）
6)createAttributeNode()方法，创建特性节点(用得不多，完全可以使用setAttribute/getAttribute搞定)
三、Elemment类型
nodeType值为1，nodeName为标签名，nodeValue为null
1，特有属性
1)tagName属性 和 nodeName的返回值相同
2)id属性
3）title属性
4)className属性
5）attributes 除非要遍历元素的所有attribute，否则这个属性用的不多
6）style属性，如style.backGround 等，注意的是，这只能获取html代码中内嵌的样式，对于<style>标签中设置的样式，以及外联样式表中的样式，是没有办法获取的。
2，特有方法
1）getAttribute(),setAttribute()和removeAttribute()
四、Text类型
NodeType为3，NodeName为#text,nodeValue为节点所包含的文本,
1)data属性，和nodeValue的返回值相同。可以通过appendData(),deleteData(),insertData(offset,text),replaceData(offset,count,text),substringData(offset,count)等方法进行操作
2）length属性，返回文本中字符数目
3)要访问Element元素中的文本，利用
div.firstChild.data来访问。或者div.childNodes[0].nodeValue来访问。不过很多情况下都使用父节点的innerHTML属性
四、documentFragment类型
NodeType为11，NodeName为#document-fragment,nodeValue为null
documentFragment可以作为一个仓库使用，防止频繁的利用javascript进行dom操作，来提高性能。
var fragment=document.createDocumentFragment(); var ul=document.getElementById('list'); var li=null; for(var i=0;i<5;i++){ li=document.createElement('li'); li.innerHTML='item'+i; fragment.appendChild(li); } ul.appenChild(fragment);
五、操作表格
除了使用innerHTML之外，操作表格还有一些相对简单的API，如下：
var table=document.createElement('table'); var tbody=document.createElement('tbody'); tabel.appendChild(tbody); tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].innerHTML='cell1';
六：元素滚动
元素节点都可以调用的关于滚动的方法有：
scrollIntoViewIfNeeded(alignCenter):当前元素在视口不可见的时候，滚动浏览器窗口或者容器元素，让它可见。如果已经可见，那么什么都不做。alignCenter若为true，则尽量让元素显示在视口中央。
scrollByLines(lineCount):将元素内容滚动指定的行高
scrollByPages(pageCount):将元素滚动指定的页面高度
