5、文本节点

在DOM中，网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做

我们可以直接通过元素去修改其中的文本 修改文本的三个属性

element.textContent

获取或修改元素中的文本内容

- 获取的是标签中的内容，不会考虑css样式

element.innerText

获取或修改元素中的文本内容

  • innerText获取内容时，会考虑css样式
  • 通过innerText去读取CSS样式，会触发网页的重排（计算CSS样式）
  • 当字符串中有标签时，会自动对标签进行转义
<li> --> <li>

element.innerHTML

获取或修改元素中的html代码

  • 可以直接向元素中添加html代码
  • innerHTML插入内容时，有被xss注入的风险
<body>
     <div id="box1">
         <span style="text-transform: uppercase;">我是box1</span>
     </div>
 
 
     <script>
         const box1 = document.getElementById('box1')
 
         const text = box1.firstChild
         console.log(text)
 
         // box1.innerText = "xxxx"
         // console.log(box1.textContent)
 
         // box1.textContent = "新的内容"
 
         /* box1.innerHTML = "<、script src='https://sss/sss.js'></script>" */
     </script>
 </body>