JavaScript基础之更新DOM
来源:互联网 发布:多益网络加班严重吗 编辑:程序博客网 时间:2024/06/05 03:18
一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树:
// 获取<p id="p-id">...</p>var p = document.getElementById('p-id');// 设置文本为abc:p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>// 设置HTML:p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';// <p>...</p>的内部结构已修改
用innerHTML时要注意,是否需要写入HTML.如果写入的字符串是通过网络拿到了,要注意对字符编码来避免XSS攻击。
第二种是修改innerText或者textContent属性,这样可以自动对字符串进行HTML编码,保证无法设置任何HTML标签:
// 获取<p id="p-id">...</p>var p = document.getElementById('p-id');// 设置文本:p.innerText = '<script>alert("Hi")</script>';// HTML被自动编码,无法设置一个<script>节点:// <p id="p-id"><script>alert("Hi")</script></p>
两者的区别在于读取属性时,innerText不返回隐藏元素的文本,而textContent返回所有文本。
阅读全文
0 0
- JavaScript基础之更新DOM
- javascript基础之DOM
- javaScript基础之BOM&&DOM
- JavaScript 基础之BOM&DOM
- JavaScript基础之操作DOM
- JavaScript基础之插入DOM
- JavaScript基础之删除DOM
- JavaScript教程系列之----DOM基础
- [学习笔记]JavaScript之DOM基础
- JavaScript DOM 编程之基础篇
- [学习笔记]JavaScript之DOM基础
- javascript DOM编程学习心得之基础
- JavaScript基础之JQuery与DOM
- javascript DOM编程艺术 案例之局部图片文本更新
- Javascript DOM基础
- javascript DOM操作基础
- javascript DOM操作基础
- javascript DOM操作基础
- 欢迎使用CSDN-markdown编辑器
- 知乎爬虫项目记录
- LeetCode之Two Sum
- Arrays.asList使用注意
- K-Means聚类算法原理
- JavaScript基础之更新DOM
- 短文本关键词提取算法RAKE & TextRank及改进
- web网页中单击空白处隐藏登录弹框
- C语言链接mysql数据库,实现可以增删改查的角色权限登录系统
- Linux和Mysql创建用户及授权方法与C连接Mysql的方法
- 多线程并发执行任务,取结果归集。终极总结:Future、FutureTask、CompletionService、CompletableFuture
- STM32F429 使用 TCS34725 颜色传感器的驱动程序
- 基于CMake 在Android studio2.2+ 中开发JNI
- Configuring the Hive Metastore for CDH