DIV CSS 佈局教程網

本文實例講述了JS動態創建DOM元素的方法。分享給大家供大家參考。具體如下：

近日，因工作需要，需要通過點擊某個元素後， 動態創建一個DOM元素並顯示，因此寫了一些相關的JS函數，在此記錄，以作備忘：

/*
動態創建DOM元素的相關函數支持
*/
/*
獲取以某個元素的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);  
 }
}

使用示例：

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';

希望本文所述對大家的javascript程序設計有所幫助。