Issue Related To Document.getElementByClassName() In JavaScript

I have javascript function: var el = document.getElementsByClassName('dixc'); now I want to find all the element contained in the el, I mean is it possible something like this: va

Solution 1:

See querySelectorAll(), which has slightly better browser support than getElementsByClassName() (with the exception of Firefox versions older than 3.5):

document.querySelectorAll(".dixc .navNew");

Solution 2:

You could write a getElementsByClassName function that tries qSA, then a native getElementsByClassName, then DOM traverse, like the following.

It looks like a lot of code, but it's well documented, uses 3 different feature tested methods and supports multiple classes, so reasonably solid and functional.

/*
  Selector must be per CSS period notation, using attribute notation
  (i.e. [class~=cName]) won't work for non qSA browsers:

    single class: .cName
    multiple class: .cName0.cName1.cName2

  If no root element provided, use document

  First tries querySelectorAll, 

  If not available replaces periods '.' with spaces
  and tries host getElementsByClassName

  If not available, splits on spaces, builds a RegExp
  for each class name, gets every element inside the
  root and tests for each class.

  Could remove duplicate class names for last method but
  unlikely to occur so probably a waste of time.

  Tested in:
    Firefox 5.0 (qSA, gEBCN, old)
    Firefox 3.5 (qSA, gEBCN, old)
    IE 8 (old method only, doesn't support qSA or gEBCN)
    IE 6 (old method only, doesn't support qSA or gEBCN)
    Chrome 14 (qSA, gEBCN, old)
    Safari 5
*/
function getByClassName(cName, root) {

  root = root || document;
  var reClasses = [], classMatch;
  var set = [], node, nodes;

  // Use qSA if available, returns a static list
  if (root.querySelectorAll) {
    alert('qsa');
    return root.querySelectorAll(cName);
  }

  // Replace '.' in selector with spaces and trim
  // leading and trailing whitespace for following methods
  cName = cName.replace(/\./g, ' ').replace(/^\s+/,'').replace(/\s+$/,'');

  // Use gEBCN if available
  if (root.getElementsByClassName) {
    alert('gEBCN');
    nodes = root.getElementsByClassName(cName);

    // gEBCN usually returns a live list, make it static to be
    // consistent with other methods
    for (var i=0, iLen=nodes.length; i<iLen; i++) {
      set[i] = nodes[i];
    }
    return set;
  }

  // Do it the long way... trim leading space also
  nodes = root.getElementsByTagName('*');
  cName = cName.split(/\s+/);

  // Create a RegExp array of the class names to search on
  // Could filter for dupes but unlikely to be worth it
  for (var j = 0, jLen = cName.length; j < jLen; j++) {
    reClasses[j] = new RegExp('(^|\\s+)' + cName[j] + '\\s+|$');
  }

  // Test each element for each class name
  for (var m = 0, mLen = nodes.length; m < mLen; m++) {
    node = nodes[m];
    classMatch = true;

    // Stop testing class names when get a match
    for (var n = 0, nLen = reClasses.length; n < nLen && classMatch; n++) {
      classMatch = node.className && reClasses[n].test(node.className);
    }

    if (classMatch) {
      set.push(node);
    }
  }
  return set;
}

Solution 3:

If you can use jquery I would recommed it. It makes it a lot easier to use selectors.

Otherwise you could do this:

var el = document.getElementsByClassName('dixc');
var j = 0;
for(i in el)
{
    if(el[i].className == 'dixc')
    {
        elchild[j] = el[i];
        j++;
    }
}

You could use that to create your own function along the lines of getSubElementsByClassName?

Solution 4:

Syntax with jQuery:

var elchild = $(".dixc .navNew");

This lib is magic!