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