We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

rolandog on 07/18/06


Tagged

javascript DOM arrays dynamic


Versions (?)


Who likes this?

9 people have marked this snippet as a favorite

Roshambo
meth
cochambre
jkochis
rolandog
nicolaspar
shachi
SpinZ
hans


Konstructor: Dynamic Element Kreator


Published in: JavaScript 


URL: http://rolandog.com/archives/2006/07/18/konstructor

Constructs an element out of arrays. Using nested arrays translates into nested ChildNodes. Update 2006-07-19: Added documentation (comments). Update 2006-11-25: Reduced the ammount of code needed.

  1. /* Begin Type-detection functions */
  2.  
  3. //A set of helper functions for determining the type of 'a'.
  4. var Is={
  5. nt:function(a){
  6. return(a===null||a===undefined);
  7. },
  8. Function:function(a){
  9. return(typeof(a)==='function')?a.constructor.toString().match(/Function/)!==null:false;
  10. },
  11. String:function(a){
  12. return(typeof(a)==='string')?true:(typeof(a)==='object')?a.constructor.toString().match(/string/i)!==null:false;
  13. },
  14. Array:function(a){
  15. return(typeof(a)==='object')?a.constructor.toString().match(/array/i)!==null||a.length!==undefined:false;
  16. },
  17. Boolean:function(a){
  18. return(typeof(a)==='boolean')?true:(typeof(a)==='object')?a.constructor.toString().match(/boolean/i)!==null:false;
  19. },
  20. Date:function(a){
  21. return(typeof(a)==='date')?true:(typeof(a)==='object')?a.constructor.toString().match(/date/i)!==null:false;
  22. },
  23. HTML:function(a){
  24. return(typeof(a)==='object')?a.constructor.toString().match(/html/i)!==null:false;
  25. },
  26. Number:function(a){
  27. return(typeof(a)==='number')?true:(typeof(a)==='object')?a.constructor.toString().match(/Number/)!==null:false;
  28. },
  29. Object:function(a){
  30. return(typeof(a)==='object')?a.constructor.toString().match(/object/i)!==null:false;
  31. },
  32. RegExp:function(a){
  33. return(typeof(a)==='function')?a.constructor.toString().match(/regexp/i)!==null:false;
  34. }
  35. };
  36.  
  37. //An improved version of the 'typeof()' function.
  38. var type={
  39. of:function(a){
  40. for(var i in Is){
  41. if(Is[i](a)){
  42. return i.toLowerCase();
  43. }
  44. }
  45. }
  46. };
  47.  
  48. /* End Type-detection functions */
  49.  
  50.  
  51. //Custom version of gEBC, so that it returns null if nothing is found.
  52. document.getElementsByClass=function(a){
  53. var f=[],rE=new RegExp('(^|\\s)'+a+'(\\s|$)'),els=document.getElementsByTagName('*'),i;
  54. for(i=0;i<els.length;i+=1){
  55. if(rE.test(els[i].className)){
  56. f.push(els[i]);
  57. }
  58. }
  59. return(f.length)?f:null;
  60. };
  61.  
  62. //Custom version of gEBTName, so that it returns null if nothing is found.
  63. document.getElementsByTag=function(a){
  64. var r=document.getElementsByTagName(a);
  65. return(r.length)?r:null;
  66. };
  67.  
  68. //shortcuts to the 'getters'.
  69. var by={
  70. Id:function(a){
  71. return document.getElementById(a);
  72. },
  73. Class:function(a){
  74. return document.getElementsByClass(a);
  75. },
  76. Tag:function(a){
  77. return document.getElementsByTag(a);
  78. }
  79. };
  80.  
  81. /* Custom dollar function ($()) (searches by Ids, Class Names and Tag Names). */
  82. //getElementsByClassName: $('aClassName')
  83. //getElementsByTagName: $('img')
  84. //getElementById: $('someId')
  85. function $(){
  86. var a=arguments,r=[],e,b,i;
  87. for(i=0;i<a.length;i+=1){
  88. e=a[i];
  89. if(Is.String(e)){
  90. for(var j in by){
  91. b=by[j](e);
  92. if(b && Is.Array(b)){
  93. for(var k=0;k<b.length;k+=1){
  94. r.push(b[k]);
  95. }
  96. }else if(b && !Is.Array(b)){
  97. r.push(b);
  98. }
  99. }
  100. }else{
  101. r.push(e);
  102. }
  103. }
  104. return(r.length)?(r.length===1)?r[0]:r.unique():null;
  105. }
  106.  
  107. //helper function that weeds out duplicates on the custom $ (dollar) function.
  108. Array.prototype.unique=function(){
  109. var i,e,t=[];
  110. for(i=0;i<this.length;i+=1){
  111. e=this[i];
  112. t=this.slice(i+1,this.length);
  113. while(t.indexOf(e)>-1){
  114. this.splice(t.indexOf(e)+i+1,1);
  115. t.splice(t.indexOf(e),1);
  116. }
  117. }
  118. return this;
  119. };
  120.  
  121. /* the de-Konstructor function */
  122. //usage: document.getElementsByTagName("p").d();
  123. //usage: document.getElementById("anId").d();
  124. //usage: "img".d();
  125. Array.prototype.d=Object.prototype.d=String.prototype.d=function(e){
  126. var t=type.of(this);
  127. switch(t){
  128. case "array":for(var i=0;i<this.length;i+=1){try{this[i].parentNode.removeChild(this[i]);}catch(e){}}break;
  129. case "html":try{this.parentNode.removeChild(this);}catch(e){}break;
  130. case "string":try{$(this).d();}catch(e){}break;
  131. default:break;
  132. }
  133. };
  134.  
  135.  
  136. /* Begin DOM custom functions (rigged with 'event monitoring')*/
  137.  
  138. //usage: someobject.before(anobject);
  139. Object.prototype.before=function(a,e){
  140. try{a.parentNode.insertBefore(this,a);}catch(e){}queue.check();
  141. };
  142.  
  143. //usage: someobject.after(anobject);
  144. Object.prototype.after=function(a,e){
  145. try{this.before(a.nextSibling);}catch(e){}queue.check();
  146. };
  147.  
  148. //usage: anobject.append(someobject);
  149. Object.prototype.append=function(a,e){
  150. try{this.appendChild(a);}catch(e){}queue.check();
  151. };
  152.  
  153. //usage: anobject.prepend(someobject);
  154. Object.prototype.prepend=function(a,e){
  155. try{this.before(a,this.firstChild);}catch(e){}queue.check();
  156. };
  157.  
  158. /* End DOM custom functions*/
  159.  
  160.  
  161. //sets an object's attribute (attributeName,attributeValue)
  162. //if the attributeName is an 'on-something' event, it sends it to the queue.
  163. Object.prototype.assign=function(aN,aV,e){
  164. if(aN.match(/^on\w*/)){
  165. queue.event(this,aN,aV);
  166. }else{
  167. try{this[aN]=aV;}catch(e){try{this.setAttribute(aN,aV);}catch(e){}}
  168. }
  169. };
  170.  
  171.  
  172. /* The Events Queue */
  173. var queue={
  174. //whenever a custom DOM insertion method is called, this function checks
  175. //if the targets are in the document, if so, it sets the events properly.
  176. check:function(){
  177. var t,aN,aV;
  178. for(var i=0;i<this.targets.length;i+=1){
  179. t=by.Id(this.targets[i]);
  180. aN=this.targetEvents[i];
  181. aV=this.targetFunctions[i];
  182. if(t){
  183. try{t[aN]=aV;}catch(e){try{t.setAttribute(aN,aV);}catch(e){}}
  184. this.targets.splice(i,1);this.targetEvents.splice(i,1);this.targetFunctions.splice(i,1);
  185. }
  186. }
  187. },
  188. //pushes the object's id, eventName and function into temporary arrays.
  189. event:function(obj,Name,Func){
  190. this.tag(obj);
  191. this.targets.push(obj.id);
  192. this.targetEvents.push(Name);
  193. this.targetFunctions.push(Func);
  194. },
  195. //if the object doesn't have an id, it creates one for it.
  196. tag:function(obj){
  197. if(Is.nt(obj.id)||obj.id===""){
  198. var t=obj.tagName.toLowerCase();
  199. obj.id=t+document.getElementsByTagName(t).length;
  200. }
  201. },
  202. targetEvents:[],
  203. targetFunctions:[],
  204. targets:[]
  205. };
  206.  
  207. //Creates an HTML element from a string
  208. //adapted from http://simon.incutio.com/archive/2003/06/15/javascriptWithXML
  209. String.prototype.create=function(){
  210. return(document.createElementNS!==undefined)?document.createElementNS("http://www.w3.org/1999/xhtml",this):document.createElement(this);
  211. };
  212.  
  213.  
  214. /* The Konstructor function */
  215. //usage: var asdf=["p","This link points to ",["a",{href:"http://example.com",onclick:function(){alert("Can\'t touch this.");return false;},title:"Clicking won't take you there, as the \'onclick\' function returns \'false\'."},"example.com"],". However, the onclick function won\'t let you go there."].k();
  216. Array.prototype.k=function(){
  217. //creates the element
  218. var element=this[0].create();
  219. //if there is more stuff inside the Array
  220. if(this.length>1){
  221. for(var i=1;i<this.length;i+=1){
  222. //if it's an Object, it has attributes. Set them.
  223. if(Is.Object(this[i])){
  224. //attributes,attributeValue
  225. var a=this[i],aV;
  226. //attributeName in attributes
  227. for(var aN in a){
  228. aV=a[aN];
  229. //if you're creating a 'param' element, this is a time saver:
  230. //['param',{'movie':'http://example.com/asdf.avi'},{}]
  231. if(this[0]==="param"){element.assign('name',aN);element.assign('value',aV);}
  232. else{element.assign(aN,aV);}
  233. }
  234. }
  235. //if it's an Array, parse it and then append it.
  236. else if(Is.Array(this[i])){
  237. var child=this[i].k();
  238. element.appendChild(child);
  239. }
  240. //if it's a String,
  241. else if(Is.String(this[i])){
  242. var txt=this[i].k();
  243. element.appendChild(txt);
  244. }
  245. }
  246. }
  247. return element;
  248. };
  249.  
  250. //Returns a TextNode from a string.
  251. String.prototype.k=function(){
  252. return document.createTextNode(this);
  253. };

Report this snippet 

You need to login to post a comment.