Problem related to document.getElementByClassName () in JavaScript

Question

I have a javascript function:

var el = document.getElementsByClassName('dixc');

now I want to find the whole element contained in el, I mean, is something like this possible:

var elchild = el.getElementsByClassName('navNew');

How to find children?

Answer 1

See querySelectorAll(), which has slightly better browser support than getElementsByClassName()(except for versions of Firefox older than 3.5):

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

Answer 2

You can write the getElementsByClassName function, which tries qSA, then the getElementsByClassName proper name, then the DOM, as shown below.

, , 3 , .

/*
  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;
}

Answer 3

If you can use jquery, I would recommend it. This greatly facilitates the use of selectors.

Otherwise, you can do this:

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

Can you use this to create your own function along the lines getSubElementsByClassName?

Answer 4

The syntax with jQuery is:

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

This library is magical!