Question

我有javascript功能：

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

现在我想找到el中包含的所有元素，我的意思是它可能是这样的：

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

如何找到子元素？

Answer 1

请参阅querySelectorAll()，其浏览器支持略高于getElementsByClassName()（Firefox版本低于3.5）：

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

Answer 2

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

它看起来像很多代码，但它有很好的文档记录，使用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

如果你可以使用jquery我会推荐它。这使得使用选择器变得更加容易。

否则你可以这样做：

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

你可以使用它来创建你自己的函数沿getSubElementsByClassName？

Answer 4

使用jQuery的语法：

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

这个lib很神奇！

与JavaScript中的document.getElementsByClassName（）相关的问题

4 个答案: