Javascript DOM基础

DOM是针对XML的基于树的API，它与语言无关，实现方式有很多种（各语言基本都有自己的实现）。
不过我们经常用的，是JavaScript 下的dom针对xhtml的操作，只是dom的一个分支应用。

名词解释：
Dom：文档对象模型。Document object model
Bom：浏览器对象模型，也可以叫窗口对象模型。（window object model.）
API：应用编程接口。DOM其实可以看作一种API。
Node：节点。节点分为：元素节点，属性节点，文本节点。元素节点包含属性节点和文本节点。

DOM树结构：
Document - 最顶层节点，其他节点附属于它
DocumentType - DTD 引用节点
DocumentFragment - 可以像 Document 一样保存其他节点
Element - 表示起始标签和结束标签之间的内容
Attr - 表示属性名和 value
Text - 表示标签之间的文本，或者 CDATA section 包含的文本
CDataSection -  节点
Entity - Entity 定义节点，<!ENTITY foo "foo">
EntityReference - 实体引用节点
ProcessingInstruction - PI 节点
Comment - 注释节点
Notation - 表示 DTD 中定义的记号

节点常量值
ELEMENT_NODE---------------------------1
ATTRIBUTE_NODE-------------------------2
TEXT_NODE---------------------------------3
CDATA_SECTION_NODE------------------4
ENTITY_REFERENCE_NODE--------------5
ENTITY_NODE------------------------------6
PROCESSING_INSTRCTION_NODE-----7
COMMENT_NODE--------------------------8
DOCUMENT_NODE------------------------9
DOCUMENT_TYPE_NODE ---------------10
DOCUMENT_FRAGMENT_NODE---------11
NOTATION_NODE-------------------------12

 

演示代码：

<style type="text/css">
body{background-color:#EEEEEE; font-size:12px;line-height:22px;}
span{border:#333333 1px dashed; padding:2px;}
</style>
<script language="javascript" type="text/javascript">
function nodetype(){
var a=document.createElement("div");
var c=document.createElement("span");
var b=document.createTextNode("this is text");
c.appendChild(b); //文本添加到元素节点
a.appendChild(c);  //span节点添加到div节点
document.body.appendChild(a);
var newc=a.cloneNode(true);  //true：全部复制，包括子节点
document.body.appendChild(newc);
var newc=a.cloneNode(false); //false：只复制节点本身，不复制子节点
document.body.appendChild(newc);
document.getElementsByTagName("div")[0].innerHTML="document.createElement(/"div/")的节点类型是：" +a.nodeType + " ,节点名称是：" + a.nodeName;
document.getElementsByTagName("div")[0].innerHTML+="<br />document.createTextNode(/"this is text/")的节点类型是：" +b.nodeType + " ,节点名称是：" + b.nodeName;
}
window.onload=nodetype;
</script><div></div>

一些DOM操作节点的方法
createAttribute(name) ----------------创建属性节点
createComment(text)------------------创建注释节点
createDocumentFragment()----------- 创建文档碎片(用于向body添加大量内容时)
createElement(tagName) -------------创建元素节点
createTextNode(text)------------------ 创建文本节点
appendChild(node)---------------------添加Node 到 childNodes 末尾
removeChild(node)--------------------- 从childNodes中删除node
replaceChild(newnode, oldnode)----替换oldnode为newnode节点
insertBefore(newnode, refnode)----插入到refnode之前

createDocumentFragment()演示

<script type="text/javascript">
var w=function(){               
   var F=document.createDocumentFragment();
   var ol=document.createElement("ol");             
   for (var i=0; i<12; i++) {
     var li=document.createElement("li");
     var t=document.createTextNode("测试文字"+i.toString());
     li.appendChild(t);
     F.appendChild(li);
    }
  ol.appendChild(F);              
  document.body.appendChild(ol);
}
</script>
<input type="button" value="加载内容" onclick="w()" />
DOM属性：
节点的属性
nodeName属性将返回一个字符串，其内容是给定节点的名字。
如果节点是元素节点，返回这个元素的名称；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回一个内容为#text的字符串；

nodeType 属性将返回一个整数，这个数值代表给定节点的类型
nodeValue属性将返回给定节点的当前值
如果节点是元素节点，返回null；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回文本节点的内容；

遍历节点树
childNodes 该属性返回一个数组，这个数组由给定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling 返回给定节点的下一个子节点
parentNode 返回一个给定节点的父节点
previousSibling 返回给定节点的下一个子节点