通过在javascript函数中传递类名来查找页面中的所有元素,而无需使用getElementsBy*或任何lib函数



我试图通过在此函数中传递类名来查找页面中的所有元素,我将所有元素作为数组对象获取,但我只需要那些只有我的类名的元素。

    var custSearch = function (element, className) {
    var elementsArray  = [];
    // add spaces 
    var q = ' ' + className + ' ';
    (function recFind (node) {
    // Looping through all the child nodes
     for (var i = 0; i < node.childNodes.length; i++) {
      var currentNode  = node.childNodes[i];
      var currentClass = currentNode.className;
      // check if current class match with param class 
      if ((' '+currentClass+' ').indexOf(q)) {
        elementsArray.push(currentNode);
      }

      currentNode.childNodes && recFind(currentNode);
    }
   })(element);
  return elementsArray;
  }; 
custSearch(document, 'spch');

我不想使用 getElementsByClassName 函数,但我想要类似的结果,上面的函数应该给我确切的结果,但我没有发现我做错了什么,有人可以告诉我我是否犯了任何逻辑错误吗?

HTML是这样的

<div class="spch s2fp-h" style="display:none" id="spch"><div class="spchc" id="spchc"><div class="_o3"><div class="_AM"><span class="_CMb" id="spchl"></span><span class="button" id="spchb"><div class="_wPb"><span class="_AUb"></span><div class="_Fjd"><span class="_oXb"></span><span class="_dWb"></span></div></div></span></div><div class="_gjb"><span class="spcht" id="spchi" style="color:#777"></span><span class="spcht" id="spchf" style="color:#000"></span></div><div class="google-logo"></div></div><div class="_ypc"><div class="_zpc"></div></div></div><div class="close-button" id="spchx">×</div></div>

尝试以下操作:

function myGetElementsByClassName(className) {
    var nodes = document.getElementsByTagName('*');
  var out = [];
  for( var i=0, len=nodes.length; i<len; i++) {
    if( nodes[i].classList.contains( className ) ) {
        out.push( nodes[i] );
    }
  }
  return out;
}

最新更新