Question

例如，当我选择下面的p.item-title元素之一时，应找到所有p.item-title元素（而不是通过类名）。另外，当我选择下面的表格元素之一时，应找到所有相似的表格。我需要这个来进行网页抓取。

<div>
  <div>
    <p class="item-title">...</p>
    <table>...</table>
  </div>
</div>
<div>
  <div>
    <p class="item-title">...</p>
    <table>...</table>
  </div>
</div>

jQuery的siblings（）方法在概念上相似，但是它在同一父节点下找到相似的元素。是否有任何方法或库可以从不同的父节点中查找相似的元素？

Answer 1

只需按照您想要的路径（层次结构）来querySelectorAll：

var allElements = document.querySelectorAll("div > div > p");
allElements.forEach(p => console.log(p));

<div>
  <div>
    <p class="item-title">Text 1</p>
    <table>...</table>
  </div>
</div>
<div>
  <div>
    <p class="item-title">Text 2</p>
    <table>...</table>
  </div>
</div>

Answer 2

感谢杰克，我可以创建一个正在运行的脚本。

// tags only selector (I need to improve depending on the use case)
function getSelector(element){
  var tagNames = [];
  while (element.parentNode){
      tagNames.unshift(element.tagName);
      element = element.parentNode;
  }
  return tagNames.join(" > ");
}

function getSimilarElements(element) {
  return document.querySelectorAll(element);
}

通过JavaScript查找具有相似层次结构的元素（用于网络抓取）

2 个答案: