您现在的位置是:首页 > Javascript
当前栏目
更新DOM
2023-02-18 15:29:13 时间
拿到一个DOM节点后,我们可以对它进行更新。
可以直接修改节点的文本,方法有两种:
一种是修改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
返回所有文本。另外注意IE<9不支持textContent
。
修改CSS也是经常需要的操作。DOM节点的style
属性对应所有的CSS,可以直接获取或设置。因为CSS允许font-size
这样的名称,但它并非JavaScript有效的属性名,所以需要在JavaScript中改写为驼峰式命名fontSize
:
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
练习
有如下的HTML结构:
javascript
Java
<!-- HTML结构 -->
<div id="test-div">
<p id="test-js">javascript</p>
<p>Java</p>
</div>
请尝试获取指定节点并修改:
'use strict';
----
// 获取<p>javascript</p>节点:
var js = ???;
// 修改文本为JavaScript:
// TODO:
// 修改CSS为: color: #ff0000, font-weight: bold
// TODO:
----
// 测试:
if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') {
if (js.innerText === 'JavaScript') {
if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) {
console.log('测试通过!');
} else {
console.log('CSS样式测试失败!');
}
} else {
console.log('文本测试失败!');
}
} else {
console.log('节点测试失败!');
}
相关文章
- JSP 生命周期
- 详解JS中 call 方法的实现
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
- jsonp跨域+ashx(示例)
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
- 使用egg.js开发后端API接口系统
- JavaScript 里三个点 ...,可不是省略号啊···
- ASP.NET Core project.json imports 是什么意思?
- 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
- ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)
- tsconfig.json在配置文件中找不到任何输入,怎么办?
- C#开发微信门户及应用(40)--使用微信JSAPI实现微信支付功能
- C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- ASP.NET Core 返回 Json DateTime 格式
- jQuery.template.js 简单使用
- JavaScript 解决 onblur 与 onclick 冲突