需要通过点击某个元素后, 动态创建一个 DOM 元素并显示,因此写了一些相关的 js 函数,在此记录下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
近日,因工作需要,需要通过点击某个元素后, 动态创建一个 DOM 元素并显示,因此写了一些相关的 JS 函数,在此记录,以作备忘:
- /**//*
- 动态创建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);
- }
- }
使用示例:
- 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';
来源: