通过JS动态显示html-DOM操作

标签：jquery   ui   web前端   前端   框架   

近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： 精心开发5年的UI前端框架！

/**//*
    动态创建DOM元素的相关函数支持
     www.jcodecraeer.com
*/
/**//*
  获取以某个元素的DOM对象
  @obj  该元素的ID字符串
*/
function getElement(obj)
{
  return typeof obj=='string'?document.getElementById(obj):obj;
}
/**//*
  获取某个元素的位置
  @obj 该元素的DOM对象，或该元素的ID
*/
function getObjectPosition(obj)
{
  obj=typeof obj==='string'?getElement(obj):obj;
  if(!obj)
  {
    return;
  }  
  var position='';
  if(obj.getBoundingClientRect) //For IEs
  {
    position=obj.getBoundingClientRect();
    return {x:position.left,y:position.top};
  }
  else if(document.getBoxObjectFor)
  {
    position=document.getBoxObjectFor(obj);
    return {x:position.x,y:position.y};
  }
  else
  {
    position={x:obj.offsetLeft,y:obj.offsetTop};
    var parent=obj.offsetParent;
    while(parent)
    {
       position.x+=obj.offsetLeft;
       position.y+=obj.offsetTop;
       parent=obj.offsetParent;
    }
    return position;
  }
}
/**//*
  为某个DOM对象动态绑定事件
  @oTarget 被绑定事件的DOM对象
  @sEventType 被绑定的事件名，注意，不加on的事件名，如 'click'
  @fnHandler 被绑定的事件处理函数
*/
function addEventHandler(oTarget, sEventType, fnHandler)
{
    if (oTarget.addEventListener) 
    {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } 
    else if (oTarget.attachEvent)  //for IEs
    {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } 
    else
    {
        oTarget["on" + sEventType] = fnHandler;
    }
  }
/**//*
  从某个DOM对象中去除某个事件
  @oTarget 被绑定事件的DOM对象
  @sEventType 被绑定的事件名，注意，不加on的事件名，如 'click'
  @fnHandler 被绑定的事件处理函数
*/
function removeEventHandler(oTarget,sEventType,fnHandler)
{
    if(oTarget.removeEventListener) 
    {
       oTarget.removeEventListener(sEventType,fnHandler,false)
    }
    else if(oTarget.detachEvent)  //for IEs
    {
       oTarget.detachEvent(sEventType,fnHandler);
    }
    else
    {
       oTarget['on'+sEventType]=undefined;
    }
  }
    
/**//*
  创建动态的DOM对象
  @domParams是被创建对象的属性的JSON表达，它具有如下属性：
  @parentNode 被创建对象所属的父级元素(可为元素ID，也可为DOM对象）
  @domId 被创建对象的ID
  @domTag 被创建对象的tag名称，支持常用的布局元素，如div span等，但不支持input\form等特别的元素  
  @content 被创建的对象内容 
  @otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrName:'style.color',attrValue:'red'}]
  @eventRegisters 为被创建的对象添加事件，类似[{eventType:'click',eventHandler:adsfasdf}]的数组
  -经过组合后，该参数具有如下形式:
  {parentNode:document.body,domTag:'div',content:'这是测试的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
*/
function dynCreateDomObject(domParams)
{ 
   if(getElement(domParams.domId))
   {
     childNodeAction('remove',domParams.parentNode,domParams.domId);
   }
           
   var dynObj=document.createElement(domParams.domTag);
    
   with(dynObj)
   {    
   //id也可以通过otherAttributes传入，但是出于ID的特殊性，此处仍然采用
   //JSON对象传入，并以DOM ID属性附件
     id=domParams.domId;
     innerHTML=domParams.content; //innerHTML是DOM属性，而id等是元素属性，注意区别
   }
   /**//*添加属性*/
   if(null!=domParams.otherAttributes)
   {
      for(var i=0;i<domParams.otherAttributes.length;i++)
      {       
        var otherAttribute =domParams.otherAttributes[i];
        dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
      }
   }
   /**//*end 添加属性*/
   /**//*添加相关事件*/
   if(null!=domParams.eventRegisters)
   {
      for(var i=0;i<domParams.eventRegisters.length;i++)
      {
        var eventRegister =domParams.eventRegisters[i];        
        addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
      }
   }
   /**//*end 添加相关事件*/ 
   try
   {     
       childNodeAction('append',domParams.parentNode,dynObj);
   }
   catch($e)
   {
        
   } 
          
   return dynObj;
}
/**//*
  从父结点中删除子结点
  @actionType 默认为append,输入字符串 append | remove
  @parentNode 父结点的DOM对象，或者父结点的ID
  @childNode 被删除子结点的DOM对象 或者被删除子结点的ID
*/
function childNodeAction(actionType,parentNode,childNode)
{
  if(!parentNode)
  {return; }
       
     
  parentNode=typeof parentNode==='string'?getElement(parentNode):parentNode;
  childNode=typeof childNode==='string'?getElement(childNode):childNode;
  if(!parentNode || !childNode)
  {return;}
      
  var action=actionType.toLowerCase();
  if( null==actionType || action.length<=0 || action=='append')
  {
    action='parentNode.appendChild';
  }
  else
  {
    action='parentNode.removeChild';
  }
     
  try
  {
    eval(action)(childNode);
  }
  catch($e)
  {
    alert($e.message);    
  }
}

使用示例： 精心开发5年的UI前端框架！

  var  htmlAttributes= 
    [
   
    {attrName:'class',attrValue:’样式名称’} //for IEs
   
    ,
   
    {attrName:'className',attrValue: ’样式名称’} //for ff
   
    ]   
   
    var  domParams={domTag:'div',  content:’动态div的innerHTML’,  otherAttributes:htmlAttributes};
   
    var  newHtmlDom=dynCreateDomObject(domParams);
   
    //通过setAttribute('style','position:absolute.....................')
   
    //的形式来指定style没有效果，只能通过如下形式,jiong
   
    newHtmlDom.style.zIndex='8888';
   
    newHtmlDom.style.position='absolute';
   
    newHtmlDom.style.left=’100px’;
   
    newHtmlDom.style.top=’200px’;

通过JS动态显示html-DOM操作

标签：jquery   ui   web前端   前端   框架   

原文地址：http://blog.csdn.net/ariss123/article/details/40111457