DOM笔记——元素内容插入/获取合集

	方法 or 属性	是否覆盖原居民	获取的内容	浏览器
element.insertAdjacentHTML(position, text)	方法	不覆盖	x	ok
element.insertAdjacentText(position, element)	方法	不覆盖	x	ok
element.innerHTML	属性	覆盖	获取标签内，包括HTML标签，保留空格换行。	ok
element.innerText	属性	覆盖	获取标签内，展示给人看的元素内容，不包含标签，同时空格和换行也会去掉。	ok
element.outerHTML	属性	覆盖	获取包含元素本身标签，包括HTML标签，保留空格换行。	ok
Node.textContent	属性	覆盖	会获取所有元素的内容，但不包含标签。（js 和 隐藏的内容也会获取）	IE9+

插入区别

• 用 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 攻击。