用条件遍历dom元素的最佳方法是什么？

Question

从页面中找到符合我需要的大小的所有元素，以及减少浏览器重载的最佳方法是什么？

最重要的是使浏览器不会过载，如果在页面上有很多元素，它就不会崩溃。

我现在使用的是：

elements = document.getElementsByTagName("*");
len = elements.length; 
for(var i = 0; i < len; i++) 
    if(elements[i].clientHeight == MyHeight && elements[i].clientWidth == MyWidth)
{ /*my code*/ }

如果有人知道一种更好的方式，不会像我现在所使用的那样给浏览器带来压力，那么这就是我需要的。

Answer 1

如果你绝对必须这样做，那么以递归方式遍历树会更有效率，因为一旦你点击了一个小于你需要的元素，你就什么都不知道它可以是所需的尺寸。在大多数情况下似乎仍然会有更好的解决方案，但我不知道你的具体问题。

编辑：

这很有效。

function findElements( width, height, element ){
    var results = Array();

    for( var i=0; i<element.childNodes.length; i+=1 ){
        var childElement = element.childNodes[i];

        if( childElement.clientWidth == width && childElement.clientHeight == height ){
            results.push(childElement);
            results = results.concat(findElements(width, height, childElement));

        } else if( childElement.clientWidth < width || childElement.clientHeight < height ){
            continue;

        } else {
            results = results.concat(findElements(width, height, childElement));
        }
    }

    return results;
}

findElements(myWidth, myHeight, document);

Answer 2

我认为我们在谈论速度。（尽管差异很小）。

Who is the fastest??? - ＆gt;点击运行按钮并自行测试!!!

我猜document.body.querySelectorAll("*");是一个明显的赢家。

var items = document.body.querySelectorAll("*");
     var target, i, len = items.length;
     for (i=0;i<len;i++) {
       target=items[i];
if(//your condition)
    { and the code}

**结论：**只需编写易懂，易读，优雅的代码。我认为理解逻辑是最重要的部分。

更新：

function findParentNode() {

    var testObj = document.body.querySelectorAll("*");;
    for(var i=0;i<=testObj.length;i++){
      if(testobj.offsetWidth=="your width" && testobj.offsetHeight=="your height"){
            //push it in an array or do whatever you wanted to do 
          }
     else{
     //no elements found!!!
     }
    }
}