html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)

拿到一个DOM节点后，我们可以对它进行更新。

可以直接修改节点的文本，方法有两种：

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

// 获取

...

var p = document.getElementById(‘p-id‘);

// 设置文本为abc:

p.innerHTML = ‘ABC‘; //

ABC

// 设置HTML:

p.innerHTML = ‘ABC RED XYZ‘;

...

的内部结构已修改

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取

...

var p = document.getElementById(‘p-id‘);

// 设置文本:

p.innerText = ‘alert("Hi")‘;

// HTML被自动编码，无法设置一个节点:

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

// 获取

...

var p = document.getElementById(‘p-id‘);

// 设置CSS:

p.style.color = ‘#ff0000‘;

p.style.fontSize = ‘20px‘;

p.style.paddingTop = ‘2em‘;

练习

有如下的HTML结构：

JavaScript

Java

javascript

Java

请尝试获取指定节点并修改：

// 获取

javascript

节点:

var js = document.getElementById(‘test-js‘);

// 修改文本为JavaScript:

// TODO:

js.innerHTML=‘JavaScript‘;

// 修改CSS为: color: #ff0000, font-weight: bold

// TODO:

js.style.color=‘#ff0000‘;

js.style.fontWeight=‘bold‘;

html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)相关推荐

iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
html制作收货地址页面,css 收货地址平行四边形的线条样式示例代码
代码如下所示: // 收货地址的平行四边形的线条样式 //样式 .top{ background-color: #fff; position: relative; } .top:before{ pos ...
廖雪峰js教程笔记10 浏览器对象
JavaScript可以获取浏览器提供的很多对象,并进行操作. window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属 ...
html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影男女第一句:act ...
廖雪峰js教程笔记 2
arguments JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数.arguments类似Array但它不是一个Arr ...
廖雪峰js教程笔记9 json
JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.X ...
commander.js教程笔记
并非严格的教程博文,属于是个人在学习过程中的笔记心得汇总. 内容相对官方文档更通俗一些,入门新人,如果看不懂官方文档,可以大致看一看这个.有错的话请指正,标准的还得看官方文档. 1.commander ...
+pink老师的JS教程笔记+
初识JS 目标能够说出JS是什么能够知道JS的发展历史能够说出浏览器执行JS的原理能够说出JS由哪三部分组成能够写出JS三个输入输出的语句运行在客户端的脚本语言(不需要编译,由js引擎逐行 ...
ext js ajax表单校验,Extjs之grid单元格编辑校验(示例代码)
效果如图所示: 1. 添加CSS样式 .x-grid-cell-invalid .x-grid-cell-inner:before{content: "";position: ab ...

html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)

html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)相关推荐

最新文章

热门文章