Your Ad Here

Posted By

freelancephp on 03/30/10


Tagged

js object elements DOM selector


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

o0110o


SimpleSelector, Javascript DOM selector


 / Published in: JavaScript
 

URL: http://www.freelancephp.net/simpleselector-javascript-dom-selector/

SimpleSelector is a small DOM selector object with support for the most used selectors. It's also the default selector for the jLim JavaScript framework.

Why use SimpleSelector? - very small, less than 2kb minified - easy to use with $$() - no overhead, no functions you hardly ever use - ideal for smaller websites

  1. /*!
  2.  * $imple$elector
  3.  *
  4.  * Selector by id, className or tagName, f.e.:
  5.  * $$( '#wrap' ) or $$( '.special' ) or $$( 'p' )
  6.  *
  7.  * Mulitple selectors seperated by comma, f.e.:
  8.  * $$( '#id, .cls' )
  9.  *
  10.  * Give context as second param, f.e.:
  11.  * $$( 'a', '#wrap' ) or $$( 'a', wrapNode ) or $$( 'a', [node1, node2] )
  12.  *
  13.  * @version 0.2
  14.  * @author Victor Villaverde Laan
  15.  * @link http://www.freelancephp.net/simpleselector-javascript-dom-selector/
  16.  * @license MIT license
  17.  */
  18. var SimpleSelector = {
  19.  
  20. /**
  21. * Find elements with the given selector within the context
  22. * @param selector [string]
  23. * @param context [string | DOM node | array of DOM nodes]
  24. * @return [DOM node | array of DOM nodes | empty array]
  25. */
  26. find: function ( selector, context ) {
  27. var selectors = selector.split( ',' ),
  28. elements = [],
  29. wrappers = [];
  30.  
  31. // set wrappers
  32. if ( typeof context == 'string' ) {
  33. var wraps = SimpleSelector.find( context );
  34. // set array to wrappers
  35. wrappers = ( wraps.constructor == Array ) ? wraps : [ wraps ];
  36. } else if ( context && context.constructor == Array ) {
  37. wrappers = context;
  38. } else {
  39. // document is default context
  40. wrappers.push( context || document );
  41. }
  42.  
  43. // find matching elements within the wrappers (context)
  44. for ( var a = 0, b = wrappers.length; a < b; a++ ) {
  45. for ( var x = 0, y = selectors.length; x < y; x++ ) {
  46. // selector: trim spaces
  47. var s = selectors[x].replace( / /g, '' ),
  48. // get operator
  49. operator = s.substr( 0, 1 ),
  50. // get key
  51. key = s.substr( 1 ),
  52. els = [];
  53.  
  54. // get matching elements
  55. if ( operator == '#' ) {
  56. // get element by id
  57. els[0] = document.getElementById( key );
  58. // check if element is part of context
  59. if ( els[0] && SimpleSelector.isDescendant( els[0], wrappers[ a ] ) )
  60. elements.push( els[0] );
  61. } else if ( operator == '.' ) {
  62. // get element by className
  63. els = SimpleSelector.getByClass( key, wrappers[ a ] );
  64. // convert type to array
  65. els = [].slice.call( els, 0 );
  66. // add to elements collection
  67. elements = elements.concat( els );
  68. } else {
  69. // get element by tagName
  70. els = wrappers[ a ].getElementsByTagName( s );
  71. // add to elements collection
  72. // in this case [].slice.call( els, 0 ) does not work
  73. // in IE, says constructor is undefined??
  74. for ( var i = 0, j = els.length; i < j; i++ )
  75. elements.push( els[ i ] );
  76. }
  77. }
  78. }
  79.  
  80. // return single element or array of elements
  81. return ( elements.length == 1 ) ? elements[0] : elements;
  82. },
  83.  
  84. /**
  85. * Check wether an element is a descendant of the given ancestor
  86. * @param descendant [DOM node]
  87. * @param ancestor [DOM node]
  88. * @return [boolean]
  89. */
  90. isDescendant: function ( descendant, ancestor ) {
  91. return ( ( descendant.parentNode == ancestor )
  92. || ( descendant.parentNode != document )
  93. && arguments.callee( descendant.parentNode, ancestor ) );
  94. },
  95.  
  96. /**
  97. * Cross browser function for getting elements by className
  98. * @param className [string]
  99. * @param context [DOM node]
  100. * @return [array of DOM nodes]
  101. */
  102. getByClass: function ( className, context ) {
  103. var elements = [],
  104. expr = new RegExp('\\b' + className + '\\b'),
  105. wrapper = context || document,
  106. allElements = wrapper.getElementsByTagName( '*' );
  107.  
  108. // filter all elements that contain the given className
  109. for ( var x = 0, y = allElements.length; x < y; x++ ) {
  110. if ( expr.test( allElements[ x ].className ) )
  111. elements.push( allElements[ x ] );
  112. }
  113.  
  114. return elements;
  115. }
  116.  
  117. };
  118.  
  119. // if global $$ is not set
  120. if ( ! window.$$ )
  121. window.$$ = SimpleSelector.find;

Report this snippet  

You need to login to post a comment.