从零开始重新实现getElementsByClassName（仅限于Vanilla JS）

为了更加熟悉递归DOM &，我决定从头开始重新创建getElementsByClassName（仅适用于vanilla JS，不适用于jQuery）。目前，我可以在DOM中找到所有具有我想要的类的元素，但是遇到了只能获得具有两个特定类（或更多）的元素的方法的问题。从零开始重新实现getElementsByClassName（仅限于Vanilla JS）

<div class="one two"> 
    <h1 class="one"> 
     <span class="one two"> 
    </h1> 
</div>

我当前实现返回我的期望，返回包含类 '一' 的每一个元素：

我试图去：

getElementsByClassName('one two'); 
[<div class="one two"></div>, <span class="one two"</span>]

我遇到的问题之一是classList.contains：

element.classList; 
// ['one, 'two']; 

element.classList.contain("one"); 
//returns true since the value actually exists 


//PROBLEM: 
element.classList.contains("one two"); 
//this is looking for "one two" in the array and not 'one' and 'two'. 
//this returns false & my code breaks 

//How would I be able to do something like this, even if it 
//means recreating my own helper contains function? 
contains('one','two');

我的功能：

var getElementsByClassName = function(className){ 
    var results = []; 
    function getClass(nodeList){ 
    var childList = nodeList.children; 
    _forEach(childList, function(node) { 
    //1st level body check 
     if(node.classList && node.classList.contains(className)){ 
     results.push(node); 
     } 

     //has children, recurse 
     if(node.children) { 
     getClass(node); 
     } 
     else { 
     getClass(node); 
     } 
    }); 
    } 
    getClass(document.body); 
    return results; 
} 



//Helper forEach function to iterate over array like DOM objects 
var _forEach = function(collection, func) { 
for(var i = 0; i < collection.length; i++) { 
    func(collection[i], i, collection); 
} 
}

来源

2015-06-27 Clifford Fajardo

'[ '一'，“二'] .every（function（className）{return node.classList.contains（className）; }）' –

谢谢，几个星期前我刚开始学习几个月的编程和函数式编程。时间解剖这=）。 –

你很好，你有关键要素：真正努力学习。好一个。（这就是为什么我没有这样做的原因，只是指出*你会怎么做。） –

评论中的代码 —我还没有实现它适合你，只是指出，你会怎么做：

var getElementsByClassName = function(className){ 
    // ***Here, split className on whitespace into an array ** 
    var results = []; 
    function getClass(nodeList){ 
    var childList = nodeList.children; 
    _forEach(childList, function(node) { 
    //1st level body check 
     // **Here, only include the element if Array#every is true, 
     // **where you give Array#every a function that does your 
     // classList.contains on the name for that iteration 
     if(node.classList && node.classList.contains(className)){ 
     results.push(node); 
     } 

     //has children, recurse 
     if(node.children) { 
     getClass(node); 
     } 
     else { 
     getClass(node); 
     } 
    }); 
    } 
    getClass(document.body); 
    return results; 
}

来源

2015-06-27 17:45:38

从零开始重新实现getElementsByClassName（仅限于Vanilla JS）

回答

相关问题