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

会计考友

你对Javascript DOM技术的是否了解，这里我们讨论的是javascript中或者说xhtml（html）对DOM的实现，希望对你的学习有所帮助。
4 H+ n" V+ i: d8 A- c    Javascript之DOM技术
    首先需要理解的一点是，DOM是针对XML的基于树的API，它的实现有很多（各语言基本都有自己的实现），我们讨论的是javascript中或者说xhtml（html）对DOM的实现。
/ f* g( ?( p2 ~, F* v0 @    一、使用DOM
    考虑一个html文件：
     测试  测试
9 l& q$ K/ j( {' k! Z+ y   1.访问节点：
    访问html元素：varoHtml=document.documentElement;
% w2 V8 a4 J; {6 o  J7 \0 ~9 m    获取head元素：varoHead=oHtml.firstChild;
0 S7 L: |/ t: Y2 ^    获取body元素：varoBody=oHtml.lastChild;或者varoBody=document.body;
    也可以通过childNodes来做同样的工作：
    varoHead=oHtml.childNodes[0]或者oHtml.childNodes.item（0）；
    varoBody=oHtml.childNodes[1]或者oHtml.childNodes.item（1）；
7 B5 S/ o/ |: K. Y* K7 n6 d    判断节点间关系：
    alert（oHead.parentNode==oHtml）；  alert（oBody.previousSibling==oHead）；  alert（oHead.nextSibling==oBody）；  alert（oHead.ownerDocument==document）； 2.检测节点类型：
" x# v, s9 Q0 P9 t% s" _/ n3 K    通过节点的nodeType属性来检验节点类型：
8 t: s0 {- M6 I1 A! U: y3 y; \7 H    alert（document.nodeType）；//输出9
. y# C" w  w& ?    需要注意的是，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。
    3.处理特性
4 h7 i" x8 T7 p0 z7 u    处理特性可以使用标准的NameNodeMap中的方法：
6 D- c. Q2 Q# L& o    getNamedItem（name）removeNamedItem（name）  setNamedItem（node）item（pos） 比如：测试</p>
    假设变量oP是上面的p节点的引用，我们要访问oP的id属性：
    varsId=oP.attributes.getNamedItem（"id"）。nodeValue;
4 |6 V. c( H( l# p6 b    这些方法用起来很累赘，所以DOM又定义了三个方法来简化：
    getAttribute（name）——返回名称为name的属性的值
    setAttribute（name,value）——顾名思义
    removeAttribute（name）——顾名思义
    上面的例子可以改写为：
    varsId=oP.getAttribute（"name"）；
    4.访问指定节点：
: Q; v& h# j- q! ^    熟知的getElementByTagName（name），getElementByName（name），getElementById（id）三个方法，不再展开 5.创建和操作节点：
) o8 f  J+ Z6 H: n8 P0 R$ s/ Y    （1）创建新节点，一张IE（6.0）和FF对DOMLevel1的创建新节点方法支持的对照表：
    方法IEFF
$ Y0 ?& R+ Z3 I) V    createAttribute（name）YY  createCDATASection（text）NY  createComment（text）YY  createDocumentFragment（）YY  createElement（tagName）YY  createEntityReference（name）NY  createProcessingInstruction（  target,data）NY  createTextNode（text）YY  下面介绍常用的几个方法
* S$ K4 o/ ~2 Z3 e    （2）createElement（），createTextNode（），appendChild（）
    例子：
      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!
, g& A+ T/ X" p2 D3 t    （3）removeChild（），replaceChild（）和insertBefore（）
. f7 K+ k/ d$ n+ X* a, t% p  Q    从方法名称就知道是干什么的：删除节点，替换节点，插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前，旧节点在后。
% P# h0 j0 k8 G5 U! B    （4）createDocumentFragment（）
    此方法主要是为了解决大量添加节点时，速度过慢。通过创建一个文档碎片节点，将要添加的新节点附加在此碎片节点上，然后再将文档碎片节点append到body上面，替代多次append到body节点。
% u) s2 P5 O' H9 h9 e9 m  l: M% |( o    例子：
- E" {- I' P: L" P# r& w' N9 f      insertBefore（）Example  functionaddMessages（）{  vararrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];   varoFragment=document.createDocumentFragment（）；   for（vari=0;i