innerHTML,innertext,textContent区别

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .demo{
 8                 visibility: hidden;
 9             }
10             .test{
11                 display: none;
12             }
13         </style>
14     </head>
15     <body>
16         <div id="demo">
17             放到<p class="demo">蚂蚁不是蚂蚁</p>撒大苏打
18         </div>
19         <div id="test">
20             放到<p class="test">蚂蚁不是蚂蚁</p>撒大苏打
21         </div>
22         
23         
24         <script type="text/javascript">
25             let demo = document.getElementById("demo")
26             console.log("1"+demo.innerHTML,"2"+demo.textContent,"3"+demo.innerText)
27 //            1
28 //            放到<p class="demo">蚂蚁不是蚂蚁</p>撒大苏打
29 //         2
30 //            放到蚂蚁不是蚂蚁撒大苏打
31 //         3放到
32 //
33 //撒大苏打
34             let text = document.getElementById("test")
35             console.log("1"+test.innerHTML,"2"+test.textContent,"3"+test.innerText)
36 //            1
37 //            放到<p class="test">蚂蚁不是蚂蚁</p>撒大苏打
38 //         2
39 //            放到蚂蚁不是蚂蚁撒大苏打
40 //         3放到撒大苏打
41 
42             //在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。copy
43             //
44             //通过 innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过 innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。
45             //在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。会解析
46             //textContent  copy+解析+不会受干扰（hidden,none)
47         </script>
48     </body>
49 </html>

可以联系之前再vue中的一个坑，当你设置display:none的时候那个元素是不占空间了，但是他依旧在哪里并没有消失，v-for为false的时候才是真的没了，联系

这里的情况可以这样理解这几个元素,innerHTML就是搬运工，不动脑子就搬过来了，textContent却把代码搬过来并且解析不受样式的影响，innerText解析代码但是受样式影响的（ps:display:none不占空间,visibility:hidden占空间）

innerHTML,innertext,textContent区别

猜你喜欢