dom-manipulation 相关问题

我正在创建一个要包含在大型React项目中的组件，该组件加载一组看起来像这样的脚本标签 /* <![CDATA[ */ var </desc> <question vote="0"> <p>我正在创建一个要包含在大型 React 项目中的组件，该组件加载一组看起来像这样的脚本标签</p> <pre><code><script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = XXXX; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0"/> </div> </noscript> </code></pre> <p>无论如何我都无法更改此脚本的内容，所以现在我正在使用 <strong>dangerously-set-html-content</strong> npm 包来成功添加和执行这些脚本，但随后我收到以下控制台警告：</p> <pre><code>conversion.js:29 Failed to execute 'write' on 'Document': It isn'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><script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" async></script></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 = () => { const script = document.createElement("script"); script.src = "https://yourlink.js"; 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>

javascript reactjs react-hooks dom-manipulation

回答 0 投票 0

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

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

javascript html css event-handling dom-manipulation

回答 1 投票 0

如何将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> 希望这有帮助:) 如果有的话请投票。

javascript html dom dom-manipulation

回答 1 投票 0

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

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

javascript reactjs css-transforms dom-manipulation

回答 1 投票 0

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

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

php select drop-down-menu domdocument dom-manipulation

回答 1 投票 0

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

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

javascript class oop constructor dom-manipulation

回答 1 投票 0

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

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

reactjs performance rendering dom-manipulation

回答 1 投票 0

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

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

javascript event-listener dom-manipulation

回答 2 投票 0

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

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

javascript tailwind-css dom-manipulation

回答 1 投票 0

有没有办法只获取顶部元素的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;

javascript html dom dom-manipulation

回答 7 投票 0

通过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>

javascript html dom-manipulation

回答 1 投票 0

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

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

javascript recursion dom dom-manipulation selectors-api

回答 1 投票 0

dom-manipulation 相关问题

最新问题