JavaScript获取div内容详解：innerText与innerHTML的区别与兼容方法

本文档主要介绍了如何使用JavaScript在Web开发中获取`<div>`元素的内容。JavaScript提供了两种常用的方法：`innerText` 和 `innerHTML`，用于读取或设置HTML元素的内容。这些方法并非DOM（Document Object Model）标准的一部分，但在大部分现代浏览器中都能正常工作。 `innerText` 会返回元素内的文本，不包括元素内的HTML标签，只提取纯文本内容。例如，对于以下HTML： ```html <div id="stockcode" style="display:none"> test </div> ``` 在JavaScript中，你可以使用以下代码来获取`#stockcode`的文本内容： ```javascript var stock_code = document.getElementById("stockcode").innerText; ``` 然而，`innerText` 在Firefox中并不被推荐使用，因为它可能无法处理复杂的HTML结构，特别是存在嵌套元素的情况。在这种情况下，可以使用`textContent` 替代，它会返回元素及其所有子元素的纯文本内容： ```javascript var stock_code = document.getElementById("stockcode").textContent; ``` 在Internet Explorer中，`innerHTML` 可以用来获取包含HTML标签的内容： ```javascript var stock_code = document.getElementById("stockcode").innerHTML; ``` 尽管如此，`innerHTML` 有安全风险，因为它会执行插入的任何HTML代码，可能导致跨站脚本攻击（XSS）。因此，在处理用户输入或不确定来源的HTML时，应谨慎使用。 为了实现更广泛的浏览器兼容性，如Ajax in Action 的作者 Eric 提供了一种正则表达式实现的兼容方法，但这通常不是首选，因为现代浏览器已经提供了更安全且功能更丰富的API，如 `textContent` 和 `textContent` 的扩展。 此外，文中还提到了一个幽默的小故事，用来比喻在面对复杂问题时，可能需要找到简单有效的解决方案，就像秘书帮助老板解决打印问题一样，虽然看似复杂，但通过正确的工具和方法，问题就能迎刃而解。 本文的重点在于理解如何在JavaScript中使用`innerText` 和 `innerHTML` 获取`<div>`元素内容，并注意跨浏览器兼容性和安全性问题。开发者在实际项目中应根据需求选择最恰当的方法，并遵循最佳实践。