术语汇编JavascriptDOM技术探究

你对Javascript DOM技术的是否了解，这里我们讨论的是javascript中或者说xhtml(html)对DOM的实现，希望对你的学习有所帮助。

Javascript之DOM技术

首先需要理解的一点是，DOM是针对XML的基于树的API，它的实现有很多（各语言基本都有自己的实现），我们讨论的是javascript中或者说xhtml(html)对DOM的实现。

一、使用DOM

考虑一个html文件：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. 测试 
    3.   
  
  
  3.  
    4.   
  
  
  4. 测试
     
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.

1.访问节点：

访问html元素：varoHtml=document.documentElement;
获取head元素：varoHead=oHtml.firstChild;
获取body元素：varoBody=oHtml.lastChild;或者varoBody=document.body;

也可以通过childNodes来做同样的工作：
varoHead=oHtml.childNodes[0]或者oHtml.childNodes.item(0);
varoBody=oHtml.childNodes[1]或者oHtml.childNodes.item(1);

判断节点间关系：

 
 
 
    
  
  
  
  1. alert(oHead.parentNode==oHtml);  
    2.   
  
  
  2. alert(oBody.previousSibling==oHead);  
    3.   
  
  
  3. alert(oHead.nextSibling==oBody);  
    4.   
  
  
  4. alert(oHead.ownerDocument==document); 
    5.

2.检测节点类型：

通过节点的nodeType属性来检验节点类型：
alert(document.nodeType);//输出9
需要注意的是，DOM兼容的浏览器（以FF2.0为例），拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名称与数值对照表如下：

 
 
 
    
  
  
  
  1. ELEMENT_NODE1  
    2.   
  
  
  2. ATTRIBUTE_NODE2  
    3.   
  
  
  3. TEXT_NODE3  
    4.   
  
  
  4. CDATA_SECTION_NODE4  
    5.   
  
  
  5. ENTITY_REFERENCE_NODE5  
    6.   
  
  
  6. ENTITY_NODE6  
    7.   
  
  
  7. PROCESSING_INSTRCTION_NODE7  
    8.   
  
  
  8. COMMENT_NODE8  
    9.   
  
  
  9. DOCUMENT_NODE9  
    10.   
  
  
  10. DOCUMENT_TYPE_NODE10  
    11.   
  
  
  11. DOCUMENT_FRAGMENT_NODE11  
    12.   
  
  
  12. NOTATION_NODE12  
    13.

IE6不支持，不过你可以自定义一个JS对象Node。

3.处理特性

处理特性可以使用标准的NameNodeMap中的方法：

 
 
 
    
  
  
  
  1. getNamedItem(name)removeNamedItem(name)  
    2.   
  
  
  2. setNamedItem(node)item(pos) 
    3.

比如:测试


假设变量oP是上面的p节点的引用，我们要访问oP的id属性:
varsId=oP.attributes.getNamedItem("id").nodeValue;

这些方法用起来很累赘,所以DOM又定义了三个方法来简化:
getAttribute(name)——返回名称为name的属性的值
setAttribute(name,value)——顾名思义
removeAttribute(name)——顾名思义

上面的例子可以改写为：

 
 
 
    
  
  
  
  1. varsId=oP.getAttribute("name");  
    2.   
  
  
  2.  
    3.

#p#4.访问指定节点：

熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法，不再展开。

5.创建和操作节点：

（1）创建新节点，一张IE(6.0)和FF对DOMLevel1的创建新节点方法支持的对照表：
方法IEFF

 
 
 
    
  
  
  
  1. createAttribute(name)YY  
    2.   
  
  
  2. createCDATASection(text)NY  
    3.   
  
  
  3. createComment(text)YY  
    4.   
  
  
  4. createDocumentFragment()YY  
    5.   
  
  
  5. createElement(tagName)YY  
    6.   
  
  
  6. createEntityReference(name)NY  
    7.   
  
  
  7. createProcessingInstruction(  
    8.   
  
  
  8. target,data)NY  
    9.   
  
  
  9. createTextNode(text)YY  
    10.

 下面介绍常用的几个方法

（2）createElement(),createTextNode(),appendChild()
例子：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3. createElement()Example 
    4.   
  
  
  4.  
    5.   
  
  
  5. functioncreateMessage(){  
    6.   
  
  
  6. varoP=document.createElement("p");  
    7.   
  
  
  7. varoText=document.createTextNode("HelloWorld!");  
    8.   
  
  
  8. oP.appendChild(oText);  
    9.   
  
  
  9. document.body.appendChild(oP);  
    10.   
  
  
  10. }  
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.

 在页面载入后，创建节点oP，并创建一个文本节点oText,oText通过appendChild方法附加在oP节点上，为了实际显示出来，将oP节点通过appendChild方法附加在body节点上。此例子将显示HelloWorld!

（3）removeChild(),replaceChild()和insertBefore()
从方法名称就知道是干什么的：删除节点，替换节点，插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前，旧节点在后。

（4）createDocumentFragment()
此方法主要是为了解决大量添加节点时，速度过慢。通过创建一个文档碎片节点，将要添加的新节点附加在此碎片节点上，然后再将文档碎片节点append到body上面，替代多次append到body节点。
例子：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3. insertBefore()Example 
    4.   
  
  
  4.  
    5.   
  
  
  5. functionaddMessages(){  
    6.   
  
  
  6. vararrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];  
    7.   
  
  
  7.  
    8.   
  
  
  8. varoFragment=document.createDocumentFragment();  
    9.   
  
  
  9.  
    10.   
  
  
  10. for(vari=0;i  
  
  
  11. varoP=document.createElement("p");  
    12.   
  
  
  12. varoText=document.createTextNode(arrText[i]);  
    13.   
  
  
  13. oP.appendChild(oText);  
    14.   
  
  
  14. oFragment.appendChild(oP);  
    15.   
  
  
  15. }  
    16.   
  
  
  16.  
    17.   
  
  
  17. document.body.appendChild(oFragment);  
    18.   
  
  
  18.  
    19.   
  
  
  19. }  
    20.   
  
  
  20.  
    21.   
  
  
  21.  
    22.   
  
  
  22.  
    23.   
  
  
  23.  
    24.   
  
  
  24.  
    25.   
  
  
  25.  
    26.   
  
  
  26.  
    27.

 #p#二、HTMLDOM的特征功能

HTMLDOM的特性和方法不是标准的DOM实现，是专门针对HTML同时也让一些DOM操作变的更加简便。

1.让特性像属性一样

访问某元素的特性需要用到getAttribute(name)方法，HTMLDOM扩展，可以直接使用同样名称的属性来获取和设置这些值：
比如

假设oImg是此元素的引用

(oImg.getAttribute("src")可以直接写成:oImg.src，设置值简化为：
oImg.src="test2.gif";
唯一特殊的class属性，因为class是ECMAScript的保留字，所以替代的属性名是className.

2.table的系列方法：

为了简化创建表格，HTMLDOM提供了一系列的表格方法，常用几个：
cells——返回元素中的所有单元格
rows——表格中所有行的集合
insertRow(position)——在rows集合中指定位置插入新行
deleteRow(position)——与insertRow相反
insertCell(position)——在cells集合的指定位置插入一个新的单元格
deleteCell(position)——与insertCell相反

三。遍历DOM

DOM的遍历是DOMLevel2中提出的标准，IE6没有实现，Mozilla和Safari已经实现，***IE7不清楚是否实现。

本文题目：术语汇编JavascriptDOM技术探究
浏览地址：http://www.csdahua.cn/qtweb/news46/437546.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

标签优化知识

同城分类信息

msfdjwx.com　　 　成都网站建设报价　　 　成都枢纽中心　　 　重庆移动机房托管　　 　服务器租用　　 　贵阳联通机房　　 　长城雪茄　　 　h5页面制作　　 　简阳服务器托管　　 　服务器托管　　 　成都网站建设　　 　温江服务器托管　　 　免备案虚拟主机　　 　帛金家居　　 　成都发电机维修保养公司　　 　添翼二手车鉴定　　 　网站建设推广　　 　成都西信机房托管　　 　手机网站建设套餐　　 　成都网站改版