JAVA认证：术语汇编JavascriptDOM技术研究

会计考友

你对Javascript DOM技术的是否了解，这里我们讨论的是javascript中或者说xhtml（html）对DOM的实现，希望对你的学习有所帮助。
    Javascript之DOM技术
0 B; L  p$ H7 k1 k    首先需要理解的一点是，DOM是针对XML的基于树的API，它的实现有很多（各语言基本都有自己的实现），我们讨论的是javascript中或者说xhtml（html）对DOM的实现。
% E1 s- b7 ^/ }7 H5 G9 V0 C    一、使用DOM
    考虑一个html文件：
" `5 z6 `! c' e. V6 m/ U2 K     测试  测试
1 m. {; J! ?5 S' R   1.访问节点：
    访问html元素：varoHtml=document.documentElement;
    获取head元素：varoHead=oHtml.firstChild;
    获取body元素：varoBody=oHtml.lastChild;或者varoBody=document.body;
    也可以通过childNodes来做同样的工作：
/ A: y1 b) G/ ?    varoHead=oHtml.childNodes[0]或者oHtml.childNodes.item（0）；
    varoBody=oHtml.childNodes[1]或者oHtml.childNodes.item（1）；
    判断节点间关系：
    alert（oHead.parentNode==oHtml）；  alert（oBody.previousSibling==oHead）；  alert（oHead.nextSibling==oBody）；  alert（oHead.ownerDocument==document）； 2.检测节点类型：
1 p  F& y. j& r6 H6 p# I: R% D    通过节点的nodeType属性来检验节点类型：
6 c2 r6 M1 g/ J( I4 [& |3 Q    alert（document.nodeType）；//输出9
3 p, P7 P2 T3 T$ W" {+ ?; B, m    需要注意的是，DOM兼容的浏览器（以FF2.0为例），拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名称与数值对照表如下：
    ELEMENT_NODE1  ATTRIBUTE_NODE2  TEXT_NODE3  CDATA_SECTION_NODE4  ENTITY_REFERENCE_NODE5  ENTITY_NODE6  PROCESSING_INSTRCTION_NODE7  COMMENT_NODE8  DOCUMENT_NODE9  DOCUMENT_TYPE_NODE10  DOCUMENT_FRAGMENT_NODE11  NOTATION_NODE12  IE6不支持，不过你可以自定义一个JS对象Node。
, n/ O7 K' d8 C- f    3.处理特性
; I' \* e$ `, R/ k    处理特性可以使用标准的NameNodeMap中的方法：
" d4 M5 \8 C& E    getNamedItem（name）removeNamedItem（name）  setNamedItem（node）item（pos） 比如：测试</p>
    假设变量oP是上面的p节点的引用，我们要访问oP的id属性：
    varsId=oP.attributes.getNamedItem（"id"）。nodeValue;
    这些方法用起来很累赘，所以DOM又定义了三个方法来简化：
    getAttribute（name）——返回名称为name的属性的值
+ t7 O+ W. w3 L% v) A0 Y' F    setAttribute（name,value）——顾名思义
* T& A! l( P' T3 c8 Q    removeAttribute（name）——顾名思义
8 x+ Q: f0 t; s  O* ]    上面的例子可以改写为：
    varsId=oP.getAttribute（"name"）；
    4.访问指定节点：
    熟知的getElementByTagName（name），getElementByName（name），getElementById（id）三个方法，不再展开 5.创建和操作节点：
* S/ m5 o' E* M5 y, x6 v6 w    （1）创建新节点，一张IE（6.0）和FF对DOMLevel1的创建新节点方法支持的对照表：
) @+ k  \! y1 T& q8 W9 J    方法IEFF
8 ?$ l! ~% n8 u    createAttribute（name）YY  createCDATASection（text）NY  createComment（text）YY  createDocumentFragment（）YY  createElement（tagName）YY  createEntityReference（name）NY  createProcessingInstruction（  target,data）NY  createTextNode（text）YY  下面介绍常用的几个方法
- A: M8 S& u: c5 b3 @* x/ F    （2）createElement（），createTextNode（），appendChild（）
* ?% F( ^' {9 I    例子：
5 i: R, O0 o" L% y3 r      createElement（）Example  functioncreateMessage（）{  varoP=document.createElement（"p"）；  varoText=document.createTextNode（"HelloWorld!"）；  oP.appendChild（oText）；  document.body.appendChild（oP）；  }  </script>     在页面载入后，创建节点oP，并创建一个文本节点oText,oText通过appendChild方法附加在oP节点上，为了实际显示出来，将oP节点通过appendChild方法附加在body节点上。此例子将显示HelloWorld!
  c  ~4 ^$ ?& k/ C+ V    （3）removeChild（），replaceChild（）和insertBefore（）
7 m0 E  }$ _1 C6 {& @    从方法名称就知道是干什么的：删除节点，替换节点，插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前，旧节点在后。
6 s; k5 O0 o! G( a, c! B    （4）createDocumentFragment（）
- c5 \! g) g% T7 q; \- P* N    此方法主要是为了解决大量添加节点时，速度过慢。通过创建一个文档碎片节点，将要添加的新节点附加在此碎片节点上，然后再将文档碎片节点append到body上面，替代多次append到body节点。
    例子：
      insertBefore（）Example  functionaddMessages（）{  vararrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];   varoFragment=document.createDocumentFragment（）；   for（vari=0;i