根据大小获取元素

Get elements by size

本文关键字：获取 元素      更新时间：2023-09-26

我必须得到所有的元素在一个HTML页面的大小为300x250(只是父虽然。因此，如果DIV的尺寸是300x250，并且在相同的尺寸内有一个图像，我将得到DIV)。

我不能使用jQuery或其他类似的框架，我认为的方法是:

  1. 循环页面中的所有元素，检查它们的尺寸(坏坏)。我不喜欢它)
  2. 使用XPath(是否有一种方法可以通过XPath过滤宽度和高度?)

你们知道更好的方法吗?

您还没有说您对哪个width或height感兴趣。当然，如果文档中有width或height属性的img元素，那么XPath可以选择它们(例如//img[@width = '300' and @height = '250'])。但是像div元素这样的容器元素没有这样的属性，通常您可以访问它们的offsetWidth/offsetHeight DOM属性。据我所知，这样的属性不能在XPath表达式中访问，所以XPath只能帮助选择某些元素，然后您需要访问由XPath求值返回的任何DOM元素节点的offsetWidth/offsetHeight属性。所以这个答案主要是关于XPath请求的。

根据目标浏览器的不同，您可以使用TreeWalker https://developer.mozilla.org/en-US/docs/Web/API/treeWalker.filter或NodeIterator https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator。

您不需要遍历页面上的所有元素(例如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]);
      }
    }
  }
}
相关文章：