dom 相关问题

我想要做的是交换两个 HTML DOM 节点。让我们采用以下 HTML 列表和下面的交换按钮： 0 ... 我想要做的是交换两个 HTML DOM 节点。让我们采用以下 HTML 列表和下面的交换按钮： <ul class="center-text"> <li>0</li> <li>1</li> <li>2</li> </ul> <form class="center-text"> <button id="swapButton">Swap</button> </form> 这是我的 JS 代码： // the "ready" method is the only jQuery method used in the code $(document).ready(function(){ document.getElementById("swapButton").onclick = function() { var ul = document.getElementsByTagName("ul")[0]; // pseudo-swapping: insert "child2" before "child0" // (indexes are 1 and 5 because of the TextNodes between list nodes) ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1)); } }); 因此，单击交换按钮时会发生以下情况：物品确实被交换了。但不知何故，在（比方说 1/4）秒后，它们会恢复到原来的位置，即自动交换回来。我的问题是：为什么？ PS：该代码仅用于教育目的，我只是尝试了解幕后发生的事情，所以请不要发布任何替代的 jQuery 方法。 $(document).ready(function(){ document.getElementById("swapButton").onclick = function(e) { e.preventDefault(); var ul = document.getElementsByTagName("ul")[0]; ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1)); } }); 这是因为按钮将页面重定向到同一页面。并恢复全部。您需要防止按钮的默认行为。

javascript dom

回答 1 投票 0

JavaScript id 详细信息显示一个结果，与 id 无关

我正在使用 NY Times api 使用 javascript 创建一个图书应用程序，用户可以通过单击任何一本书来查看图书详细信息。我使用来自 a...的 Primary_isbn10 为每本书指定了不同的 id...

javascript dom

回答 1 投票 0

如何将事件委托添加到单选按钮上的“更改”事件（而不是单击）？

我经常使用类似代码的父元素上的“click”事件轻松实现事件委托 HTML：我经常使用类似代码的父元素上的“单击”事件轻松实现事件委托 HTML： <div> <span> <input type="radio" id="all0" name="difficulty-ask" class="difficultyaskclass" value="all" checked="checked" /> <label for="all0">All</label> <input type="radio" id="2easy1" name="difficulty-ask" class="difficultyaskclass" value="easy" /> <label for="2easy1">Easy</label> <input type="radio" id="2med2" name="difficulty-ask" class="difficultyaskclass" value="medium" /> <label for="2med2">Medium</label> <input type="radio" id="2hard3" name="difficulty-ask" class="difficultyaskclass" value="hard" /> <label for="2hard3">Hard</label> </span> </div> JS： parentelement.addEventlistener('click', (event) => { if(event.target.classList.contains('targetelement'){Code..}}; （父元素只是一个常规的div，其中放置了单选按钮）如果单选按钮切换状态，它现在如何处理“更改”事件？我首先通过循环遍历所有这些，然后为每个添加一个事件监听器来使其工作。但这显然不是理想的解决方案，我肯定需要一些事件委托。您可以使用 input 事件，该事件对任何表单元素也有效演示： const myForm = document.forms['my-form']; myForm.addEventListener('submit', e => { e.preventDefault(); // disable submit - page reload const formValues = Object.fromEntries(new FormData(myForm).entries()); console.log( formValues ); setInterval(console.clear,8000); }) myForm.addEventListener('input', e => { if (!e.target.matches('input[type="radio"]')) return; console.log(myForm['difficulty-ask'].value); setInterval(console.clear,2000); });label { display:block; } fieldset { width: fit-content; }<form name="my-form"> <fieldset> <legend> difficulty </legend> <label> <input name="difficulty-ask" type="radio" value="all" checked > All </label> <label> <input name="difficulty-ask" type="radio" value="easy" > Easy </label> <label> <input name="difficulty-ask" type="radio" value="medium" > Medium </label> <label> <input name="difficulty-ask" type="radio" value="hard" > Hard </label> </fieldset> <button>submit</button> </form>

javascript performance dom event-handling event-delegation

回答 1 投票 0

如何在不操作DOM的情况下以角度操作/复制ElementRef？

我有一个近 200 行的格式化 html 表格，我必须将其导出为 PDF。目前我正在使用 jsPDF 库。制作PDF() { var elWidth = this.el.nativeElement.getBoundingClientRect().width ...

javascript angular typescript dom elementref

回答 1 投票 0

如何将元素数组转换为 NodeList？

首先，这不是问如何将 NodeList 转换为 Array。这是相反的。为了保持一致性，我想创建一个返回 NodeList 的函数，就像...

javascript dom

回答 2 投票 0

如何使用 JavaScript fetch 方法更新 DOM 以从 API 过滤用户数据？

我希望从 API 获取数据并使用 JavaScript 获取功能在 HTML 页面中显示。 JavaScript 代码详述如下。我可以从API读取用户数据的console.log。然而，n...

javascript dom fetch-api dom-manipulation

回答 1 投票 0

即使在 tic tac toe 游戏中轮到玩家二后，事件侦听器也会添加到玩家一

回合确实切换，新选择的点被添加到playerTwo数组中，但它也被添加到playerOne中。我已经移动了部分代码，但这并不能解决问题。 const 游戏板 = ((...

javascript oop dom

回答 1 投票 0

将 HTML 字符串附加到 DOM

如何附加 HTML 字符串，例如 var str = '这里只是一些文字'; 到带有 id 测试的？（顺便说一句 div.innerHTML += str; 是不可接受的。）如何附加 HTML 字符串，例如 var str = '<p>Just some <span>text</span> here</p>'; 到 id 为 <div> 的 test？（顺便说一句div.innerHTML += str;是不可接受的。）使用 insertAdjacentHTML 当前所有浏览器都支持: div.insertAdjacentHTML( 'beforeend', str ); 位置参数beforeend将添加到元素内部，在其最后一个子元素之后。现场演示：http://jsfiddle.net/euQ5n/ 性能 AppendChild (E) 比 Chrome 和 Safari 上的其他解决方案快 2 倍以上，insertAdjacentHTML(F) 在 Firefox 上速度最快。 innerHTML= (B)（不要与 += (A) 混淆）是所有浏览器上第二快的解决方案，它比 E 和 F 方便得多。详情设置环境 (2019.07.10) Chrome 75.0.3770 (64 位)、Safari 11.1.0 (13604.5.6)、Firefox 67.0.0 (64 位) 上的 MacOs High Sierra 10.13.4 Chrome E（每秒 140k 操作）最快，B (47k) 和 F (46k) 次之，A (332) 最慢在 Firefox 上 F (94k) 最快，然后是 B(80k)、D (73k)、E(64k)、C (21k) 最慢的是 A(466) 在 Safari 上 E(207k) 最快，然后是 B(89k)、F(88k)、D(83k)、C (25k)，最慢的是 A(509) 您可以在您的机器上重播测试这里 function A() { container.innerHTML += '<p>A: Just some <span>text</span> here</p>'; } function B() { container.innerHTML = '<p>B: Just some <span>text</span> here</p>'; } function C() { $('#container').append('<p>C: Just some <span>text</span> here</p>'); } function D() { var p = document.createElement("p"); p.innerHTML = 'D: Just some <span>text</span> here'; container.appendChild(p); } function E() { var p = document.createElement("p"); var s = document.createElement("span"); s.appendChild( document.createTextNode("text ") ); p.appendChild( document.createTextNode("E: Just some ") ); p.appendChild( s ); p.appendChild( document.createTextNode(" here") ); container.appendChild(p); } function F() { container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>'); } A(); B(); C(); D(); E(); F();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This snippet only for show code used in test (in jsperf.com) - it not perform test itself. <div id="container"></div> 这样可以接受吗？ var child = document.createElement('div'); child.innerHTML = str; child = child.firstChild; document.getElementById('test').appendChild(child); jsFiddle. 但是，尼尔的答案是一个更好的解决方案。这个想法是在中间元素上使用 innerHTML，然后通过 appendChild 将其所有子节点移动到您真正想要的位置。 var target = document.getElementById('test'); var str = '<p>Just some <span>text</span> here</p>'; var temp = document.createElement('div'); temp.innerHTML = str; while (temp.firstChild) { target.appendChild(temp.firstChild); } 这可以避免清除 div#test 上的任何事件处理程序，但仍然允许您附加 HTML 字符串。正确的方法是使用insertAdjacentHTML。在 Firefox 8 之前的版本中，如果您的 Range.createContextualFragment 不包含 str 标签，您可以回退到使用 script。如果您的 str 包含 script 标签，则需要在插入片段之前从 script 返回的片段中删除 createContextualFragment 元素。否则，脚本将运行。（insertAdjacentHTML 标记脚本不可执行。）快速破解： <script> document.children[0].innerHTML="<h1>QUICK_HACK</h1>"; </script> 用例： 1：另存为.html文件并在chrome或firefox或edge中运行。（IE不能用） 2：在http://js.do中使用实际行动： http://js.do/HeavyMetalCookies/quick_hack 细分评论： <script> //: The message "QUICK_HACK" //: wrapped in a header #1 tag. var text = "<h1>QUICK_HACK</h1>"; //: It's a quick hack, so I don't //: care where it goes on the document, //: just as long as I can see it. //: Since I am doing this quick hack in //: an empty file or scratchpad, //: it should be visible. var child = document.children[0]; //: Set the html content of your child //: to the message you want to see on screen. child.innerHTML = text; </script> 我发帖的原因： JS.do 有两个必备条件：没有自动完成功能垂直显示器友好但不显示console.log消息。来到这里寻找快速解决方案。我只想看看结果几行暂存器代码，其他解决方案的工作量太大。这个可以解决 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>'); InnerHTML 清除现有节点的所有数据，例如事件使用firstChild附加子项仅将第一个子项添加到innerHTML。例如，如果我们必须附加： <p>text1</p><p>text2</p> 仅显示text1 这个怎么样：通过附加子项将特殊标签添加到innerHTML，然后通过删除我们创建的标签来编辑outerHTML。不知道它有多聪明，但它对我有用或者您可以将outerHTML更改为innerHTML，这样就不必使用函数replace function append(element, str) { var child = document.createElement('someshittyuniquetag'); child.innerHTML = str; element.appendChild(child); child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, ''); // or Even child.outerHTML = child.innerHTML }<div id="testit"> This text is inside the div <button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button> <button onclick="append(this, 'some text')">to this</button> </div> 为什么不可接受？ document.getElementById('test').innerHTML += str 将是教科书式的做法。最短 - 18 个字符（不要混淆 +=（OP 提及）与 = 更多详细信息此处） test.innerHTML=str var str = '<p>Just some <span>text</span> here</p>'; test.innerHTML=str<div id="test"></div> 我的问题的答案就是这样；一个带有空值的简单 Map；我所能得到的只是一个非常沉重且不精确的答案。我想知道谁结束了我的问题...甚至懒得阅读 "use strict" try { const fruits = new Map([["Banana",""],["Apples", ""], ["Orange"," "]]); let text = "<h1>Fruits</h1>" + "<ul>"; fruits.forEach(function(value, key){ text += "<li>" + key + value + "<br>" + "</li>" }); text +="</li> "; document.getElementById('demo').innerHTML = text; } catch(err){ document.getElementById('theError').innerHTML = err; }

javascript html dom browser

回答 11 投票 0

ref.current 在 useEffect

我有一个正在转发到子组件的引用列表。它们似乎工作得很好，因为我可以用它们进行操作作为对用户操作的反馈（在这种情况下，它滚动到 vi...

javascript reactjs dom react-hooks

回答 1 投票 0

如何优化导致大型数据集速度变慢的 jQuery DOM 操作脚本的性能？

我可以应用任何其他优化技术或最佳实践来提高此脚本的性能吗？代码片段： // 简化示例 $('#table-body').empty(); data.forEach(func...

jquery dom optimization

回答 1 投票 0

为什么el.scrollIntoView()会导致整个容器移动？

我嵌套了overflow-y：auto元素，整个页面可滚动，侧边栏可独立滚动。当我将鼠标悬停在主要内容区域中的某些内容上时，我想要侧面...