查找没有库或getElementsByClassName的类的元素

Question

查找没有库或getElementsByClassName的类的元素

这是我被问到的问题,我想知道该怎么做或者这是一个技巧问题.我一直只使用JavaScript一段时间,所以我不太确定.

假设您有一个包含大量内容的网页.不使用任何库或getElementsByClassName,遍历DOM并查找具有特定类名的所有元素.

示例HTML

<body>
    <div>
        <div class='myTarget'>
             Target exists here
        </div>
    </div>

    <div>
        <table>
            <tbody>
              <tr> <td class='myTarget'> Target exists here </td> </tr>
            </tbody>
        </table>
    </div>

    <div>
       <span class='myTarget notSameAsTarget'>Stuff<span>
    </div>

</body>

Run Code Online (Sandbox Code Playgroud)

我的第一个想法是,这应该是一个递归函数,应该从根开始 document.documentElement

JS:

var root = document.documentElement;
var targetClass = 'myTarget';
var elementsWithTargetClass = []; // store in array

function traverse(element, targetClassName){
    // get class of current element
    var currentClass = element.className;

    // add to array if class matches
    if(currentClass.trim() === targetClassName)
        elementsWithTargetClass.push(element);

    // recursive call
    if(element.children){
         traverse(element, targetClassName);
    }

}

Run Code Online (Sandbox Code Playgroud)

关于我缺少什么的任何建议？

    // recursive call - updated
    if(element.children){
         for(var child in element.children)
             traverse(element.children[child], targetClassName);
    }

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 8

你对traverse()的递归调用传递了最初传入的相同元素,所以它只是一遍又一遍地做同样的事情直到堆栈溢出(嘿!).您需要为元素的每个子元素调用遍历,而不是将元素重新传入.

归档时间：	11 年，2 月前
查看次数：	658 次
最近记录：	11 年，2 月前