JavaScript DOM 操作：解释一下 `innerHTML` 和 `textContent` 的区别。

innerHTML 和 textContent 都是 JavaScript 中用于操作 DOM 元素内容的属性，但它们有一些重要的区别。

innerHTML：

1. 作用： innerHTML 是用于获取或设置元素的 HTML 内容的属性。它返回一个包含元素所有子节点（包括标签、文本节点、属性等）的字符串。

2. HTML解析： 当设置 innerHTML 时，浏览器会解析字符串，并根据其中的 HTML 创建新的 DOM 结构。这意味着可以用 innerHTML 来动态创建、修改元素的内容，包括元素本身以及其子节点。

3. 潜在风险： 因为 innerHTML 解析 HTML 字符串，所以如果字符串中包含恶意代码，可能会导致跨站脚本攻击（XSS）的安全问题。因此，当使用动态数据时，应谨慎使用 innerHTML。

// 通过innerHTML设置元素内容
document.getElementById('myElement').innerHTML = '<strong>Hello</strong>';

textContent：

1. 作用： textContent 用于获取或设置元素的纯文本内容，即元素的文本节点，不包括 HTML 标签。

2. 文本内容处理： 当设置 textContent 时，不会进行 HTML 解析，而是直接将字符串作为纯文本赋值给元素，保留其中的空格、换行等格式。

3. 安全性： 由于不解析 HTML，使用 textContent 不会导致 XSS 安全问题，因此在处理用户输入或动态数据时更安全。

// 通过textContent设置元素内容
document.getElementById('myElement').textContent = 'Hello';

选择使用：

• 如果要操作元素的 HTML 内容，包括标签、属性等，可以使用 innerHTML。
• 如果要操作元素的纯文本内容，而不希望进行 HTML 解析，可以使用 textContent。
• 要注意避免使用不信任的数据更新 innerHTML，以防止安全风险。

总的来说，innerHTML 和 textContent 分别用于不同的场景，根据具体需求选择合适的属性进行操作。