[JavaScript基础]学习③0--更新DOM

innerHTML

修改一个DOM节点的文本内容
通过HTML片段修改DOM节点内部的子树

// 获取
...
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // 
ABC
// 设置HTML:
p.innerHTML = 'ABC RED XYZ';
// 
...
的内部结构已修改

innerText/textContent

可以自动对字符串进行HTML编码，保证无法设置任何HTML标签

// 获取
...
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '';
// HTML被自动编码，无法设置一个

innerText不返回隐藏元素的文本，而textContent返回所有文本

// 获取
...
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

驼峰式命名法修改

// 获取
...
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

练习

  
javascript
  
Java

'use strict';
// 获取
javascript
节点:
var js = document.getElementById('test-js');

// 修改文本为JavaScript:
// 以下三种, 三选一
js.innerHTML = 'JavaScript';   // 1
js.innerText = 'JavaScript';   // 2
js.textContent = 'JavaScript'; // 3

// 修改CSS为: color: #ff0000, font-weight: bold
// TODO:
js.style.color = '#ff0000';
js.style.fontWeight = 'bold';