常用DOM整理

前言：

html为document搭建了一棵DOM树，这棵树就是有一系列Node节点所构成的。他为我们定义了文档的结构。

Node类型：

Node.ELEMENT_NODE(1);      //元素节点较常用
Node.ATTRIBUTE_NODE(2);    //属性节点较常用
Node.TEXT_NODE(3);          //文本节点较常用
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);   //文档节点较常用
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

相关函数：

1、取得节点：

 document.getElementById('element');
 document.getElementsByTagName('element');         返回类数组对象
 document.getElementsByName('element');            返回类数组对象
 document.getElementsByClassName('className')      返回类数组对象,IE7及以下并不支持；
 document.querySelectorAll('class' | 'element')    返回类数组对象

2、遍历节点

 查找子节点：element.childNodes        返回类数组对象
 查找第一个子节点：element.firstChild
 查找最后一个子节点：element.lastChild
 查找父元素：element.parentNode
 查找前一个兄弟元素： element.previousSibling
 查找后一个兄弟元素： element.nextSibling

3、获取节点信息

 获取元素或者属性节点的标签名称：elementNode.nodeName
 获取文本节点的内容：    textNode.nodeValue;
 获取并设置元素节点的内容(可能会包含HTML标签)：  elementNode.innerHTML
 获取并设置元素节点的纯文本内容：element.innerText(IE) | element.textContent(FF) 
 获取属性节点的值：      attrNode.getAttribute(AttrName);
 设置属性节点的值：      attrNode.setAttribute(AttrName,AttrValue);
 获取节点的类型：        node.nodeType;
  元素节点： 1；
  属性节点： 2；
  文本节点： 3；
  文档节点： 9；
  注释节点： 8；

4、操作节点

 创建元素节点：       document.createElement('element');
 创建文本节点：       document.createTextNode('text');
 创建属性节点：       document.createAttribute('attribute');