实例讲解《Microsoft AJAX Library》(1)：DomElement类

引言：
大家都知道Ajax的之所以能如此丰富地实现，客户端脚本功不可没。而像Asp.Net Ajax这般庞大的工程，没有脚本类库的支撑是很难想象的。《Microsoft AJAX Library》就是Asp.Net Ajax的脚本类库。其实网上流行的脚本类库是很多的，也有一些是十分成功的，例如：prototype.js脚本类库。这些脚本类库封装了很多常用的功能，通过使用这些脚本类库我们能极大的提高工作效率。

这篇文章依赖于www.AspNetResources.com网站2007-01-24发布的《Microsoft AJAX Library》PDF版本。DflyingChen对此有完整而准确的翻译。
（文章地址：http://www.cnblogs.com/dflying/archive/2007/02/09/639638.aspx）

此篇文章面向的对象是那些可能连“prototype.js”都没有听说过，对“脚本类库”一词还很陌生的朋友。文章也只是举一些简单而便于理解的示例帮助他们更好的理解，所以可以说没有任何技术含量，与DflyingChen对英文原版的发现和翻译之功德相比，难及其十一。在此向DflyingChen献上敬意。

我个人对DOM的操作这块最感兴趣，所以我先从DomElement类讲起，如果给你带来不便，请谅解。

相关链接：
实例讲解《Microsoft AJAX Library》(1)：DomElement类
实例讲解《Microsoft AJAX Library》(2)：DomEvent类

正文：
准备工作：
1：安装 Asp.Net Ajax（引入AjaxControlToolkit名域）。
2：页面上拖个ToolkitScriptManager

说明：
标注有图标的为静态方法，无须实例化对象即可使用。

 1：getElementById(id,element)
这个太熟了吧。比以前的getElementById有所扩充，可以指定某个元素容器范围内。看《DomElement 示例页面》例子中的yzy_getElementById函数（为了防止同名误解，我的自建函数均有“yzy_”前缀）。第一次alert是只有id参数的时候，第二alert是txtSameFather容器内的txtSameID的value值。

 2：$get(id,element)
其实就是Sys.UI.DomElement.getElementById(id,element)的简写形式。没有区别。这让我想到了prototype.js脚本库中的”$”函数，个人感觉那个也很强。如果页面上有多个相同的id会返回object数组。
具体使用请参看《DomElement 示例页面》中的yzy_$get函数。

 3：addCssClass(element,className)
网页外观设置终于不用那么麻烦了。呵呵。作用和prototype.js中的addClassName类似。
不过说，看《DomElement 示例页面》中的yzy_ addCssClass函数。

  4：containsCssClass(element,className)
判断element元素是否使用了className样式class。
具体使用请参看《DomElement 示例页面》中的yzy_containsCssClass函数。

  5：removeCssClass()(element,className)
从element元素中移除className样式class。如果没有此样式则什么也不做。
具体使用请参看《DomElement 示例页面》中的yzy_ removeCssClass函数。

  6：toggleCssClass(element,className)
Toggle是个好东西，不用你再if……else……的判断了，本身就是个奇偶开关。是真就让它假，是假就让它真。
toggleCssClass的作用是，判断element元素是否应用了className样式class。如果用了，就去掉，如果没有用就给它加上。
具体使用请参看《DomElement 示例页面》中的yzy_ toggleCssClass函数。

  7：getLocation(element)
取得element元素相对与浏览器左上角的绝对位置。
样式表中position是个比较绕人的概念。如果你对这个概念还不是特别清楚，我建议你先看篇文章将这个概念搞清楚——《彻底弄懂CSS盒子模式四(绝对定位和相对定位)》
具体使用请参看《DomElement 示例页面》中的yzy_ getLocation函数。

  8：setLocation(element,x,y)
设置元素的位置，这个位置是指相对它最近的，且设置了postion样式的祖先元素。这句话的确比较饶人。所以你要使用这个东西，必须先搞懂position这个概念，不然会出现你意料之外现象。
具体使用请参看《DomElement 示例页面》中的yzy_ setLocation函数。

  9：getBounds(element)
返回元素的绝对位置以及它“盒装模型”模型的长和宽。返回值对象保护下面的属性：
 x,y：取得element元素相对与浏览器左上角的绝对位置。作用和getLocation一样。
 width：元素“盒装模型”的宽度。包含border和padding等部分
 height：元素“盒装模型”的长度。包含border和padding等部分
如果你对“盒装模型”不是很理解的话，请阅读一下这篇文章：《彻底弄懂CSS盒子模式一(DIV布局快速入门)》
具体使用请参看《DomElement 示例页面》中的yzy_ getBounds函数。

---

 

《DomElement 示例页面》源代码：

<% @ Page Language = " vb "  AutoEventWireup = " false "  CodeBehind = " DomElement.aspx.vb "  Inherits = " AjaxExample.DomElement "   %>
<% @ Register Assembly = " AjaxControlToolkit "  Namespace = " AjaxControlToolkit "  TagPrefix = " cc1 "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > DomElement 示例页面 </ title >
     < style  type ="text/css" >
   
    #divSameFather {
    width : 200px ;
    height : 300px ;
    border : 1px solid red ;     
    margin : 10px 0 200px 0 ;
    positio : relative ;
     }
    
    .cssRedFont {
    color : red ;     
     }
    
    .cssGreenFont {
    color : green ;
     }
     </ style >

     < script  type ="text/javascript"  language ="javascript" >   

     function  yzy_getElementById(){
         var  library;
        library = Sys.UI.DomElement;        
         var  divFather = library.getElementById( " divSameFather " );
         var  txtTest = library.getElementById( " txtSameID " );
        
        alert(txtTest.value);
        txtTest = library.getElementById( " txtSameID " ,divFather);  // 指定了容器范围
        alert(txtTest.value);
    }
            
     function  yzy_$get(){   
         var  divFather = $get( " divSameFather " );
         var  txtTest = $get( " txtSameID " );  
        
        alert(txtTest.value);
        txtTest = $get( " txtSameID " ,divFather);  // 指定了容器范围
        alert(txtTest.value);
    } 
    
     function  yzy_addCssClass(){
         var  library;
        library = Sys.UI.DomElement;        
         var  txtTest = $get( " txtSameID " );  
        
        library.addCssClass(txtTest, " cssRedFont " );
    }
    
     function  yzy_containsCssClass(){
         var  library;
        library = Sys.UI.DomElement;
         var  txtTest = $get( " txtSameID " );  
        
         var  iscontainsCssClass  =  library.containsCssClass(txtTest, " cssRedFont " );
        alert(iscontainsCssClass);        
    }
    
     function  yzy_removeCssClass(){
         var  library;
        library = Sys.UI.DomElement;    
         var  txtTest = $get( " txtSameID " );  
        
        library.removeCssClass(txtTest, " cssRedFont " );      
    }
    
     function  yzy_toggleCssClass(){
         var  library;
        library = Sys.UI.DomElement;    
         var  txtTest = $get( " txtSameID " );  
        
        library.toggleCssClass(txtTest, " cssRedFont " );      
    }
    
     function  yzy_getLocation(){
         var  library;
        library = Sys.UI.DomElement;    
         var  txtTest = $get( " txtSameID " );  
        
         var  position = library.getLocation(txtTest);
        alert( " X: "   +  position.x  +   "        Y: "   +  position.y);
    }
    
     function  yzy_setLocation(){
         var  library;
        library = Sys.UI.DomElement;        
         var  divFather = library.getElementById( " divSameFather " );

        txtTest_inside = library.getElementById( " txtSameID " ,divFather);  // 指定了容器范围
        library.setLocation(txtTest_inside, 50 , 100 );
    }
    
     function  yzy_getBounds(){
         var  library;
        library = Sys.UI.DomElement;        
         var  txtTest = $get( " txtSameID " );  

        txtTest = library.getElementById( " txtSameID " );  // 指定了容器范围
        boundsText = library.getBounds(txtTest);
         alert( " X: "   +  boundsText.x  +   "        Y: "   +  boundsText.y  + " /n "   +   " width： "   +  boundsText.width  +   "        height： "   +  boundsText.height);
    }
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < cc1:ToolkitScriptManager  ID ="ToolkitScriptManager1"  runat ="server" >
         </ cc1:ToolkitScriptManager >
        
         < input  id ="txtSameID"  type ="text"  value ="outSideInput"   />
     < div  id ="divSameFather" >
         < input  id ="txtSameID"  type ="text"  value ="inSideInput" />
     </ div >
         < input  id ="Button1"  type ="button"  value ="getElementById"  onclick ="yzy_getElementById();"   />
         < input  id ="Button2"  type ="button"  value ="$get"  onclick ="yzy_$get();"   />
         < input  id ="Button3"  type ="button"  value ="addCssClass"  onclick ="yzy_addCssClass();"   />
         < input  id ="Button4"  type ="button"  value ="containsCssClass"  onclick ="yzy_containsCssClass();"   />
         < input  id ="Button5"  type ="button"  value ="removeCssClass"  onclick ="yzy_removeCssClass();"   />
         < input  id ="Button6"  type ="button"  value ="toggleCssClass"  onclick ="yzy_toggleCssClass();"   />
         < hr />
         < input  id ="Button7"  type ="button"  value ="getLocation"  onclick ="yzy_getLocation();"   />
         < input  id ="Button8"  type ="button"  value ="setLocation"  onclick ="yzy_setLocation();"   />
         < input  id ="Button9"  type ="button"  value ="getBounds"  onclick ="yzy_getBounds();"   />
                
     </ form >
</ body >
</ html >

keyword:Microsoft AJAX Library,DomElement,ajax DomElement类,脚本类库,javascript类库