修改JavaScript中的元素內(nèi)容需利用dom提供的方法，主要有三種方式：1.innerhtml可用于插入包含html標(biāo)簽的內(nèi)容；2.textcontent用于安全高效地設(shè)置純文本內(nèi)容；3.innertext雖類似textcontent，但存在兼容性問題，通常不推薦使用。若要避免xss攻擊，應(yīng)避免直接插入用戶輸入，或?qū)斎脒M(jìn)行轉(zhuǎn)義處理。對于大量元素的更新，可使用documentfragment實現(xiàn)批量操作以提升性能。此外，可通過setattribute或直接訪問屬性的方式動態(tài)修改元素的屬性。
修改JavaScript中的元素內(nèi)容，核心在于利用DOM（文檔對象模型）提供的屬性和方法。簡單來說，就是先找到你想改的元素，然后用特定的方法去改變它。
修改元素內(nèi)容，主要有以下幾種方法：
- innerHTML: 允許你設(shè)置或獲取元素的HTML內(nèi)容，包括HTML標(biāo)簽。
- textContent: 設(shè)置或獲取元素的文本內(nèi)容，會忽略HTML標(biāo)簽。
- innerText: 類似于textContent，但有一些瀏覽器兼容性問題，并且在處理隱藏元素時表現(xiàn)不同。
如何選擇合適的修改方式？
選擇哪種方式取決于你的具體需求。如果你需要修改的內(nèi)容包含HTML標(biāo)簽，比如插入一個鏈接或者一個加粗的文本，那么innerHTML是最佳選擇。如果你只需要修改純文本內(nèi)容，textContent會更安全和高效，因為它避免了HTML解析的開銷。至于innerText，由于兼容性問題，通常不推薦使用。
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
如何使用innerHTML修改元素內(nèi)容？
innerHTML會將字符串解析為HTML，所以使用時要小心，避免XSS攻擊。例如：
const element = document.getElementById('myElement'); element.innerHTML = '<p>this is a <strong>new</strong> paragraph.</p>';
這段代碼會將id為myElement的元素的內(nèi)容替換為一個包含加粗文本的新段落。
如何使用textContent修改元素內(nèi)容？
textContent會將所有內(nèi)容視為純文本，不會解析HTML標(biāo)簽。例如：
const element = document.getElementById('myElement'); element.textContent = '<p>This is a <strong>new</strong> paragraph.</p>';
這段代碼會將id為myElement的元素的內(nèi)容替換為字符串
This is a new paragraph.
，而不是一個HTML段落。
修改元素內(nèi)容時，如何避免XSS攻擊？
使用innerHTML時，務(wù)必小心，不要將用戶輸入直接插入到HTML中，因為這可能導(dǎo)致XSS攻擊。應(yīng)該對用戶輸入進(jìn)行轉(zhuǎn)義，或者使用textContent來避免HTML解析。例如，可以使用以下方法轉(zhuǎn)義HTML：
function escapeHtml(string) { return string.replace(/[&<>"']/g, function(m) { switch (m) { case '&': return '&'; case '<': return '<'; case '>': return '>'; case '"': return '"'; case "'": return '''; default: return m; } }); } const userInput = '<script>alert("XSS");</script>'; const element = document.getElementById('myElement'); element.innerHTML = escapeHtml(userInput); // 安全地顯示用戶輸入
如何高效地更新大量元素的內(nèi)容？
如果需要更新大量元素的內(nèi)容，直接操作DOM可能會很慢。可以考慮使用DocumentFragment來批量更新DOM，減少瀏覽器的重繪次數(shù)。例如：
const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const p = document.createElement('p'); p.textContent = 'Paragraph ' + i; fragment.appendChild(p); } const element = document.getElementById('myElement'); element.appendChild(fragment); // 一次性將所有段落添加到DOM中
這段代碼創(chuàng)建了一個DocumentFragment，并將100個段落添加到其中，然后一次性將整個Fragment添加到DOM中，這樣可以顯著提高性能。
如何動態(tài)地修改元素的屬性？
除了修改元素的內(nèi)容，有時還需要修改元素的屬性，例如class、style、src等?？梢允褂胹etAttribute方法來設(shè)置屬性，或者直接訪問元素的屬性。例如：
const element = document.getElementById('myElement'); // 使用setAttribute設(shè)置屬性 element.setAttribute('class', 'new-class'); // 直接訪問屬性 element.style.color = 'red'; element.src = 'new-image.jpg';
直接訪問屬性通常更方便，但setAttribute方法可以用于設(shè)置自定義屬性，或者在某些特殊情況下更可靠。
