編寫此DOM操作的更有效/適當的方法？

Question

我是Vanilla JavaScript的初學者，只是在下面創建了更改HTML的代碼。 它有效，但我想知道是否有更有效/適當的方法來做到這一點。 預先感謝您的幫助。

HTML 之前

<section id="anchor-a">
<p>lorem ipsum....</p>
</section>
<section id="anchor-b">
<p>lorem ipsum....</p>
</section>

HTML AFTER

<section>
<div id="anchor-a" class="anchor"></div>
<p>lorem ipsum....</p>
</section>
<section>
<div id="anchor-b" class="anchor"></div>
<p>lorem ipsum....</p>
</section>

我的JavaScript代碼

const anchor = document.querySelectorAll('[id^="anchor-"]');
anchor.forEach((element) => {
  let newDiv = document.createElement('div');
  newDiv.classList.add('anchor');
  newDiv.setAttribute('id', element.getAttribute("id"));
  ;
  element.insertBefore(newDiv, element.firstChild);
  element.removeAttribute('id');
});

Answer 1

一個更簡潔的版本是insertAdjacentHTML ，它可能更容易閱讀：

 const anchor = document.querySelectorAll('[id^="anchor-"]'); anchor.forEach((section) => { section.insertAdjacentHTML('afterbegin', `<div id="${section.id}">`); section.removeAttribute('id'); }); // next line is not needed, just cleans up the console output for demonstration document.currentScript.remove(); console.log(document.body.innerHTML); 

 <section id="anchor-a"> <p>lorem ipsum....</p> </section> <section id="anchor-b"> <p>lorem ipsum....</p> </section> 

另請注意， querySelectorAll返回NodeList ，只有較新的瀏覽器具有NodeList.prototype.forEach函數。 對於舊版瀏覽器和IE，要么包含polyfill，要么使用Array.prototype.forEach.call ：

 Array.prototype.forEach.call( document.querySelectorAll('[id^="anchor-"]'), (section) => { section.insertAdjacentHTML('afterbegin', `<div id="${section.id}">`); section.removeAttribute('id'); } ); // next line is not needed, just cleans up the console output for demonstration document.currentScript.remove(); console.log(document.body.innerHTML); 

 <section id="anchor-a"> <p>lorem ipsum....</p> </section> <section id="anchor-b"> <p>lorem ipsum....</p> </section> 

（當然，如果使用ES6 +語法，如果你想支持古老的瀏覽器，請記得除了polyfill之外還要轉向ES5）

Answer 2

將這個答案集中在性能上，在循環中操作DOM是一個壞主意。 DOM交互是昂貴的操作，始終建議在循環中執行操作。

我建議的是：

• 找到要執行搜索的父元素。
• 克隆一下。
• 對元素執行操作。 由於您正在使用clone，因此您不會更改DOM上的任何內容。 完成的任何操作僅在內存中。
• 現在刪除此容器元素並將已處理的clone添加到父元素。

 var container = document.querySelector('.container'); var copy = container.cloneNode(true); const anchor = copy.querySelectorAll('[id^="anchor-"]'); anchor.forEach((element) => { let newDiv = document.createElement('div'); newDiv.classList.add('anchor'); newDiv.setAttribute('id', element.getAttribute("id"));; element.insertBefore(newDiv, element.firstChild); element.removeAttribute('id'); }); container.insertAdjacentElement('afterend', copy) container.remove(); 

 <div class='container'> <section id="anchor-a"> <p>lorem ipsum....</p> </section> <section id="anchor-b"> <p>lorem ipsum....</p> </section> </div> 

注意：不改變任何與元素處理的代碼關系，因為CertainPerformance的地址是

有趣的讀物：

• DOM交互提示/注意事項 - Bergi