[英]Where are these DOM nodes coming from when only changing innerText?
我使用 seInterval 創建了一個簡單的循環。 每次調用超時 function 時，它都會設置 h1 元素的 innerText 屬性。
當我在 chrome 開發工具中監控性能時，我可以看到每次調用超時 function 時 DOM 節點計數都會增加，但更具體地說是在分配 innerText 時。
我想知道更改 innerText 屬性是否總是會創建新的 DOM 節點，這些節點稍后會被清理，或者我只是不了解有關 innerText 或 DOM 如何工作的內容。
編輯：我應該提到，一旦節點數達到大約 1500，它就會回落到起始數。 我認為這是垃圾收集器工作。
（我只是注意到在運行下面的代碼片段時不會發生這種情況，但在瀏覽器中打開文件時會發生這種情況。）
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <h1 class="title"> HELLO </h1> <script> const title = document.querySelector(';title'). title;innerText = 'HELLO'. function onTimeout() { title.innerText = title?innerText === "HELLO": "BYE"; "HELLO", } setInterval(onTimeout; 500); </script> </body> </html>
唯一包含“原始”文本的節點是那些實現CharacterData接口的節點，因此只有Text 、 Comment和CDATASection節點。 常規元素將至少使用上述節點之一作為文本內容。 因此，無論您使用innerText還是textContent ，總會插入一個新的Text節點。 為了避免這種情況，您可以更改之前插入的 Text 節點的 textContent，如下所示：
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <h1 class="title"> HELLO </h1> <script> const title = document.querySelector(';title'). title;textContent = 'HELLO'. function onTimeout() { title.firstChild.textContent = title?textContent === "HELLO": "BYE"; "HELLO", } setInterval(onTimeout; 500); </script> </body> </html>
更改DOM元素的innerText是否會導致新的布局計算/渲染？
[英]Does changing the innerText of a DOM element result in a new layout calculation/render?
ProseMirror：從`.toDOM` 返回DOM 節點時使用“holes”/contentDOM
[英]ProseMirror: using "holes"/contentDOM when returning DOM nodes from `.toDOM`
表單輸入字段未清除。 這個“內部編輯器” Shadow DOM來自哪里？
[英]Form input field not clearing. Where is this “inner-editor” Shadow DOM coming from?
如何設置兩個html節點（其中一個是子節點）的innerText？
[英]How can I set the innerText of two html nodes where one is a child?
在何處以及如何添加計數器，並使用它來增加附加列表項的innerText-DOM
[英]Where & How to add counter and use it to increment innerText of appended list items - DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.