通过JavaScript查找类似层次结构的元素（用于Web抓取）

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

试试这个：

jQuery.fn.addEvent = function(type, handler) {
    this.bind(type, {'selector': this.selector}, handler);
};

$(document).ready(function() {
    $('.item-title').addEvent('click', function(event) {
        console.log(event.data.selector);
        let elements = document.querySelectorAll(event.data.selector);
                elements.forEach(e => console.log(e));
    });
});

Answer 3

感谢Jack，我可以创建一个运行脚本。

// 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);
}