JavaScript - 操作DOM

1. 查找节点

方法1. document.querySelector, document.querySelectorAll
方法2. document.getElementById, document.getElementsByClassName

2. 更新节点

前提是拿到要修改的DOM节点
方法1. 用innerHTML, 可以修改文本，甚至改变原本的标签结构，接受全文本。例如，p.innerHTML = 'ABC <span style="color:red">RED XYZ。 此处有问题，如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。
方法2. 用innerText或textContent可以自动对字符串编码，防止XSS。两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而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>

注意：2.的方法1的p.innerHTML = 'ABC <span style="color:red">RED，假如去掉转义符，在博客园上会执行。p.innerHTML = 'ABC RED