Блог

Возможно ли извлечь селектор запросов элемента node?

Из списка узлов :

 let targets = document.querySelectorAll(".card .text-data, .section-1")
  

Мне нужно перебрать каждый элемент в targets и снова найти .card .text-data и .section-1 в проанализированном HTML, чтобы получить данные, чтобы я мог сравнить обе версии.

 let parser = new DOMParser();
let parsedHtml = parser.parseFromString(htmlData, 'text/html');

targets.forEach(function (targetElement) {
    let new_data = parsedHtml.querySelector("my selector here")
    if (new_data.innerHTML === targetElement.innerHTML) {
        console.log("Same data")
    } else {
        console.log("There is some difference here")
    }
})
  

parsedHtml — это та же HTML-страница, но с обновленными данными. Мне нужно сопоставить точно такой же элемент node (используя множественный селектор, такой как —> .card .text-data ).

Я мог бы использовать массив селекторов и перебирать его для запроса в исходном DOM и новом. Но на мой вопрос не будет ответа :

Можем ли мы извлечь исходный селектор запроса из элемента node?

Можем ли мы извлечь исходный селектор запроса из элемента node?

Нет, вы не можете. Элемент может быть найден с использованием широкого спектра селекторов. Ничто в получаемом элементе не сообщает вам, какой селектор использовался для его поиска.

parsedHtml — это та же HTML-страница, но с обновленными данными.

Предполагая, что структура одинакова, вы можете связать их по индексу, см. *** Комментарии для новых / обновленных строк:

 let selector = ".card .text-data, .section-1"; // ***
let targets = document.querySelectorAll(selector); // ***

let parser = new DOMParser();
let parsedHtml = parser.parseFromString(htmlData, 'text/html');

let parsedTargets = document.querySelectorAll(selector); // ***
targets.forEach(function(targetElement, index) {
// *** −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^
    let new_data = parsedTargets[index]; // ***
    if (new_data.innerHTML === targetElement.innerHTML) {
        console.log("Same data")
    } else {
        console.log("There is some difference here")
    }
})
  

Но если элементы перемещались в этих обновлениях данных, то то, как вы их соотносите, будет во многом зависеть от того, каковы эти изменения.

Вы сказали:

Я бы хотел не полагаться на индекс

Вы не сказали почему, но если вы вносите изменения, которые делают недействительным индекс, то вы вносите изменения в дерево, которые, вероятно, сделают невозможным сопоставление элементов по деревьям (если только все они не имеют уникальных идентификаторов или чего-то еще). Любая структура потребует, чтобы деревья были структурно одинаковыми. Даже если вы создали что-то, что, казалось, работало в случаях A, B, C и D, это, скорее всего, сломалось бы в случае X, который никто в команде не подумал протестировать.