dom-manipulation 相关问题

如何在不使用 jQuery 的情况下使用 JavaScript 动态更新 HTML 表格内容？

我正在构建一个 Web 应用程序，我需要根据用户输入动态更新 HTML 表的内容，而不使用 jQuery 或任何其他库。我已成功向表格添加行...

添加第三方脚本标签（<script>）以反应应用程序

我正在创建一个要包含在大型React项目中的组件，该组件加载一组看起来像这样的脚本标签 /* <![CDATA[ */ var </desc> <question vote="0"> <p>我正在创建一个要包含在大型 React 项目中的组件，该组件加载一组看起来像这样的脚本标签</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; /* &lt;![CDATA[ */ var google_conversion_id = XXXX; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]&gt; */ &lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//www.googleadservices.com/pagead/conversion.js&#34;&gt; &lt;/script&gt; &lt;noscript&gt; &lt;div style=&#34;display:inline;&#34;&gt; &lt;img height=&#34;1&#34; width=&#34;1&#34; style=&#34;border-style:none;&#34; alt=&#34;&#34; src=&#34;//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0&#34;/&gt; &lt;/div&gt; &lt;/noscript&gt; </code></pre> <p>无论如何我都无法更改此脚本的内容，所以现在我正在使用 <strong>dangerously-set-html-content</strong> npm 包来成功添加和执行这些脚本，但随后我收到以下控制台警告：</p> <pre><code>conversion.js:29 Failed to execute &#39;write&#39; on &#39;Document&#39;: It isn&#39;t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. </code></pre> <p>当然我希望我可以告诉谷歌从代码中删除它......但是，遗憾的是他们不会这样做，所以我想知道如何能够加载这种脚本并使它们工作。</p> <p>我尝试按照其他人的建议更改<pre><code>&lt;script type=&#34;text/javascript&#34; src=&#34;//www.googleadservices.com/pagead/conversion.js&#34; async&gt;&lt;/script&gt;</code></pre>，但警告仍然存在。</p> </question> <answer tick="false" vote="0"> <p>您可以使用 <a href="https://www.npmjs.com/package/react-helmet" rel="nofollow noreferrer">react-helmet</a> 从组件中推送标签。</p> </answer> <answer tick="false" vote="0"> <p>您可以将任何脚本导入到您的 React 项目中，如下所示：</p> <pre><code>loadScript = () =&gt; { const script = document.createElement(&#34;script&#34;); script.src = &#34;https://yourlink.js&#34;; script.async = true; document.body.appendChild(script); } </code></pre> <p>并在 <pre><code>useEffect</code></pre> 或 <pre><code>componentDidMount</code></pre> 方法中调用此函数</p> </answer> <answer tick="false" vote="-1"> <p><a href="https://www.npmjs.com/package/script-tag-in-react" rel="nofollow noreferrer">https://www.npmjs.com/package/script-tag-in-react</a></p> <p>通过使用这个库，你可以在React JSX中使用脚本标签。</p> </answer> </body></html>

为什么在我的 HTML/CSS/JavaScript 设置中单击单张卡片时会同时打开多张卡片？

首先 - 这里是菜鸟编码员，经验很少。我有一个包含多张卡片的网页，每张卡片代表一个博物馆展览。单击一张卡片后，我只想要该特定卡片...

如何将innerHTML字符串修剪为其中的特定元素？

我想知道如何将innerHTML字符串获取到元素内的特定元素。 例子 ： 这是一个段落... 我想知道如何将 innerHTML 字符串获取到元素内的特定元素。 示例： <div id="common-name"> <p id="P1">This is a paragraph 1.</p> <p id="P2" >This is a paragraph 2 .</p> <p id="P3">This is a paragraph 3.</p> </div> 假设我们希望它达到具有 id: P2 的元素，因此作为 string 输出将类似于 : <div id="common-name"><p id="P1">This is a paragraph 1.</p> （此外，如果存在任何实现，如果元素没有 ID，而是将 ref 作为 JavaScript 中的对象，则可以完成该操作。 我尝试将 innerHTML 内容作为字符串获取，但不知道如何获取元素后的其余文本，以便我可以从原始字符串中减去它以获得相同的输出。 这是我想出的一个解决方案，用于使用 for 循环隐藏多个元素。 我使这段代码可重用并且易于放入当前代码中。 //Is an array of all elements in div let container = document.querySelector("#container").children; //'i' = 1 so we don't hide the first element. for (let i = 1; i < container.length; i++) { container[i].style.display = "none"; //hiding elements console.log("Element: " + Math(i + 1); //Logging data } <div id="container"> <p id="P1">This is a paragraph 1.</p> <p id="P2">This is a paragraph 2 .</p> <p id="P3">This is a paragraph 3.</p> </div> 希望这有帮助:) 如果有的话请投票。

在 React 中重新创建交互式工作区。如何迁移？

因此，我最初创建了一个程序，该程序允许交互式工作区，允许用户在页面上拖动并使用纯 JavaScript 移动容器内的所有内容。代码如下...

从下拉列表中选择要传递给变量的选项并使用新的 domDocument 重新加载页面

好的。已经为此奋斗了很长时间了。我有以下代码从添加站点获取 html： $articleClassName = '相对隔离 sf-search-ad 光标指针溢出隐藏相对转换...

OOP“类”和使用 JavaScript 进行 DOM 操作，未定义元素

这是我的第一个使用 JavaScript 使网站动态化的个人项目。我并不感到完全迷失，但几天后我就会屈服于“卡住”的感觉。我有一个网格容器

React diffing 算法如何比手动 DOM 操作更快？

我喜欢 React！ 然而，我是在 React 出现之后才开始编程的，所以我从来没有真正拥有过在生产环境中使用 vanilla JS 开发应用程序的第一手经验。所以，当我走下...

如何更改图像标签内的图像（使用innerMainImg类）当我单击当前图像时如何传递到下一个图像？

我正在创建一个网页，其中有一个包含图像的div，img标签具有innerMainImg类。我的项目中的“图像”文件夹中有四张图像。这些图像是&...

可以使用 tailwind CSS 操作 DOM - Vanilla JS 项目

我想隐藏“标记为完成按钮”并将其替换为完成按钮，方法是替换“已完成”按钮中的“隐藏”类并将其添加到“标记为”

有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？

有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？ 例子： 顶部节点文本 子节点文本 有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？ 示例： <div> top node text <div> child node text </div> </div> 如何获取“顶部节点文本”而忽略“子节点文本”？顶部 div 的 innerText 属性似乎返回内部文本和顶部文本的串联。 只需迭代子节点并连接文本节点： var el = document.getElementById("your_element_id"), child = el.firstChild, texts = []; while (child) { if (child.nodeType == 3) { texts.push(child.data); } child = child.nextSibling; } var text = texts.join(""); 这将在您的示例中起作用： document.getElementById("item").firstChild.nodeValue; 注意：请记住，如果您知道自己正在处理特定的 HTML，那么这将起作用。如果您的 HTML 可以更改，例如： <div> <div class="item"> child node text </div> top node text </div> 那么你应该使用更通用的解决方案 @Tim Down 这是工作代码片段： window.onload = function() { var text = document.getElementById("item").firstChild.nodeValue; document.getElementById("result").innerText = text.trim(); }; #result { border: 1px solid red; } <div id="item"> top node text <div> child node text </div> </div> <strong>Result:</strong> <div id="result"></div> 克隆元素。 循环遍历所有子节点（向后，以避免冲突）：如果元素具有 tagName 属性，则它是一个元素：删除该节点。 使用 innerText 获取文本内容（当不支持 textContent 时，可以回退到 innerText）。 代码： var elem = document.getElementById('theelement'); elem = elem.cloneNode(true); for (var i=elem.childNodes.length-1; i>=0; i--) { if (elem.childNodes[i].tagName) elem.removeChild(elem.childNodes[i]); } var innerText = elem['innerText' in elem ? 'innerText' : 'textContent']; function getDirectInnerText(element) { var childNodes = element.childNodes; result = ''; for (var i = 0; i < childNodes.length; i++) { if(childNodes[i].nodeType == 3) { result += childNodes[i].data; } } return result; } element = document.querySelector("div#element"); console.log(getDirectInnerText(element)) <div id="element"> top node text <div> child node text </div> </div> 如果不想忽略子元素的内部文本，请使用以下函数： function getInnerText(el) { var x = []; var child = el.firstChild; while (child) { if (child.nodeType == 3) { x.push(child.nodeValue); } else if (child.nodeType == 1) { var ii = getInnerText(child); if (ii.length > 0) x.push(ii); } child = child.nextSibling; } return x.join(" "); } 正如所有其他答案已经解释的那样，您需要检查子节点的类型。 这是基于 @ehsaneha 的答案的简洁的单行文字： Array.from(element.childNodes).reduce((x, y) => x + (y.nodeType == Node.TEXT_NODE ? y.data : ''), '').trim() 或者作为原型方法： Element.prototype.directInnerText = function () { return Array.from(this.childNodes).reduce((x, y) => x + (y.nodeType == Node.TEXT_NODE ? y.data : ''), '').trim(); } 用途： console.log(document.body.querySelector('.element').directInnerText()); 兼容性参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType?retiredLocale=de const nodeValues=[]; document.querySelectorAll("locator").forEach( function (currentValue) { nodeValues.push(currentValue.firstChild.nodeValue); } ) return nodeValues;

通过JS添加一个元素。我们如何稍后在同一个 js 文件中选择该元素[关闭]

我正在为我的大学项目制作日历。 我使用 js for 循环添加了一些 div ： 对于（令 i = 1；i <= 5; i++) { calendarGrid.innerHTML += ` 我正在为我的大学项目制作日历。 我使用 js for 循环添加了一些 div : for (let i = 1; i <= 5; i++) { calendarGrid.innerHTML += `<div class= "date-cell today">${i}</div>`; } 这会将 div 元素（带有 class = date-cell）添加到类（calendarGrid）中，该类也是一个 div 元素 现在我想向此 div（日期单元格）添加一个事件侦听器，以便单击日期单元格时，我的回调函数将运行 现在选择日期单元格类元素： const prevDateCell = document.querySelectorAll('.date-cell'); prevDateCell 应该给出一个节点列表，其中包含类 date-cell 的所有元素，节点列表的长度应该为 5 但是在控制台 prevDateCell 时，它给出一个 NodeList(0)。 请给出如何选择此 for 循环添加 div 的解决方案以及对此问题的解释 提前致谢 编辑：单击日期单元格时，月份会发生变化，网站上剩余代码显示的日历也会发生变化。 这是活动委托的良好候选者。您无需将单击处理程序添加到元素，而是将其添加到父元素并查看单击的内容。这将允许您定位静态和动态元素。 同样对于 for 循环，您不应该以这种方式使用三元。它很难阅读，而且不是它的意义。 在我的回答中，我已禁用测试，但它会将 isToday 设置为今天或不设置，具体取决于匹配日期值。然后我在日期单元格 div 中使用它。 我的点击处理程序被委托给calendarGrid元素，然后我检查类，如果它匹配，则相应地运行函数。 const calendarGrid = document.querySelector(".calendarGrid"); for (let i = 1; i <= 5; i++) { //const isToday = (i == originalDate.getDate() && originalDate.getMonth() == currentDate.getMonth()) ? "today" : ""; const isToday = ""; calendarGrid.innerHTML += `<div class= "date-cell ${isToday}">${i}</div>`; } calendarGrid.addEventListener("click",(e) => { const el = e.target; if(el.classList.contains("date-cell")){ const selNum = el.textContent; console.log(selNum) /* currentDate.setMonth(currentDate.getMonth() - 1); console.log("Previous") updateCalendar(); */ } }); .date-cell{ padding:10px; display:inline-block; background:#d0d0d0; margin:10px; } <div class="calendarGrid"></div>

querySelectorAll 未在递归函数内返回更新的节点列表

我正在尝试抓取将来创建的 DOM 中的一个元素。为了简单起见，当用户通过单击上传按钮上传图像时，会在 DOM 中创建一个 div，它有一个类 ...

每次浏览器重新加载时“clientwidth”都会发生变化

嗨，我不懂javascript，但我可以理解它，我想构建一个轮播，所以我尝试使用“clientwidth”访问元素的宽度，但我得到的宽度...

尝试通过 JavaScript 执行 CSS 转换是行不通的

当我尝试通过 JavaScript 执行 CSS 转换时，它们对我不起作用。 这是我的 HTML 代码 当我尝试通过 JavaScript 执行 CSS 转换时，它们对我不起作用。 这是我的 HTML 代码 <div class="search-icon"> <i class="fas fa-search search-icon-header"></i> <img src="images/close-icon.svg" alt="close-icon-search" class="close-icon-search"> </div> <div class="search-bar" id="search-bar"> <div class="search-container"> <form class="search-form"> <input type="text" placeholder="Search..."> <button type="submit"><i class="fas fa-search search-icon-action"></i></button> </form> </div> </div> 这是我在 JavaScript 中的函数： let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.style.display = "flex"; searchBar.classList.add("search-bar-open") } isSearchBarOpen = !isSearchBarOpen; toggleSearchIcon(); } 当搜索栏打开时，会添加 .search-bar-open 类。 现在是CSS： .search-bar { display: none; background-color: #000; color: #fff; position: absolute; top: 0; left: 0; right: 0; padding: 10px 5px; z-index: 1000; margin: 0 auto; transition: top 2s ease-in; } .search-bar-open { top:90px; } 单击搜索按钮时，会发生以下情况（或者如果我没记错的话应该发生）： 该函数检查 isSearchBarOpen 是否为 true 或 false。 如果 true（即，如果搜索栏打开），则会添加内联样式 (display:none) 隐藏搜索栏。 如果是 false（即，如果搜索栏已关闭），则会添加内联样式 (display:flex) 以使其显示。此外，还添加了一个类 (.search-bar-open)。 从那里，如果我们看一下 CSS…… 搜索栏打开时（显示时）会加载 .search-bar-open 类和 display:flex 内联样式。一方面，所述内联样式通过特定性覆盖通过 display:none 类应用的 .search-bar CSS 属性。 此外，还添加了 .search-bar-open 类。 现在，我假设，当应用.search-bar-open类时，应该发生.search-bar中规定的转换，即： a.我在top:0;… b. 2 秒后，ease-in… c.我已经准备好了top:90px;。 我一定是误解了一些东西，因为它不起作用:-( 如果您使用 JS 使元素可见并添加类来触发转换，则它将不起作用，因为 JS 同时执行这两个操作。如果元素上的属性发生更改，则会触发转换，但像这样完成，top属性永远不会更改，当元素变得可见时它已经存在了。 您可以在两者之间添加 JS 操作来触发浏览器“重排”。这样，浏览器首先使元素可见，在页面上绘制该元素，然后添加类以触发转换。 searchBar.style.display = "flex"; searchBar.offsetWidth; searchBar.classList.add("search-bar-open")

使用 Cheerio 和 http-proxy-middleware 在 Express 节点中对代理响应进行 DOM 操作

我已经在express Node中设置了代理服务器，运行良好。 const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); 常量应用程序 = Express(); // D...

如何使用querySelectorAll forEach更改元素的innerHTML

我正在使用此脚本将 p 标签更改为 i 标签。 有 2 个带有 .account-link-toggle 类的元素，但控制台显示节点列表中有 3 个元素。他们都没有更新。 有什么建议吗...

RemoveChild 和appendChild 元素未被删除或追加

我有这个脚本，当我查看控制台时它正在工作，但不会影响页面。 accountLink 不会被删除，userIcon 也不会取代它。 我预计 accountLink 会被删除并且

RemoveChild 和appendChild 元素未被删除或追加

我有这个脚本，当我查看控制台时它正在工作，但不会影响页面。 accountLink 不会被删除，userIcon 也不会取代它。 我预计 accountLink 会被删除并且

为什么setAtrribute和removeAttribute不起作用

App.js const ul = document.querySelector('ul'); const li = document.createElement('li'); ul.append(li); li.innerText = 'X 战警'; li.setAttribute('id', '主标题'); 索引.html ...