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占空间）
原文地址：https://www.cnblogs.com/lujunan/p/10304366.html
时间： 2024-10-08 10:02:17