【JavaScript】47_DOM编程：文本节点
【摘要】 5、文本节点在DOM中，网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做我们可以直接通过元素去修改其中的文本 修改文本的三个属性 element.textContent获取或修改元素中的文本内容 - 获取的是标签中的内容，不会考虑css样式 element.innerText获取或修改元素中的文本内容innerText获取内容时，会考虑c...
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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）