近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘:
---09-07-03 更改
1/*
2 动态创建DOM元素的相关函数支持
3 www.cnblogs.com/mcjeremy
4*/
5/*
6 获取以某个元素的DOM对象
7 @obj 该元素的ID字符串
8*/
9function getElement(obj)
10{
11 return typeof obj=='string'?document.getElementById(obj):obj;
12}
13/*
14 获取某个元素的位置
15 @obj 该元素的DOM对象,或该元素的ID
16*/
17function getObjectPosition(obj)
18{
19 obj=typeof obj==='string'?getElement(obj):obj;
20 if(!obj)
21 {
22 return;
23 }
24 var position='';
25 if(obj.getBoundingClientRect) //For IEs
26 {
27 position=obj.getBoundingClientRect();
28 return {x:position.left,y:position.top};
29 }
30 else if(document.getBoxObjectFor)
31 {
32 position=document.getBoxObjectFor(obj);
33 return {x:position.x,y:position.y};
34 }
35 else
36 {
37 position={x:obj.offsetLeft,y:obj.offsetTop};
38 var parent=obj.offsetParent;
39 while(parent)
40 {
41 position.x+=obj.offsetLeft;
42 position.y+=obj.offsetTop;
43 parent=obj.offsetParent;
44 }
45 return position;
46 }
47}
48/*
49 为某个DOM对象动态绑定事件
50 @oTarget 被绑定事件的DOM对象
51 @sEventType 被绑定的事件名,注意,不加on的事件名,如 'click'
52 @fnHandler 被绑定的事件处理函数
53*/
54function addEventHandler(oTarget, sEventType, fnHandler)
55{
56 if (oTarget.addEventListener)
57 {
58 oTarget.addEventListener(sEventType, fnHandler, false);
59 }
60 else if (oTarget.attachEvent) //for IEs
61 {
62 oTarget.attachEvent("on" + sEventType, fnHandler);
63 }
64 else
65 {
66 oTarget["on" + sEventType] = fnHandler;
67 }
68 }
69/*
70 从某个DOM对象中去除某个事件
71 @oTarget 被绑定事件的DOM对象
72 @sEventType 被绑定的事件名,注意,不加on的事件名,如 'click'
73 @fnHandler 被绑定的事件处理函数
74*/
75function removeEventHandler(oTarget,sEventType,fnHandler)
76{
77 if(oTarget.removeEventListener)
78 {
79 oTarget.removeEventListener(sEventType,fnHandler,false)
80 }
81 else if(oTarget.detachEvent) //for IEs
82 {
83 oTarget.detachEvent(sEventType,fnHandler);
84 }
85 else
86 {
87 oTarget['on'+sEventType]=undefined;
88 }
89 }
90
91/*
92 创建动态的DOM对象
93 @domParams是被创建对象的属性的JSON表达,它具有如下属性:
94 @parentNode 被创建对象所属的父级元素(可为元素ID,也可为DOM对象)
95 @domId 被创建对象的ID
96 @domTag 被创建对象的tag名称,支持常用的布局元素,如div span等,但不支持input\form等特别的元素
97 @content 被创建的对象内容
98 @otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrName:'style.color',attrValue:'red'}]
99 @eventRegisters 为被创建的对象添加事件,类似[{eventType:'click',eventHandler:adsfasdf}]的数组
100 -经过组合后,该参数具有如下形式:
101 {parentNode:document.body,domTag:'div',content:'这是测试的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
102*/
103function dynCreateDomObject(domParams)
104{
105 if(getElement(domParams.domId))
106 {
107 childNodeAction('remove',domParams.parentNode,domParams.domId);
108 }
109
110 var dynObj=document.createElement(domParams.domTag);
111
112 with(dynObj)
113 {
114 //id也可以通过otherAttributes传入,但是出于ID的特殊性,此处仍然采用
115 //JSON对象传入,并以DOM ID属性附件
116 id=domParams.domId;
117 innerHTML=domParams.content; //innerHTML是DOM属性,而id等是元素属性,注意区别
118 }
119 /*添加属性*/
120 if(null!=domParams.otherAttributes)
121 {
122 for(var i=0;i<domParams.otherAttributes.length;i++)
123 {
124 var otherAttribute =domParams.otherAttributes[i];
125 dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
126 }
127 }
128 /*end 添加属性*/
129 /*添加相关事件*/
130 if(null!=domParams.eventRegisters)
131 {
132 for(var i=0;i<domParams.eventRegisters.length;i++)
133 {
134 var eventRegister =domParams.eventRegisters[i];
135 addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
136 }
137 }
138 /*end 添加相关事件*/
139 try
140 {
141 childNodeAction('append',domParams.parentNode,dynObj);
142 }
143 catch($e)
144 {
145
146 }
147
148 return dynObj;
149}
150/*
151 从父结点中删除子结点
152 @actionType 默认为append,输入字符串 append | remove
153 @parentNode 父结点的DOM对象,或者父结点的ID
154 @childNode 被删除子结点的DOM对象 或者被删除子结点的ID
155*/
156function childNodeAction(actionType,parentNode,childNode)
157{
158 if(!parentNode)
159 {return; }
160
161
162 parentNode=typeof parentNode==='string'?getElement(parentNode):parentNode;
163 childNode=typeof childNode==='string'?getElement(childNode):childNode;
164 if(!parentNode || !childNode)
165 {return;}
166
167 var action=actionType.toLowerCase();
168 if( null==actionType || action.length<=0 || action=='append')
169 {
170 action='parentNode.appendChild';
171 }
172 else
173 {
174 action='parentNode.removeChild';
175 }
176
177 try
178 {
179 eval(action)(childNode);
180 }
181 catch($e)
182 {
183 alert($e.message);
184 }
185}
186
2 动态创建DOM元素的相关函数支持
3 www.cnblogs.com/mcjeremy
4*/
5/*
6 获取以某个元素的DOM对象
7 @obj 该元素的ID字符串
8*/
9function getElement(obj)
10{
11 return typeof obj=='string'?document.getElementById(obj):obj;
12}
13/*
14 获取某个元素的位置
15 @obj 该元素的DOM对象,或该元素的ID
16*/
17function getObjectPosition(obj)
18{
19 obj=typeof obj==='string'?getElement(obj):obj;
20 if(!obj)
21 {
22 return;
23 }
24 var position='';
25 if(obj.getBoundingClientRect) //For IEs
26 {
27 position=obj.getBoundingClientRect();
28 return {x:position.left,y:position.top};
29 }
30 else if(document.getBoxObjectFor)
31 {
32 position=document.getBoxObjectFor(obj);
33 return {x:position.x,y:position.y};
34 }
35 else
36 {
37 position={x:obj.offsetLeft,y:obj.offsetTop};
38 var parent=obj.offsetParent;
39 while(parent)
40 {
41 position.x+=obj.offsetLeft;
42 position.y+=obj.offsetTop;
43 parent=obj.offsetParent;
44 }
45 return position;
46 }
47}
48/*
49 为某个DOM对象动态绑定事件
50 @oTarget 被绑定事件的DOM对象
51 @sEventType 被绑定的事件名,注意,不加on的事件名,如 'click'
52 @fnHandler 被绑定的事件处理函数
53*/
54function addEventHandler(oTarget, sEventType, fnHandler)
55{
56 if (oTarget.addEventListener)
57 {
58 oTarget.addEventListener(sEventType, fnHandler, false);
59 }
60 else if (oTarget.attachEvent) //for IEs
61 {
62 oTarget.attachEvent("on" + sEventType, fnHandler);
63 }
64 else
65 {
66 oTarget["on" + sEventType] = fnHandler;
67 }
68 }
69/*
70 从某个DOM对象中去除某个事件
71 @oTarget 被绑定事件的DOM对象
72 @sEventType 被绑定的事件名,注意,不加on的事件名,如 'click'
73 @fnHandler 被绑定的事件处理函数
74*/
75function removeEventHandler(oTarget,sEventType,fnHandler)
76{
77 if(oTarget.removeEventListener)
78 {
79 oTarget.removeEventListener(sEventType,fnHandler,false)
80 }
81 else if(oTarget.detachEvent) //for IEs
82 {
83 oTarget.detachEvent(sEventType,fnHandler);
84 }
85 else
86 {
87 oTarget['on'+sEventType]=undefined;
88 }
89 }
90
91/*
92 创建动态的DOM对象
93 @domParams是被创建对象的属性的JSON表达,它具有如下属性:
94 @parentNode 被创建对象所属的父级元素(可为元素ID,也可为DOM对象)
95 @domId 被创建对象的ID
96 @domTag 被创建对象的tag名称,支持常用的布局元素,如div span等,但不支持input\form等特别的元素
97 @content 被创建的对象内容
98 @otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrName:'style.color',attrValue:'red'}]
99 @eventRegisters 为被创建的对象添加事件,类似[{eventType:'click',eventHandler:adsfasdf}]的数组
100 -经过组合后,该参数具有如下形式:
101 {parentNode:document.body,domTag:'div',content:'这是测试的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
102*/
103function dynCreateDomObject(domParams)
104{
105 if(getElement(domParams.domId))
106 {
107 childNodeAction('remove',domParams.parentNode,domParams.domId);
108 }
109
110 var dynObj=document.createElement(domParams.domTag);
111
112 with(dynObj)
113 {
114 //id也可以通过otherAttributes传入,但是出于ID的特殊性,此处仍然采用
115 //JSON对象传入,并以DOM ID属性附件
116 id=domParams.domId;
117 innerHTML=domParams.content; //innerHTML是DOM属性,而id等是元素属性,注意区别
118 }
119 /*添加属性*/
120 if(null!=domParams.otherAttributes)
121 {
122 for(var i=0;i<domParams.otherAttributes.length;i++)
123 {
124 var otherAttribute =domParams.otherAttributes[i];
125 dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
126 }
127 }
128 /*end 添加属性*/
129 /*添加相关事件*/
130 if(null!=domParams.eventRegisters)
131 {
132 for(var i=0;i<domParams.eventRegisters.length;i++)
133 {
134 var eventRegister =domParams.eventRegisters[i];
135 addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
136 }
137 }
138 /*end 添加相关事件*/
139 try
140 {
141 childNodeAction('append',domParams.parentNode,dynObj);
142 }
143 catch($e)
144 {
145
146 }
147
148 return dynObj;
149}
150/*
151 从父结点中删除子结点
152 @actionType 默认为append,输入字符串 append | remove
153 @parentNode 父结点的DOM对象,或者父结点的ID
154 @childNode 被删除子结点的DOM对象 或者被删除子结点的ID
155*/
156function childNodeAction(actionType,parentNode,childNode)
157{
158 if(!parentNode)
159 {return; }
160
161
162 parentNode=typeof parentNode==='string'?getElement(parentNode):parentNode;
163 childNode=typeof childNode==='string'?getElement(childNode):childNode;
164 if(!parentNode || !childNode)
165 {return;}
166
167 var action=actionType.toLowerCase();
168 if( null==actionType || action.length<=0 || action=='append')
169 {
170 action='parentNode.appendChild';
171 }
172 else
173 {
174 action='parentNode.removeChild';
175 }
176
177 try
178 {
179 eval(action)(childNode);
180 }
181 catch($e)
182 {
183 alert($e.message);
184 }
185}
186
使用示例:
[
,
{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’;
以上代码纯属原创
欢迎转载,但请注明出处:http://www.cnblogs.com/mcjeremy