dom 相关问题

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

我正在使用最新的 HTML5 对话框元素。我使用 showModal 来显示多个对话框。那么当多个对话框元素可见时，如何获取最上面的对话框元素呢？

javascript html dom

回答 2 投票 0

我有这个 HTML： ... 我有这个 HTML： <div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong> 208,00 Euro </strong> </p> </div> 第二部分如下所示： <div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong>1.978,00 Euro</strong> </p> </div> 类“flex__col--md-2 flex__col--xs-4 col...”和类“u-text-white”可以在html中找到两次。我想从第一个条目“208,00 Euro”中选择值。 var parsedHTML = $.load(body); console.log("the value"); 有人可以帮我使用cheerio 将 208 欧元存入控制台日志吗？您应该能够像这样访问数据。 var firstEl = parsedHTML .find('.flex__col--md-2.flex__col--xs-4') .first() .find('.u-text-white'); var data = firstEl.find('strong').text(); 改进现有答案，您可以使用自然的 CSS 链接，而无需多次 .find() 调用： const cheerio = require("cheerio"); // ^1.0.0-rc.12 const html = `<div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong>208,00 Euro</strong> </p> </div> <div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong>1.978,00 Euro</strong> </p> </div>`; const $ = cheerio.load(html); const text = $(".flex__col--md-2.flex__col--xs-4 p.u-text-white") .first() .text() .trim(); console.log(text); // => 208,00 Euro 这里答案的关键部分是.first()。 .last() 和 .nth(0) 是 .first() 上有用的变体函数。其他选项包括： const text = $(".flex__col--md-2.flex__col--xs-4 p.u-text-white:nth(0)") .text() .trim(); 和 const text = $(".flex__col--md-2.flex__col--xs-4 p.u-text-white:first") .text() .trim();

javascript web-scraping dom cheerio

回答 2 投票 0

从 dom 获取课程 -->cheerio

我有这个 HTML： ... 我有这个 HTML： <div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong> 208,00 Euro </strong> </p> </div> 第二部分如下所示： <div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong>1.978,00 Euro</strong> </p> </div> 类“flex__col--md-2 flex__col--xs-4 col...”和类“u-text-white”可以在html中找到两次。我想从第一个条目“208,00 Euro”中选择值。 var parsedHTML = $.load(body); console.log("the value"); 有人可以帮我使用cheerio 将 208 欧元存入控制台日志吗？您应该能够像这样访问数据。 var firstEl = parsedHTML .find('.flex__col--md-2.flex__col--xs-4') .first() .find('.u-text-white'); var data = firstEl.find('strong').text(); 改进现有答案，您可以使用自然 CSS 链接，而无需多次 .find() 调用： const cheerio = require("cheerio"); // ^1.0.0-rc.12 const html = `<div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong>208,00 Euro</strong> </p> </div> <div class="flex__col--md-2 flex__col--xs-4 color-box color-box--orange color-box--no-pad text-center"> <p class="u-text-white"> <strong>1.978,00 Euro</strong> </p> </div>`; const $ = cheerio.load(html); const text = $(".flex__col--md-2.flex__col--xs-4 p.u-text-white") .first() .text() .trim(); console.log(text); // => 208,00 Euro 这里答案的关键部分是.first()。

javascript dom web-scraping nodes cheerio

回答 2 投票 0

使用 xml.etree.ElementTree 在 Python 中进行简单的 dom 遍历

例如考虑解析 pom.xml 文件：例如考虑解析 pom.xml 文件： <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <parent> <groupId>com.parent</groupId> <artifactId>parent</artifactId> <version>1.0-SNAPSHOT</version> <relativePath>../pom.xml</relativePath> </parent> <modelVersion>2.0.0</modelVersion> <groupId>com.parent.somemodule</groupId> <artifactId>some_module</artifactId> <packaging>jar</packaging> <version>1.0-SNAPSHOT</version> <name>Some Module</name> ... 代码： import xml.etree.ElementTree as ET tree = ET.parse(pom) root = tree.getroot() groupId = root.find("groupId") artifactId = root.find("artifactId") groupId和artifactId都是None。为什么他们是根的直系后代？我尝试用 root (tree) 替换 groupId = tree.find("groupId")，但这并没有改变任何东西。问题是你没有有一个名为groupId的孩子，你有一个名为{http://maven.apache.org/POM/4.0.0}groupId的孩子，因为etree不会忽略XML名称空间，它使用“通用名称”。请参阅 effbot 文档中的使用命名空间和限定名称。为了扩展 abarnert 对 BeautifulSoup 的评论，如果你确实只是想要一个快速而肮脏的解决方案来解决问题，这可能是最快的方法。我已经实现了这个（用于个人脚本），它使用 bs4，您可以使用遍历树 element = dom.getElementsByTagNameNS('*','elementname') 这将使用任何名称空间引用 dom，如果您知道文件中只有一个名称空间，那么这会很方便，因此不会产生歧义。

python xml dom elementtree

回答 2 投票 0

EventListener 未添加到按钮元素

我有一个产品列表，每个产品都有一个 id 和 item 属性。我必须为每个项目添加一个删除按钮。每次单击删除按钮时，该产品都应被删除。我正在尝试...

javascript html dom dom-events

回答 1 投票 0

Visual Studio 代码：如何自动更改匹配的结束标记

在 Visual Studio 代码中，当更改开始标记类型（例如，从到）时，我希望编辑器自动更改匹配的结束标记。我怎样才能做到这一点？在 Visual Studio 代码中更改开始标记类型（例如，从 <div> 到 <span>）时，我希望编辑器自动更改匹配的结束标记。我怎样才能做到这一点？从 VSCode 1.44 开始，您可以启用匹配标签的自动更新，如下所示：转到文件菜单、首选项和设置搜索editor.linkedEditing 启用“链接编辑” 以下是其工作原理的示例：启动 VS Code，进入插件并搜索自动重命名标签。安装，重新加载，完成。这个插件： https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 您可以使用重命名符号命令来执行此操作。选择（或单击将插入符号放在内部任意位置）开始标签点击F2 输入新标签名称并按 Enter 开始和结束标签都将被重命名。或者，您可以在第 3 步按 Shift + Enter 预览更改，然后再次按 Shift + Enter 应用它们。正如@TwistedSim提到的，您可以使用 Ctrl + D 来实现这一点 F2 适用于 (js|jsx)。如果您碰巧安装了 IntelliJ 键绑定，您可以使用 SHIFT + F6 实现相同的目的。 CNTRL+D对我来说根本不起作用。我现在使用的是 Mac。来自Anders Carstensen的答案它适用于 .html 文件，但不适用于 React .jsx 文件。已接受答案中的自动重命名标签扩展对两者都有效实际上，VSCode 1.78（2023 年 4 月）将支持 .jsx/.tsx 文件的标签重命名。请参阅问题 159534 和 PR 179806，可在 VSCode Insiders 中找到。它需要 TS 5.1+。

html css reactjs dom visual-studio-code

回答 7 投票 0

使用 HTML、CSS 和 JavaScript Fetch 向 API 服务发出 POST 请求 [已关闭]

我有一个关于使用 JavaScript API 的作业。我对 JavaScript API 一无所知。谁能帮我？我用 html CSS 代码编写了登录页面。但是第二阶段的任务： ...

javascript dom fetch-api login-page

回答 2 投票 0

如何通过文本内容查找 DOM 元素？

我尝试向某些节点添加新的 SVG 元素。为此，要添加元素的节点必须通过文本内容中包含的字符串找到，例如找到任何具有“i...

javascript d3.js dom

回答 3 投票 0

有人可以解释为什么会发生这种情况吗？

const chessBoard = document.querySelector("#board"); 让 aSwitch = true; // 定义一个开关来创建黑白方块让增量= 1； // 将用于确定