Поиск элементов похожей иерархии с помощью JavaScript (для поиска в Интернете)

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

Answer 3

Попробуйте это:

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