javascript - 在没有库或 getElementsByClassName 的情况下查找具有类的元素

标签 javascript html

这是我被问到的问题,我想知道该怎么做,或者这是否是一个技巧问题。我使用 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>

我的第一个想法是,这应该是一个递归函数,并且应该从根 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);
    }

}

有什么关于我遗漏的建议吗?

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

最佳答案

您对 traverse() 的递归调用传递了最初传入的相同元素,因此它只是一遍又一遍地做完全相同的事情,直到堆栈溢出(嘿!)。您需要为元素的每个子元素调用遍历,而不是将元素传回。

关于javascript - 在没有库或 getElementsByClassName 的情况下查找具有类的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26919384/

相关文章:

html - 搜索图标在 Internet Explorer 中不显示放大镜

javascript - 如何编辑上传到某个盒子的图片?

javascript - 如何使用表单中的action属性管理自动提交

javascript - 使用 nsIFileInputStream 和 nsIConverterInputStream 时加载的数据被 chop

javascript - Reactjs - Web 应用程序需要运行时权限吗?

javascript - 一种防止在 puppeteer 实例中打开开发工具的方法

javascript - 如何破坏内容安全策略?

javascript - PHP:条件 'if link is clicked' 则页面不刷新

javascript - 使用 jQuery 检索 <li> 元素中 anchor 的文本

javascript - 在 ajax 接收的数据上防止 javascript 中的 XSS