技術標籤：jsdom

插入區別

• 用innerHTML插入文字到網頁中並不罕見。但這有可能成為網站攻擊的媒介，從而產生潛在的安全風險問題。
• 當插入純文字時，建議不要使用innerHTML。取而代之的是使用Node.textContent ，它不會把給定的內容解析為 HTML，它僅僅是將原始文字插入給定的位置。
• 如果要向一個元素中插入一段 HTML，而不是替換它的內容，那麼請使用insertAdjacentHTML() 方法。

四種獲取內容的區別

    <div class="div1">點我呀
        <span style="color: royalblue;">原住民span</span>
        <span style="display: none;">原住民span</span>
        <script>
            var a = 1;
        </script>
    </div>

    <script>
        var div1 = document.querySelector('.div1');
        div1.addEventListener('click',function () {
            console.log('textContent:\n' + this.textContent);
            console.log('innerText\n' + this.innerText);
            console.log('innerHTML\n' + this.innerHTML);
            console.log('outerHTML\n' + this.outerHTML);
        })
        
    </script>
 

• textContent會獲取所有元素的內容，包括 <script>和 <style>元素，然而 innerText只展示給人看的元素。
• textContent 會返回節點中的每一個元素。相反，innerText 受CSS 樣式的影響，並且不會返回隱藏元素的文字。
• 與textContent 不同的是, 在 Internet Explorer (小於和等於11 的版本) 中對innerText 進行修改，不僅會移除當前元素的子節點，而且還會永久性地破壞所有後代文字節點。在之後不可能再次將節點再次插入到任何其他元素或同一元素中。
• 此外，使用textContent可以防止 XSS 攻擊
  。