一，节点层次
1,Node类型
Node接口，作为Node类型实现，除IE外都能访问这个类型，所有节点类型共享相同的属性和方法
每个节点都有nodeType属性，表明节点的类型，值如下
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)
为确保跨浏览器兼容，将nodeType属性与数字值进行比较
1）nodeName和nodeValue属性
nodeName节点名
if（someone.nodeType = 1）
nodeName节点名为元素名，此时nodeValue为null
nodeValue节点值
2）节点关系
a)每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList是一种类型数组对象，保存一组有序的节点
访问NodeList中的节点，可以通过方括号，也可以item()方法
var
firstChild = someNode.childNodes[0]
var secondChild =
someNode.childNodes.item(1)
var count =
someNode.childNodes.length
可以将NodeList转换成数组，var ArrayOfNodes =
Array.prototype.slice.call(someNode.childNodes,0);(IE8以上不支持)
为了兼容更多浏览器
function convertToArray(nodes){
var array =
null;
try{array =
Array.prototype.slice.call(nodes,0);}
catch(ex){
array = new
Array();
for(var i = 0,len =
nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return
array;
}
b)每个节点有一个parentNode属性，指向父节点，包含在ChildNodes列表中的每个节点相互之间都是同胞节点
可以通过previousSibling和nextSibling属性访问兄弟节点的前后节点
c)父节点的第一个子节点通过firstChild属性获取，等于someNode.childNodes[0]
最后一个子节点通过lastChild属性获取,等于someNode.lastChild[someNode.childNodes.length-1]
d)hasChildNodes()方法，在节点包含一个或多个子节点的情况下返回true，比检测length值更有用的方法
e)ownerDocument属性，指向表示整个文档的文档节点，表示的是任何节点都属于它所在的文档，
3）操作节点
appendChild()
向childChild列表的末尾添加一个节点，返回新增的节点，
insertBefore()
，要插入的节点，和参照节点，插入的节点会放在参照节点的前面
replaceChild()
,要插入的节点，要替换的节点
removeChild(),移除某个节点，返回值就是这个移除的节点
4）其他方法
cloneNode()
创建调用这个方法的节点的副本，参数为true执行深复制，复制节点和子节点树，参数为false时，只复制一个节点
复制后的节点副本属于文档所有，没有指定父节点，通过appendChild，insertBefore，replaceChild将它添加到文档中
normalize()
找到空的文本节点就删除它，若是找到相邻的文本节点就将他们合并为一个文本节点
2，Document类型
表示整个HTML文档，nodeType为9，nodeName为#document，nodeValue为null，parentNode为null，ownerDocument为null
1）文档的子节点
子节点可以是DocumentType，element，processingInstruction或comment
还有两个内置的访问子节点的快捷方式，DocumentElement属性，始终指向HTML页面中的HTML元素，另一个通过ChildNodes列表访问文档元素
document.documentElement,取得HTML，
document.body取得body
document.doctype
取得<!DOCTYPE> document.doctype
是一个DocumentType节点
2）文档信息
title属性，Document.title
获取<title>中的文本，
URL属性，包含地址栏中显示的URL（不是可以设置的）
domain属性，包含页面的域名（是可以设置的）不能设置为URL中不包含的域
当页面中包含来自其他子域的框架或内嵌框架时，将document.domain设置为相同，就可以实现页面间的javascript通信
还有一个限制就是域名一开始是松散的就无法在设置为紧绷的
referrer属性，保存着链接到当前页面的那个页面的URL（不是可以设置的）
3）查找元素
IE7以上不支持getElementById，IE8不区分getElementById参数的大小写
IE7以上如果那个表单元素的name属性等于指定的ID，并且该元素位于给定ID的元素前面，就会返回这个元素
getElementById()
getElementsByTagName()，返回一个数组，可以通过[]或者item()返回，length返回数组的长度
namedItem()
通过元素的name属性获取集合中的项，参数为要取的项的name值，也可以使用[]
参数传人*
可以获取所有项
getElementByName(),返回给定name特性的所有元素，最常用于单选按钮中（按钮有相同的name值），不用nameItem()获取其中的元素
4）特殊集合
document.anchors
包含文档中所有带name特性的<a>元素
document.applets
包含文档中所有applet元素，这个元素被取消，所有这个属性也不常用
document.forms
包含文档中所有form元素
document.images 包含所有img元素
document.links
包含所有带href特性的<a>元素
5）DOM一致性检测
document.implementation属性用来检测浏览器实现了DOM的哪些部分
DOM1级只为document.implementation.hasFeature(),接收两个参数，要检测的DOM功能的名称及版本号
6）文档写入
document.write() 原样写入字符串，也可以加入标签以字符串形式("<script></script>"),要对""
/
进行转义
document.writeln() 原样写入字符串后加空行
document.open() 打开网页的输出流
document.close() 关闭网页的输出流
window.onload()
事件处理程序，等到页面加载之后延迟执行函数
3，Element类型
nodeType为1，nodeName为元素标签名，nodeValue为null，parentNode可能为Element或Document
返回元素的标签名，可以使用nodeName和tagName，一般在HTML中会返回大写的标签名，比较前使用toLowerCase
1）HTML元素
id
title
lang 元素内容的语言代码
dir 语言方向，ltr从左到右
rtl从右到左
className 即为class属性
2）取得特性
getAttribute() 获取属性
document.getElementById("div1").getAttribute("id")，
给定特性不存在时返回null，也可以获取自定义属性，自定义特性加上data-前缀，特性的名称不区分大小写，
style特性不能通过getAttribute()返回，onclick等事件处理特性不能通过getAttribute()返回
removeAttribute() 删除元素的这个特性包括特性值
3）设置特性
setAttribute() 设置属性,接收两个参数，要设置的特性名（小写形式）和特性值，
也可以直接给属性赋值，div.id
=
"asdg",这种方法不能用于自定义属性
4）attribute属性
Element类型是使用attribute属性的唯一一个DOM节点类型
attribute属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态的集合
元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，
NamedNodeMap拥有getNamedItem(name)
返回nodeName属性等于name的节点
removeNamedItem(name)
从列表中移除nodeName属性为name的节点
setNamedItem(node)
向列表中添加节点，以节点的nodeName属性为索引
item(pos)
返回位于数字pos位置处的节点
removeNamedItem() 和 removeAttribute()
方法相同，都是用于删除某个元素的某个特性
setNamedItem()
添加一个新的特性，传人一个新的特性节点
attributes属性包含一系列节点，每个节点的nodeName就是特性的名称，nodeValue就是特性的值
var
id = element.attributes.getNamedItem("id").nodeValue;
var id =
element.attribtues["id"].nodeValue;
element.attributes["id"].nodeValue =
"someValue"; 重新赋值
遍历元素特性，
function
outputAttributes(element){
var pairs = new
Array(),attrName,attrValue,i,len;
for(i = 0,len =
element.attributes.length;i<len;i++){
attrName =
element.attributes[i].nodeName;
attrValue =
element.attributes[i].nodeValue;
pairs.push(attrName + "=\"" +
attrValue + "\"");
}
return pairs.join("
");
}
IE7以上会返回元素的所有属性，包括没有属性值的属性，
针对此每个特性节点都有一个名为specified的属性，值为true时，表示设定了该属性，值为false时，表示尚未设定该属性
改进后
function
outputAttributes(element){
var pairs = new
Array(),attrName,attrValue,i,len;
for(i = 0,len =
element.attributes.length;i<len;i++){
attrName =
element.attributes[i].nodeName;
attrValue =
element.attributes[i].nodeValue;
if(element.attributes[i].specified){
pairs.push(attrName
+ "=\"" + attrValue + "\"");
}
}
return.pairs.join("
");
}
5）创建元素
document.createElement(),只接受一个参数，为要创建的元素的标签名（不区分大小写）
创新新元素的同时也创建了ownerDocument属性，可以添加子节点，新元素尚未被添加到文档树中，通过appendChild()等方法在文档树中显示
IE中传人整个完整的元素标签，Document.createElement("<div
id=\"myNewDiv\"
class=\"box\"></div>");
可以避免IE7中某些问题，不能动态创建<iframe>元素的name属性，不能通过表单reset()方法重设动态创建的<input>元素
动态创建的type特性值为reset的<button>元素重设不了表单，动态创建的一批name相同的单选按钮彼此毫无关系
if(client.brower.ie
&& client.brower.ie <= 7){
//创建一个name特性的iframe元素
var
iframe = document.createElement("<iframe
name=\"myframe\"></iframe>")
//创建input元素
var input =
document.createElement("<input
type=\"checkbox\">")
//创建button元素
var button =
document.createElement("<button
type=\"reset\"></button>")
//创建单选按钮
var radio1 =
document.createElement("<input type=\"radio\" name=\"choice\" "+"
"value=\"1\">");
var radio2 = document.createElement("<input
type=\"radio\" name=\"choice\" "+"
"value=\"1\">");
}
6）元素的子节点
元素的子节点很多，包括文本节点和元素节点，因浏览器的不同，有的浏览器会把空格当做文本节点，所有操作前要先进行判断
4，Text类型
nodeType为3，nodeName为#text，nodeValue为节点所包含的文本，parentNode为Element，没有子节点
可以通过nodeValue和data访问text节点中包含的文本，对nodeValue的修改也体现在data中
appendData(text)
将text添加到节点的末尾
deleteDate(offset,count)
从offset指定的位置开始删除count个字符
insertData(offset,text)
从offset指定的位置插入text
replaceDate(offset,count,text)
从offset指定的位置到offset+count的位置，用text替换
splitText(offset)
从offset指定的位置将当前的文本节点分割为两个文本节点
substringData(offset,count)，提取从offset指定的位置开始到offset+count为止处的字符串
length属性，保存文本节点中字符的数目，nodeValue.length
和 data.length
都保存相同的值
1）创建文本节点
document.createTextNode("")，创建新的文本节点，创建文本节点的同时创建了ownerDocument属性，创建的节点是孤立的
创建的文本节点一般添加为创建的元素节点的子节点，可以为一个元素节点添加多个文本节点
2）规范化文本节点
ormalize()
在一个包含两个或多个文本节点的父元素上调用时会合并成一个文本节点，
文本节点的nodeValue等于将合并前的每个文本节点的nodeValue值拼接起来的值
在父元素上调用
自动合并它的文本子节点的值，返回子节点长度时返回1
3）分割文本节点
splitText()
将一个文本节点分割成两个文本节点，传人一个索引值，按照指定的位置分割nodeValue值
原来的文本节点将包含从开始到指定位置之前的内容，新文本节点包含剩下的文本
返回一个新文本节点，该节点与原节点的parentNode相同
5，Comment类型
注释节点
弄得Type为8，nodeName为#comment，nodeValue为注释的内容，parentNode为document或element
没有子节点
可以通过nodeValue和data获取注释的内容
<div><!-- 注释内容
--></div> 这样的comment节点也可以通过父节点获取
document.createComment()
创建一个comment节点，参数直接传人注释内容
6，CDATASection类型
针对XML文档，nodeType为4，nodeValue为CDATA区域中的内容，nodeName为#cdata-section，parentNode为document或element，无子节点
7，DocumentType类型
nodeType为10，nodeName为doctype的名称，nodeValue为null，parentNode为document，没有子节点
DOM1中documentType不能创建，只能通过解析文档代码的方式创建，支持它的浏览器会把它保存在document.doctype中
8，DocumentFragment类型
文档片段，在文档中没有对应的标记，nodeType为11，nodeName为#document-fragment，nodeValue为null，parentNode为null，子节点很多
文档片段不能直接添加到文档中，在里面保存将来可能会添加到文档的中节点
document.createDocumentFragment()
创建文档片段
将文档中的节点添加到文档片段中就会移除该节点
文档片段中创建的节点不属于文档，要使用appendChild()等添加到文档中，文档片段永远都不会属于文档
9，Attr类型
属性节点，nodeType为2，nodeName为特性的名称，nodeValue为特性的值，parentNode为null，没有子节点
不认为是文档树的一部分
Attr对象有三个属性，name，value，specified
name就是特性名称，于nodeName相同
value就是特性的值，于nodeValue相同
specified是一布尔值，区别特性是代码中指定的还是默认的
document.createAttribute("")
设置特性
设置的属性要通过setAttribute()添加到元素中去
二，DOM操作技术
1，动态脚本
插入外部文件和插入javascript代码
var
script = document.createElement("script");
script.type =
"text/javascript";
script.src="sliend.js";
//外部文件
document.body.appendChild("script");
code =
document.createTextNode("function(){}"); //添加内部函数
script.appendChild(code);
script.text =
"function(){}";
IE将script视为一个特殊的元素，不允许DOM访问其子节点可以通过text属性来指定javascript代码
function
loadScriptString(code){
var script =
document.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text
=
code;
}
document.body.appendChild(script);
}
2，动态样式
动态添加外部样式
function
loadStyle(url){
var link =
document.createElement("link");
link.rel =
"stylesheet";
link.style = "text/css";
link.href = url;
var
head =
document.getElementsByTagName("head")[0];
head.appendChild(link);
}
动态添加内部样式
var
style = document.createElement("style");
style.type =
"text/css";
try{
style.appendChild(document.createTextNode("body{background-color:red}"));
}catch(ex){
style.styleSheet.cssText
= "body{background-color:red}";
}
var head =
document.getElementsByTagName("head")[0];
head.appendChild(style);
IE中多次使用styleSheet.cssText属性或者将其设为空字符串会是浏览器崩溃
3，操作表格
<table>元素中的属性和方法
caption 保存对caption元素的指针
tBodie 是一个tbody元素的HTMLCollection，即通过getElmeentsByTagName(tbody)的数组
tFoot
保存tbody元素的指针
tHead 保存thead元素的指针
rows 一个表格所有行的HTMLCollection
createTHead()
创建thead元素
createCaption() 创建caption元素
createTFoot()
创建tfoot元素
deleteTHead()
删除thead元素
deleteTFoot() 删除tfoot元素
deleteCaption()
删除caption元素
deleteRow() 删除指定位置的行
insertRow()
向row集合中指定的位置添加一行
<tbody>元素中的属性和方法
rows： 保存着tbody元素中行的HTMLCollection
deleteRow(pos) 删除指定的行
insertRow(pos) 向row集合中的指定位置插入一行，返回新插入行的引用
<tr>元素添加的属性和方法如下
cells 保存着tr元素单元格的HTMLCollection
deleteCell(pos) 删除指定位置的单元格
insertCell(pos) 插入新的单元格
4，使用NodeList
ModeList和NamedNodeMap和HTMLCollection都是动态的会随着页面元素的变化随时变化
原文：http://www.cnblogs.com/b0xiaoli/p/3630905.html