时间戳

首页 > 解决方案 > 我们可以从节点元素中检索查询选择器吗？

javascript - 我们可以从节点元素中检索查询选择器吗？

问题描述

是否可以检索节点元素查询选择器？

从节点列表：

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 页面，但具有更新的数据。我需要匹配完全相同的节点元素（通过使用多个选择器，如 --> .card .text-data）。

我可以使用一组选择器并循环遍历它来查询原始 DOM 和新的 DOM。但我的问题不会得到回答：

我们可以从节点元素中检索原始查询选择器吗？

标签： javascript

解决方案

我们可以从节点元素中检索原始查询选择器吗？

不，你不能。可以使用多种选择器找到一个元素。您收到的元素中没有任何内容告诉您使用什么选择器找到它。

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

但是，如果元素在这些数据更新中发生了变化，那么如何关联它们将在很大程度上取决于这些变化是什么。

你说过：

我想避免依赖索引

您还没有说明原因，但是如果您正在做出使索引无效的更改，那么您正在对树进行更改，这可能会使跨树的元素无法关联（除非它们都有唯一的 ID 或其他东西）。任何结构都要求树在结构上相同。即使您构建的东西在案例 A、B、C 和 D 中似乎都有效，但在团队中没有人想测试的案例 X 中，它也可能会崩溃。

推荐阅读