js_更新DOM

Posted 2020-08-31

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>的内部结构已修改

 

（如果，写入的字符串是通过网络拿到，要注意对字符编码来避免XSS攻击）

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

两者区别，innerText不返回隐藏元素的文本，而textContent返回所有文本。IE<9不支持textContent

// 获取<p id="p-id">...</p>
var p = document.getElementById(‘p-id‘);
// 设置文本:
p.innerText = ‘<script>alert("Hi")</script>‘;
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

 

修改css也可以通过DOM的style来完成。如font-size命名不符合js有效的属性名，所以需要在js中写驼峰式命名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结构 -->
<div id="test-div">
  <p id="test-js">javascript</p>
  <p>Java</p>
</div>

‘use strict‘
/ 获取<p>javascript</p>节点:
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‘;