与JavaScript中的document.getElementByClassName（）相关的问题 [英] Issue Related to document.getElementByClassName() in JavaScript

问题描述

我有javascript函数：

I have javascript function:

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

现在我想查找 el ，我的意思是可能是这样的：

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

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

如何查找子元素？

推荐答案

您可以编写getElementsByClassName函数来尝试qSA，然后是本机getElementsByClassName，然后是DOM遍历，如下所示。

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

它看起来像很多代码，但它有很好的文档记录，使用3种不同的功能测试方法并支持多个类，因此非常稳固和功能强大。 b
$ b

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

这篇关于与JavaScript中的document.getElementByClassName（）相关的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！