dom 相关问题

如何在 JavaScript 中向全局变量追加新元素？

嗯，我正在用 JavaScript 从事这个项目，并了解 DOM 如何从 js 操作 html。事情是，（下面的代码） 常量 TemplesElement=''; const displayTemples = (tem...

关于元素的硬编码子元素替换

我正在做一个带有选择的小网站项目，其中我将第一个不可选择的选项硬编码为占位符。重点是，之后当我动态添加选项时，它们似乎会覆盖......

在我的 Angular 项目中使用 CSS @layer 规则

我想在我的 Angular 项目中使用 CSS @layer 规则。 @layers 的优先级顺序取决于它们的声明顺序（最后声明的优先）。然而，Angular 会自动...

通过控制台js调用单击发送按钮但单击不起作用时，控制台返回未定义

您好，我正在构建 chrome 扩展并尝试单击发送按钮。 在为其编写代码之前，我正在测试简单的 js 代码，看看是否可以模拟点击发送按钮。 这里有一些...

为什么在进行新查询后，prevButton 和 nextButton 会从过去的查询中删除？

从某种意义上来说，这是聊天框应用程序。一旦进行新查询，我的 prevButton 和 nextButton 就会从过去的查询中删除，因此分页仅适用于当前查询，但我希望...

通过 javascript 调用单击发送按钮时控制台返回未定义

您好，我正在构建 chrome 扩展并尝试单击发送按钮。 在为其编写代码之前，我正在测试简单的 js 代码，看看是否可以模拟点击发送按钮。 这里有一些...

无法在未定义的设置中设置属性

为什么我无法在 JavaScript 代码中设置未定义设置（背景颜色）的属性。 让 btn = document.querySelector('button'); 让 h1 = document.querySelector('h1'); 让 h2 = 文档。

我的代码是否有错误或者与我的 Firefox 12 浏览器有关？

我从教程中复制了以下代码，但仍然无法弄清楚我是否在某个地方犯了错误，或者是否与浏览器支持有关。 <question vote="0"> <p>我从教程中复制了以下代码，但仍然无法弄清楚我是否在某个地方犯了错误，或者是否与浏览器支持有关。</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type=&#34;text/javascript&#34;&gt; function loadXMLDoc(dname) { if(window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { xttp = new ActiveXObject(&#34;Microsoft.XMLHTTP&#34;); } xhttp.open(&#34;GET&#34;, dname, false); xhttp.send(); return xhttp.responseXML; } function change(text) { var xmlDoc = loadXMLDoc(&#34;dom.xml&#34;); var x = xmlDoc.getElementsByTagName(&#34;title&#34;)[0].childNodes[0]; x.nodeValue = text; var y = xmlDoc.getElementsByTagName(&#34;title&#34;); for(i=0; i&lt;y.length; i++) { document.write(y[i].childNodes[0].nodeValue+&#34;&lt;br /&gt;&#34;); } } function remove(node) { xmlDoc = loadXMLDoc(&#34;dom.xml&#34;); var y = xmlDoc.getElementsByTagName(node)[0]; xmlDoc.documentElement.removeChild(y); alert(&#34;The element &#34;+node+&#34; has been removed!&#34;); } function prove(u) { var x = xmlDoc.getElementsByTagName(u); for (i=0; i&lt;x.length; i++) { document.write(x[i].childNodes[0].nodeValue); document.write(&#34;&lt;br /&gt;&#34;); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=&#34;button&#34; value=&#34;remove&#34; onclick=&#34;remove(&#39;book&#39;)&#34; /&gt; &lt;input type=&#34;button&#34; value=&#34;prove it&#34; onclick=&#34;prove(&#39;book&#39;)&#34; /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <h2>更新</h2> <p>这是一个可能有帮助的 XML 文件：</p> <pre><code>&lt;?xml version=&#34;1.0&#34; encoding=&#34;ISO-8859-1&#34;?&gt; &lt;bookstore&gt; &lt;book category=&#34;cooking&#34;&gt; &lt;title lang=&#34;en&#34;&gt;Everyday Italian&lt;/title&gt; &lt;author&gt;Giada&lt;/author&gt; &lt;year&gt;2005&lt;/year&gt; &lt;price&gt;30.00&lt;/price&gt; &lt;/book&gt; &lt;book category=&#34;cooking&#34;&gt; &lt;title lang=&#34;en&#34;&gt;Book 2&lt;/title&gt; &lt;author&gt;Giada&lt;/author&gt; &lt;year&gt;2005&lt;/year&gt; &lt;price&gt;30.00&lt;/price&gt; &lt;/book&gt; &lt;book category=&#34;cooking&#34;&gt; &lt;title lang=&#34;en&#34;&gt;Book 3&lt;/title&gt; &lt;author&gt;Giada&lt;/author&gt; &lt;year&gt;2005&lt;/year&gt; &lt;price&gt;30.00&lt;/price&gt; &lt;/book&gt; &lt;/bookstore&gt; </code></pre> </question> <answer tick="true" vote="1"> <p>我认为问题可能是因为<pre><code>document.write</code></pre></p> <blockquote> <p>页面完成加载后运行的任何 document.write 语句 将创建一个新页面并覆盖当前页面的所有内容 页。</p> </blockquote> <p>证明函数的<pre><code>}</code></pre>语句后面还缺少一个<pre><code>for</code></pre></p> <p>尝试在 <pre><code>innerHTML</code></pre> 或某些 html 元素上使用 <pre><code>div</code></pre> 来解决此问题。</p> <p>除此之外，我没有发现您的代码有任何问题</p> </answer> <answer tick="false" vote="0"> <p>该脚本正在查找名为“dom.xml”的文件 </p> <p>如果将该文件放在与上面页面相同的目录中，您将得到不同的结果。</p> </answer> <answer tick="false" vote="0"> <p>看起来您缺少最后一个函数证明或 for 循环的括号。</p> <p>您也可能想声明</p> <pre><code>var xmlDoc = loadXMLDoc(&#34;dom.xml&#34;); </code></pre> <p>在每个函数之外，或者将其添加到proof()</p> </answer> </body></html>

“div”是 JavaScript 的 document.createElement 方法中的参数还是参数？

在JavaScript的document.createElement('div')中，'div'是参数还是自变量？在检查 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 时，我注意到该部分的标题...

Apexcharts <svg>属性高度：预期长度，加载其他页面时为“NaN”

我有一个使用 ApexCharts v3.45.1 生成的简单图表。这是在单页应用程序中，当我通过 AJAX 调用获取另一个页面时，DOM 中的原始图表会被故意删除（...

jQuery 在隐藏父级中显示子级，错误设置显示属性

请看下面的jsfiddle演示： http://jsfiddle.net/Drb8s/ 当您对隐藏父级中的元素使用 jQuery show() 时，似乎会出现此问题。 （然后接下来...

更改元素的顺序

我正在创建一个浮动宽度的网站。用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕，这似乎是一个不错的主意。这就带来了一个非常有趣的问题。 当...

removeChild真的会删除元素吗？

removeChild函数真的能彻底删除子节点吗？或者它只是删除指定父节点的子元素？如果它没有真正删除元素，有没有办法

我的 Etch-A-Sketch 板未上传 DOM

尝试运行以下代码时收到以下错误：由于appendChild，第9行出现空值。我的代码没有读取蚀刻ID吗？ ...

获取最上面的对话框元素？

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

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()。 .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();

从 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()。

使用 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，如果您知道文件中只有一个名称空间，那么这会很方便，因此不会产生歧义。

EventListener 未添加到按钮元素

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

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+。