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>