【JavaScript】40_DOM编程：文本节点

最新推荐文章于 2024-08-18 10:54:05 发布

名之以父

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量267

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css vue.js html

本文链接：https://blog.csdn.net/wujianrenn/article/details/129583548

版权

JavaScript 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

文章介绍了在DOM中处理文本内容的三种方式：textContent用于获取或修改纯文本内容，忽略CSS样式；innerText考虑样式且可能触发重排，对HTML标签自动转义；innerHTML则可处理HTML代码，但存在XSS风险。示例展示了这些属性的使用方法。

摘要由CSDN通过智能技术生成

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>

名之以父

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】40_DOM编程：文本节点

在DOM中，网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做我们可以直接通过元素去修改其中的文本修改文本的三个属性。
复制链接

扫一扫