需要通過(guò)點(diǎn)擊某個(gè)元素后， 動(dòng)態(tài)創(chuàng)建一個(gè)DOM元素并顯示，因此寫了一些相關(guān)的js函數(shù)，在此記錄下
近日，因工作需要，需要通過(guò)點(diǎn)擊某個(gè)元素后， 動(dòng)態(tài)創(chuàng)建一個(gè)DOM元素并顯示，因此寫了一些相關(guān)的JS函數(shù)，在此記錄，以作備忘：
/**//*
動(dòng)態(tài)創(chuàng)建DOM元素的相關(guān)函數(shù)支持
www.jcodecraeer.com
*/
/**//*
獲取以某個(gè)元素的DOM對(duì)象
@obj 該元素的ID字符串
*/
function getElement(obj)
{
return typeof obj=='string'?document.getElementById(obj):obj;
}
/**//*
獲取某個(gè)元素的位置
@obj 該元素的DOM對(duì)象，或該元素的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;
}
}
/**//*
為某個(gè)DOM對(duì)象動(dòng)態(tài)綁定事件
@oTarget 被綁定事件的DOM對(duì)象
@sEventType 被綁定的事件名，注意，不加on的事件名，如 'click'
@fnHandler 被綁定的事件處理函數(shù)
*/
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;
}
}
/**//*
從某個(gè)DOM對(duì)象中去除某個(gè)事件
@oTarget 被綁定事件的DOM對(duì)象
@sEventType 被綁定的事件名，注意，不加on的事件名，如 'click'
@fnHandler 被綁定的事件處理函數(shù)
*/
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;
}
}
/**//*
創(chuàng)建動(dòng)態(tài)的DOM對(duì)象
@domParams是被創(chuàng)建對(duì)象的屬性的JSON表達(dá)，它具有如下屬性：
@parentNode 被創(chuàng)建對(duì)象所屬的父級(jí)元素(可為元素ID，也可為DOM對(duì)象）
@domId 被創(chuàng)建對(duì)象的ID
@domTag 被創(chuàng)建對(duì)象的tag名稱，支持常用的布局元素，如div span等，但不支持input/form等特別的元素
@content 被創(chuàng)建的對(duì)象內(nèi)容
@otherAttributes 為被創(chuàng)建的對(duì)象添加除函數(shù)必需的屬性外其它屬性,如[{attrName:'style.color',attrValue:'red'}]
@eventRegisters 為被創(chuàng)建的對(duì)象添加事件，類似[{eventType:'click',eventHandler:adsfasdf}]的數(shù)組
-經(jīng)過(guò)組合后，該參數(shù)具有如下形式:
{parentNode:document.body,domTag:'div',content:'這是測(cè)試的',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也可以通過(guò)otherAttributes傳入，但是出于ID的特殊性，此處仍然采用
//JSON對(duì)象傳入，并以DOM ID屬性附件
id=domParams.domId;
innerHTML=domParams.content; //innerHTML是DOM屬性，而id等是元素屬性，注意區(qū)別
}
/**//*添加屬性*/
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 添加屬性*/
/**//*添加相關(guān)事件*/
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 添加相關(guān)事件*/
try
{
childNodeAction('append',domParams.parentNode,dynObj);
}
catch($e)
{
}
return dynObj;
}
/**//*
從父結(jié)點(diǎn)中刪除子結(jié)點(diǎn)
@actionType 默認(rèn)為append,輸入字符串 append | remove
@parentNode 父結(jié)點(diǎn)的DOM對(duì)象，或者父結(jié)點(diǎn)的ID
@childNode 被刪除子結(jié)點(diǎn)的DOM對(duì)象 或者被刪除子結(jié)點(diǎn)的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:'動(dòng)態(tài)div的innerHTML', otherAttributes:htmlAttributes};
var newHtmlDom=dynCreateDomObject(domParams);
//通過(guò)setAttribute('style','position:absolute.....................')
//的形式來(lái)指定style沒(méi)有效果，只能通過(guò)如下形式,jiong
newHtmlDom.style.zIndex='8888';
newHtmlDom.style.position='absolute';
newHtmlDom.style.left='100px';
newHtmlDom.style.top='200px';
