查找具有最大面积（主要内容区域）的元素？

Question

如何在网页上找到最大的矩形，即主要内容区域？

例如，比较侧边栏、标题、页脚和主要内容区域的大小。是否可能通过在页面上发现的所有矩形中搜索最大的矩形来找到主要内容区域？

通常，最高和最宽的矩形被认为是主要内容区域，想知道是否有一种算法可以用Javascript或Python测试这个假设。

- I Love Python

Answer 1

所以，虽然这个问题对我来说没有太大的意义，但我还是忍不住想要玩弄递归扫描DOM树以通过其大小检索和排序元素的概念 :)

以下是一个愚蠢的函数来执行此操作（您可以将其粘贴到浏览器控制台中）:

function scanSizes(root) {
  return [].reduce.call(root, function(sizes, node) {
    var bounds = node.getBoundingClientRect();
    sizes.push({tag: node.outerHTML, area: bounds.width * bounds.height});
    var children = node.querySelectorAll("*");
    if (children.length > 0)
      sizes.push.apply(sizes, scanSizes(children));
    return sizes;
  }, []).sort(function(x, y) {
    var a = x.area, b= y.area;
    return a > b ? -1 : a < b ? 1 : 0;
  });
}

var sizes = scanSizes(document.querySelectorAll("body > *"));

// sizes[0].tag contains the largest html tag (as a string)
// sizes[0].area its area size in pixels (width * height)

编辑：更加严肃地说，你可能会对这个主题及相关答案感兴趣。

编辑：当然，从性能方面考虑，递归并不是一个很好的选择。你可以采用类似以下的方式来得到更有效率的解决方案：

function scanSizes(root) {
  return [].map.call(root, function(node) {
    var bounds = node.getBoundingClientRect();
    return {tag: node.outerHTML, area: bounds.width * bounds.height};
  }).sort(function(x, y) {
    var a = x.area, b= y.area;
    return a > b ? -1 : a < b ? 1 : 0;
  });
}

var sizes = scanSizes(document.querySelectorAll("*"));

- NiKo

---

这很好，但我得到了“RangeError：Maximum call stack size exceeded”错误。 - I Love Python

使用更高效和实用的方法编辑了解决方案 :) - NiKo

这个问题具体哪里不清楚？ - mikemaccana

Answer 2

我正在添加另一个答案，因为我刚刚偶然发现了<main> HTML5元素规范，开发人员应该使用它来定义他们的主要内容区域，所以这可能是你想在任何爬取的页面中首先检查的第一个元素。

基本上，你应该检查页面中任何单个的<main>或role="main"元素，然后才能使用其他内容检测策略 :)

- NiKo

Answer 3

当前的答案过于复杂。你需要知道的主要是 element.getBoundingClientRect();。这里有一个更简单的函数 - 我正在寻找最大的 table，但你可以使用任何 CSS 选择器。

// Fix NodeList.sort()
NodeList.prototype.sort = Array.prototype.sort

var elements = document.querySelectorAll('table')

var getArea = function(element){
    var rectangle = element.getBoundingClientRect();
    return rectangle.width * rectangle.height;
}

elements.sort(getArea)[0]

- mikemaccana