按大小獲取元素

Question

我必須獲取大小爲300x250的HTML頁面中的所有元素（只是父級，所以如果DIV是300x250，並且圖像在同一維度內，我將得到div）。

我不能使用jQuery或其他框架這樣的，我認爲在這些方式：（壞人壞事不喜歡它）

1. 循環都在一個頁面檢查它們的尺寸元素
2. 使用XPath（有沒有辦法通過的寬度和高度與XPath來過濾？）

你們是否知道一個更好的方式來做到這一點？

Answer 1

你有沒有說過這width或height你有興趣。當然，如果有img元素在文檔中width或height屬性然後XPath的可以選擇它們（例如//img[@width = '300' and @height = '250']）。但像div元素之類的容器元素不具有這些屬性，通常您可以訪問它們的DOM屬性。據我所知，XPath表達式中無法訪問這些屬性，因此XPath只能幫助您選擇某些元素，然後您需要訪問由XPath評估返回的任何DOM元素節點的屬性offsetWidth/offsetHeight。所以這個答案主要是關於你的XPath請求。

根據目標瀏覽器的不同，您可以使用TreeWalkerhttps://developer.mozilla.org/en-US/docs/Web/API/treeWalker.filter或NodeIteratorhttps://developer.mozilla.org/en-US/docs/Web/API/NodeIterator。

Answer 2

您不需要遍歷頁面上的所有元素（例如querySelectorAll('*')）。事實上，考慮到您要求第一個祖先節點具有正確大小的要求，這樣做會更困難。

但是，@MartinHonnen是正確的：無法通過XPath提取<div>或其他靈活大小的元素的offsetHeight。你必須瀏覽元素並測試它們。

我會使用廣度優先或深度優先遍歷來修剪分支，當它被發現是正確的大小，或者當大小變得太窄或太短時。這應該會顯着改善您的性能。

下面的代碼草圖（未測試）：

function findElementsBySize(w,h){ 
    var found = []; 
    recursiveFind(document.body); 
    return found; 

    function recursiveFind(el){ 
    if (el.offsetWidth==w && el.offsetHeight==h){ 
     found.push(el); 
    } else if (el.offsetWidth>=w && el.offsetHeight>=h){ 
     for (var i=el.childNodes.length;i--;){ 
     recursiveFind(el.childNodes[i]); 
     } 
    } 
    } 
}