獲取視口Javascript中的所有元素

Question

我想知道是否有可能（在 javascript 或 jquery 但沒有任何插件的情況下）在當前視口中獲取所有元素（例如表行 tr）而不遍歷每個元素？ 我找到了很多如何檢查指定元素是否在當前視口中的示例，但我需要的是一個函數返回當前視口中所有元素的列表。 我需要這個來進行虛擬化，因為這個表應該有無限的容量，從兩百萬行循環遍歷每一行效率很低:)

有什么合理的方法可以做到這一點嗎？

Answer 1

假設您沒有對定位進行任何花哨的操作，則可以通過二分搜索找到視口中的表行。 例如，對於 200000 行，大約需要 18 次查找才能定位頁面上的第一行（ jsfiddle ，警告：加載緩慢）。 這也可以擴展為查找最后一個元素，或者您可以從第一個元素開始循環遍歷元素，直到找到不再可見的元素。

var rows = table.children().children();
var start = 0;
var end = rows.length;
var count = 0;

while(start != end) {
    var mid = start + Math.floor((end - start) / 2);
    if($(rows[mid]).offset().top < document.documentElement.scrollTop)
        start = mid + 1;
    else
        end = mid;
}

顯然，如果有任何東西是浮動的、絕對定位的等等，這不會很好地工作。簡而言之：被搜索的節點必須按順序排列，使得rows[N-1].top <= rows[N].top 。 對於諸如表格之類的內容，如果未應用樣式且不存在多行單元格，則應為真。