dom 相关问题

通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。

Next Js 生产中出现黑屏块错误

Next JS 这个错误是什么？它只发生在生产中。请帮我下一个 js 中的错误块图像我预计页面会正常加载，但是当我更改路线或按 f5 时，我有时会......

typescript next.js dom

回答 1 投票 0

如何正则表达式和替换innerText，然后恢复HTML元素

我想要正则表达式并仅替换html的文本内容（innerText），并最终保留所有HTML元素（或按原样恢复它们）。正则表达式不能检查 HTML 元素，而只能检查

javascript html dom

回答 1 投票 0

如何使用 Web::Scraper 抓取以下内容？

这个问题与How to Parse this HTML with Web::Scraper? 不同但相关。我必须使用 Web::Scraper 抓取页面，其中 HTML 可能会略有变化。有时可以是这个问题与 How to Parse this HTML with Web::Scraper?. 不同但相关我必须使用 Web::Scraper 抓取页面，其中 HTML 可能会略有变化。有时也可以 <div> <p> <strong>TITLE1</strong> <br> DESCRIPTION1 </p> <p> <strong>TITLE2</strong> <br> DESCRIPTION2 </p> <p> <strong>TITLE3</strong> <br> DESCRIPTION3 </p> </div> 我用 Web::Scraper 使用以下代码提取 my $test = scraper { process 'div p', 'test[]' => scraper { process 'p strong', 'name' => 'TEXT'; process '//p/text()', 'desc' => [ 'TEXT', sub { s/^\s+|\s+$//g } ]; }; }; 但有时它包含以下 HTML（请注意，每个标题和描述不再用 <p> 分隔）。 <div> <p> <strong>TITLE1</strong> <br> DESCRIPTION1 <strong>TITLE2</strong> <br> DESCRIPTION2 <strong>TITLE3</strong> <br> DESCRIPTION3 </p> </div> 如何将上面的 HTML 抓取到 test => [ { desc => "DESCRIPTION1 ", name => "TITLE1" }, { desc => "DESCRIPTION2 ", name => "TITLE2" }, { desc => "DESCRIPTION3 ", name => "TITLE3" }, ] 我尝试修改上面的代码，但我无法弄清楚使用什么 HTML 来“拆分”唯一的标题和描述对。我从未使用过 WebScraper，但它的行为似乎很糟糕或者很奇怪。以下 XPath 表达式或多或少应该适用于这两种情况（需要进行小的调整）： //div//strong/text() //div//br/following-sibling::text() 将它们插入 xmllint (libxml2) 时： tmp >xmllint --html --shell a.html / > cat / ------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body> <div> <p> <strong>TITLE1</strong> <br> DESCRIPTION1 </p> <p> <strong>TITLE2</strong> <br> DESCRIPTION2 </p> <p> <strong>TITLE3</strong> <br> DESCRIPTION3 </p> </div> </body></html> / > xpath //div//strong/text() Object is a Node Set : Set contains 3 nodes: 1 TEXT content=TITLE1 2 TEXT content=TITLE2 3 TEXT content=TITLE3 / > xpath //div//br/following-sibling::text() Object is a Node Set : Set contains 3 nodes: 1 TEXT content= DESCRIPTION1 2 TEXT content= DESCRIPTION2 3 TEXT content= DESCRIPTION3 / > load b.html / > cat / ------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><div> <p> <strong>TITLE1</strong> <br> DESCRIPTION1 <strong>TITLE2</strong> <br> DESCRIPTION2 <strong>TITLE3</strong> <br> DESCRIPTION3 </p> </div></body></html> / > xpath //div//strong/text() Object is a Node Set : Set contains 3 nodes: 1 TEXT content=TITLE1 2 TEXT content=TITLE2 3 TEXT content=TITLE3 / > xpath //div//br/following-sibling::text() Object is a Node Set : Set contains 5 nodes: 1 TEXT content= DESCRIPTION1 2 TEXT content= 3 TEXT content= DESCRIPTION2 4 TEXT content= 5 TEXT content= DESCRIPTION3 当您将这些的各种版本插入 WebScraper 时，它们不起作用。 process '//div', 'test[]' => scraper { process '//strong', 'name' => 'TEXT'; process '//br/following-sibling::text()', 'desc' => 'TEXT'; }; 结果： /tmp >for f in a b; do perl bs.pl file:///tmp/$f.html; done { test => [{ desc => " DESCRIPTION1 ", name => "TITLE1" }] } { test => [{ desc => " DESCRIPTION1 ", name => "TITLE1" }] } process '//div', 'test[]' => scraper { process '//div//strong', 'name' => 'TEXT'; process '//div//br/following-sibling::text()', 'desc' => 'TEXT'; }; 结果： /tmp >for f in a b; do perl bs.pl file:///tmp/$f.html; done { test => [{ desc => " DESCRIPTION1 ", name => "TITLE1" }] } { test => [{ desc => " DESCRIPTION1 ", name => "TITLE1" }] } 即使是最基本的情况： process 'div', 'test[]' => scraper { process 'strong', 'name' => 'TEXT'; }; 结果： /tmp >for f in a b; do perl bs.pl file:///tmp/$f.html; done { test => [{ name => "TITLE1" }] } { test => [{ name => "TITLE1" }] } 即使你通过 use Web::Scraper::LibXML 告诉它使用 libxml2 -什么也没有！为了确保我不会发疯，我尝试使用 Ruby 的 Nokogiri： /tmp >for f in a b; do ruby -rnokogiri -rpp -e'pp Nokogiri::HTML(File.read(ARGV[0])).css("div p strong").map &:text' $f.html; done ["TITLE1", "TITLE2", "TITLE3"] ["TITLE1", "TITLE2", "TITLE3"] 我缺少什么。我想我已经解决了。我不确定这是否是最好的方法，但它似乎可以处理这两种情况。 my $test = scraper { process '//div', 'test' => scraper { process '//div//strong//text()', 'name[]' => 'TEXT'; process '//p/text()','desc[]' => ['TEXT', sub { s/^\s+|\s+$//g} ]; } }; my $res = $test->scrape(\$html); #get the names and descriptions my @keys = @{$res->{test}->{name}}; my @values = @{$res->{test}->{desc}}; #merge two arrays into hash my %hash; @hash{@keys} = @values;

html perl web-scraping dom

回答 2 投票 0

如何识别一个元素中有一个封闭的shadow Root？

#shadow-root（关闭）我如何检测这个笑话类中有一个封闭的影子根。试过了...

javascript dom

回答 1 投票 0

为什么异步循环 `File.stream().getReader().read()` 可能会阻塞主线程？

const el = document.getElementById('el'); const out = document.getElementById('out'); 埃尔.

javascript html dom w3c

回答 1 投票 0

选择 ::before 或 ::after 伪元素中的文本

看这个非常简单的代码 p::之前{ 内容：“之前-”； } 你好 ...

html css dom

回答 4 投票 0

iMacros 标签查找 TXT 并单击附近的（上一个）链接

下面是Wordpress后端标签管理部分的示例代码。我正在尝试编写一个 iMacros 来查找标签并将其删除。但是，标签文本不会位于任何 HTML 标签的下方。以下是Wordpress后端标签管理部分的示例代码。我正在尝试编写一个 iMacros 来查找标签并将其删除。但是，标签文本不在任何 HTML 标签下方。 <div class="tagchecklist"> <span> <a id="post_tag-check-num-0" class="ntdelbutton" tabindex="0">X</a>  Orange </span> <span> <a id="post_tag-check-num-1" class="ntdelbutton" tabindex="0">X</a>  Apple </span> <span> <a id="post_tag-check-num-2" class="ntdelbutton" tabindex="0">X</a>  Banana </span> <span> <a id="post_tag-check-num-3" class="ntdelbutton" tabindex="0">X</a>  Grape </span> </div> 我尝试过但没有成功，因为 TAG 无法访问 TAG POS=1 TYPE=(Not sure what to put here) ATTR=TXT:Banana TAG POS=R-1 TYPE=A ATTR=TXT:* 我需要脚本来查找包含 Banana 文本的 SPAN，然后单击 SPAN 中的 X 按钮。感谢您的帮助。相对定位不能很好地解决这个问题，所以： SET !EXTRACT_TEST_POPUP NO TAG POS=1 TYPE=SPAN ATTR=TXT:*Banana* EXTRACT=HTM SET FP EVAL("parseInt('{{!EXTRACT}}'.match(/check-num-(\\d)/)[1]) + 1;") TAG POS={{FP}} TYPE=A ATTR=TXT:* 有趣的“老”问题，啊啊……！ => 7 年后，有了“新”解决方案... “Double相对定位”（*）的典型用途，“香蕉”元素作为Anchor，就像提问者正在尝试的那样......： TAG POS=1 TYPE=SPAN ATTR=TXT:Banana TAG POS=R1 TYPE=* ATTR=* TAG POS=R-1 TYPE=A ATTR=TXT:* => 第一个 R-POS 与 R1 以获得包含链接的 SPAN 元素的 outside，...第二个 R-POS 与 R-1 使 iMacros 能够“看到”再次在同一个 SPAN 元素里面... (*)：有关“双重相对定位”的更多信息，请谷歌搜索这3个术语（带双引号）或搜索iMacros论坛，这个概念是“我的”，我已经解释了几十次（因为2014）在 iMacros 论坛上... （我不敢发布任何（直接）链接，因为带有站点外部资源链接的答案通常最终会被标记和删除......）

javascript web-scraping dom imacros

回答 2 投票 0

使用 playwright 检查元素类是否包含字符串

我正在尝试获取第18天的元素，并检查它是否在其类上禁用。我正在尝试获取第 18 天的元素，并检查它的类上是否有 disabled。 <div class="react-datepicker__day react-datepicker__day--tue" aria-label="day-16" role="option">16</div> <div class="react-datepicker__day react-datepicker__day--wed react-datepicker__day--today" aria-label="day-17" role="option">17</div> <div class="react-datepicker__day react-datepicker__day--thu react-datepicker__day--disabled" aria-label="day-18" role="option">18</div> 这是我的代码，假设 this.xpath = 'xpath=.//*[contains(@class, "react-datepicker__day") and not (contains(@class, "outside-month")) and ./text()="18"]' async isDateAvailable () { const dayElt = await this.page.$(this.xpath) console.log(dayElt.classList.contains('disabled'))) \\this should return true 我似乎无法让它发挥作用。错误提示 TypeError: 无法读取未定义的属性“包含”。你能帮我指出我在这里做错了什么吗？看来你可以写了 expect(page.locator('.selector-name')).toHaveClass(/target-class/) /target-class/ - 需要斜杠，因为它是 RegExp 为了通过一个调用检查几个类，我使用这个助手（这是因为 api 方式对我不起作用https://playwright.dev/docs/test-assertions#locator-assertions-to-have-class） : async function expectHaveClasses(locator: Locator, className: string) { // get current classes of element const attrClass = await locator.getAttribute('class') const elementClasses: string[] = attrClass ? attrClass.split(' ') : [] const targetClasses: string[] = className.split(' ') // Every class should be present in the current class list const isValid = targetClasses.every(classItem => elementClasses.includes(classItem)) expect(isValid).toBeTruthy() } 在className中，你可以编写几个用空格分隔的类： const result = await expectHaveClasses(page.locator('.item'), 'class-a class-b') 您必须在浏览器内对其进行评估。 $ 将返回一个 ElementHandle，它是浏览器 DOM 元素的包装器，因此您必须使用例如evaluate然后就可以了。或者简单地使用 $eval 查找元素，将其传递到在浏览器 JavaScript 引擎内执行的回调中。这意味着类似的事情会起作用： // @ts-check const playwright = require("playwright"); (async () => { const browser = await playwright.chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); await page.setContent(` <div id="a1" class="foo"></div> `) console.log( await page.$eval("#a1", el => el.classList.contains("foo1")) ) await browser.close(); })(); 对于OP的原始代码，XPath通常不是推荐的在Playwright中选择元素的方法。更喜欢定位器。我可能会按文本和角色进行选择，然后断言类存在。话又说回来，类不是“用户可见”的，因此那里可能还有更好的断言机会。如果剧作家测试不符合OP的情况，这个答案正确地提供了evaluate，尽管我会用定位器写它：const isDisabled = await page.getByLabel("day-18") .evaluate(el => el.classList.contains("disabled")); 将此线程视为断言元素类的规范，这个答案很好地展示了如何使用正则表达式来匹配单个类，但也提倡在其expectHaveClasses帮助器中使用antipattern：const isValid = targetClasses.every(classItem => elementClasses.includes(classItem)) expect(isValid).toBeTruthy() 问题是失败时的错误消息将不清楚并且可能难以调试。此外，当元素位于 DOM 中时，断言不会等待类更改为正确的类，而是会异步调整其类列表。类列表通常不会那么长，所以我会分别枚举每个类名： const loc = page.locator("p") await expect(loc).toHaveClass(/\bfoo\b/); await expect(loc).toHaveClass(/\bbar\b/); await expect(loc).toHaveClass(/\bbaz\b/); 这是一个很好的例子，WET 和避免过早抽象可能比 DRY 更好，因为正确干燥代码的门槛相当高。从技术上讲，前瞻也是可能的： await expect(loc).toHaveClass(/(?=.*\ba\b)(?=.*\bb\b)(?=.*\bc\b)/); 但是这是不可读的，所以如果你要这样做，那么助手可能会有意义： import {expect, test} from "@playwright/test"; // ^1.30.0 test.beforeEach(({page}) => page.setContent('<p class="a b c d"></p>')); const hasWordsRegex = (...a) => new RegExp(a.map(e => `(?=.*\\b${e}\\b)`).join("")); test("has classes 'a', 'b' and 'c'", async ({page}) => { await expect(page.locator("p")).toHaveClass(hasWordsRegex("a", "b", "c")); }); 请注意，这并不严格，因此存在类 d 是可以的。这是常见情况。如果您真的认真对待这个模式，您可以将其放入自定义匹配器中： import {expect, test} from "@playwright/test"; // ^1.30.0 test.beforeEach(({page}) => page.setContent('<p class="a b c d"></p>')); const hasWordsRegex = (...a) => new RegExp(a.map(e => `(?=.*\\b${e}\\b)`).join("")); expect.extend({ async toHaveAllClasses(received, ...classes) { const className = await received.evaluate(el => el.className); if (hasWordsRegex(...classes).test(className)) { return { message: () => "passed", pass: true, }; } return { message: () => `failed: element class '${className}' ` + `did not match expected '${classes.join(" ")}'`, pass: false, }; }, }); test("has classes 'a', 'b' and 'c'", async ({page}) => { await expect(page.locator("p")).toHaveAllClasses("a", "b", "c"); }); test("is missing at least one of 'a', 'b', 'c' or 'x'", async ({page}) => { await expect(page.locator("p")).not.toHaveAllClasses("a", "b", "c", "x"); }); 除了可读性之外，正则表达式的另一个问题是忘记转义正则表达式特殊字符。谨慎使用正则表达式！在上面的示例中，可能不清楚在幕后使用正则表达式，从而导致令人困惑的失败。它可以在没有正则表达式的情况下重写： expect.extend({ async toHaveAllClasses(received, ...classes) { const [classList, className] = await received.evaluate(el => [[...el.classList], el.className]); const missing = classes.filter(e => !classList.includes(e)); if (missing.length) { return { message: () => `failed: element class '${className}' ` + `did not contain '${missing.join(", ")}'`, pass: false, }; } return { message: () => "passed", pass: true, }; }, }); 如果您想在存在额外类时失败，您可以添加相反方向的检查： const extra = classList.filter(e => !classes.includes(e)); if (extra.length) { return { message: () => `failed: element class '${className}' ` + `had extra class '${extra.join(", ")}' ` + `that wasn't part of the expected class '${classes.join(" ")}'`, pass: false, }; } 这可以让您以任意顺序准确检查多个类。（希望如此）这里的最后一个问题是 evaluate 不会等待类通过测试——它会立即检查一次，然后成功或失败。诸如waitForFunction、轮询或重试之类的东西可以帮助创建等待，但希望这些小烦恼足以激发为什么使用一些toHaveClass调用可能是在撰写本文时最好的解决方案。

javascript dom playwright

回答 3 投票 0

如何使用库存系统在 Vue/JS/HTML 中启用拖放功能？

我想重新创建一个像《我的世界》中的库存系统，因为它有助于理解很多 Web 开发内容，并且总体上成为一名更好的开发人员，我的代码无法正常工作并更新我的

javascript html vue.js dom dom-events

回答 1 投票 0

无法使用 HTML 中的输入元素在 TS 文件中定义变量

我正在尝试从 HTML 文件中的按钮运行 ts/js 文件。我正在使用 TS 和 Node js。这是我收到错误的一些代码 document.addEventListener('DOMContentLoaded', () => { 常量

html node.js typescript dom

回答 1 投票 0

通过解析dom提取javascript代码

我使用常用脚本 src = "myjs.js" 在我的页面中包含了外部 javascript 文件 - 我可以假设 javascript 代码现在应该成为 DOM 的一部分吗？我可以解析 dom 来获取 javascript c...