在前端开发中，我们经常需要获取页面元素的内容。其中，获取 DIV 元素的内容是一项常见的任务。本文将介绍如何使用 JavaScript 获取 DIV 元素的内容，并提供示例代码和注意事项。
获取 DIV 元素的内容
要获取 DIV 元素的内容，可以使用两种方法：innerHTML 和 textContent。
innerHTML 方法
innerHTML 方法返回包含指定元素内容的 HTML。例如，以下代码段演示了如何获取 id 为 myDiv 的 DIV 元素的内容：
const divContent = document.getElementById('myDiv').innerHTML;
console.log(divContent);上面的代码会输出 myDiv 元素的 HTML 内容。
textContent 方法
textContent 方法返回指定元素及其所有后代节点中的文本内容。例如，以下代码段演示了如何获取 id 为 myDiv 的 DIV 元素的纯文本内容：
const divContent = document.getElementById('myDiv').textContent;
console.log(divContent);上面的代码会输出 myDiv 元素的纯文本内容。
示例代码
以下是一个完整的示例代码，演示如何获取DIV元素的内容：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------------- ------- ------ ----- --------------------------- -------- ---------------------------------------- --- ----------------- --------- ---------- ---------------- - ----- ---------- -------- ---------- - ------------------------------------------- ----- --------- ----------------------------------------------- - ----------- --- ---------- ------- -------
在上面的示例中，我们创建了一个包含 DIV 元素、按钮和段落元素的 HTML 页面。点击按钮后，JavaScript 函数 displayContent() 获取 DIV 元素的内容，并将其添加到段落元素中。
注意事项
在使用 innerHTML 或 textContent 方法时，请注意以下事项：
- 如果您想要获取的是纯文本内容，请使用 textContent 方法。
- 如果您想要获取的是包含 HTML 标记的内容，请使用 innerHTML 方法。
- 请注意防止 XSS 攻击。由于 innerHTML 方法会执行任意 JavaScript 代码，因此请不要将未经检查的数据直接传递给它。
- 在处理用户输入或从服务器接收的内容时，请始终过滤并验证输入，以确保安全性。
结论
通过本文，您学习了如何使用 JavaScript 获取 DIV 元素的内容。我们还提供了示例代码和注意事项，帮助您深入了解这个常见的任务。请务必在使用 innerHTML 或 textContent 方法时注意安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31597
