document.querySelector 不处理动态内容

Question

为什么当我在动态 HTML 元素上使用 document.querySelector 时，它不会给我当前动态设置的数据？有没有办法获取当前数据？

示例：

如果我转到这个 stripe page with dynamic html，我复制这个元素的 JS 路径：

当我按下粘贴和运行控制台中的代码时，我得到：

document.querySelector("#Full > table > tbody > tr > td:nth-child(1)")

returns-> <td>EUR</td>

但我希望得到：

returns-> <td>USD</td>

我注意到无论我选择哪个国家 查看支持结算货币 设置动态 HTML，文档查询选择器总是 returns结果好像该选项卡位于列表中的第一个国家/地区 Austria.

Answer 1

querySelector returns 它找到匹配的第一个项目。如果您查看源代码，“动态”代码只是显示和隐藏一个部分。每个部分都有一个 table.

所以他们用什么来展示它selected，但它是在多个层面上完成的。要获取您看到的 #Full 元素，它将是

document.querySelector(".tabs-tab.selected .tabs-tab.selected")

完整的选择器是

document.querySelector('.tabs-tab.selected .tabs-tab.selected > table > tbody > tr > td:nth-child(1)')

Answer 2

如果你真的想从那个路径获取数据，你可以使用下面的代码。只需使用来自 chrome 或 firefox 的开发人员工具找到网站元素的完整 xpath。将 fullXpath 替换为您的 Fullxpath。

注意：我注意到普通的 xpath 也不起作用，所以这就是为什么使用完整的 xpath 而不是 xpath。

 let fullXpath =  "/html/body/div[2]/div/div[2]/div[2]/div/div/div/div[2]/div/div[1]/article/section[2]/div/div/div[34]/div/div/div[1]/table/tbody/tr[1]/td[1]";
    document.evaluate(fullXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML;

这会给你想要的结果。

document.querySelector 不处理动态内容

document.querySelector not working on dynamic content

html

javascript

browser

browser-console

queryselector

示例：