innerHTML/outerHTML

innerHTML表示设置或者获取元素的HTML，另外还有个outerHTML属性表示替换掉包含父元素的所有内容。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <li>这是列表</li>
  12.       <p>这是段落</p>
  13.     </div>
  14.   </body>
  15. </html>

先看看innerHTML的效果：

  1. var oBox = document.getElementsByClassName("box")[0];
  2. oBox.innerHTML = "<span>这是span</span>"

image.png

再看看outerHTML的效果：

  1. var oBox = document.getElementsByClassName("box")[0];
  2. oBox.outerHTML = "<h1>这是span</h1>";

image.png
可以看到outerHTML把父节点div也给替换了！！！

innerHTML 的执行过程

innerHTML的操作过程是比较消费性能的，每次设置innerHTML都会经过如下的步骤：

  1. h1.innerHTML = "<h1>123</h1>"设置元素内容
  2. 将<h1>123</h1>解析为HTML文档
  3. 用DocumentFragment将这个文档结构变成DOM节点
  4. 用原本父元素上所有的内容然后替换成这个DOM节点

innerHTML 安全问题

HTML5和现代浏览器都会阻止通过innerHTML嵌入script脚步的程序执行。

  1. document.documentElement.innerHTML= "<script>alert(123)</script>";

textContent/innerText

textContent和innerText都表示设置或获取元素文本内容。
当我们给元素插入的内容是纯文本的时候，要避免使用innerHTML！！！

textContent和innerText的区别在于获取到的内容不同

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <style>
  12.         .content {
  13.           color: orange;
  14.         }
  15.       </style>
  16.       <p>这是p文本</p>
  17.       <br />
  18.       <p>这是p文本</p>
  19.       <br />
  20.       <span style="display: none">这是隐藏内容</span>
  21.     </div>
  22.   </body>
  23. </html>
  1. var oBox = document.getElementsByClassName("box")[0];
  3. console.log(oBox.textContent);
  4. console.log(oBox.innerText);

image.pngimage.png
textContent返回所有的内容包括style、script、设置隐藏的内容，而innerText只会返回类似浏览器页面上真正显示的内容。