首页博客网络编程
本教程关于 JavaScript 控制台日志将教您输出数据的不同方法，例如 window.alert（）、document.write（）、innerHTML、console.log（） 等。尽管 JavaScript 的主要功能是修改浏览器的行为，但这些输出技术被广泛用于显示某些数据。
此外，您还将了解为什么在 JavaScript 中打印有不止一种方法，以及何时何时使用每种方法。当您在代码中遇到问题时，多个选项会很有帮助。了解这一点将帮助您更方便地调试或重写脚本。
内容
JavaScript 输出：主要提示
有几种方法可以制作 JavaScript 输出数据。它们要么修改或替换现有 HTML，要么帮助调试或检索 HTML 内容。
您可以使用 写入警报框。
window.alert()使用 写入 HTML 的输出。
document.write()您可以使用 JavaScript 控制台日志方法写入浏览器的 JavaScript 控制台。
输出数据
在 JavaScript 中输出数据的方法不止一种。现在，我们将回顾三种可用的方法，并查看每种方法的代码片段。
window.alert（）
这种用于在 JavaScript 中打印的方法在警报框中显示给定的数据。将出现一个带有关闭按钮的小弹出框，并在单击该按钮后消失。
例
window.alert(12 + 3);
文档.write（）
document.write()将内容写入 HTML 文档。
警告：您必须非常小心使用此 JavaScript 输出方法，因为它可能会覆盖 HTML 文档中的内容。
例
document.write(12 + 3);
在下面的示例中，当 HTML 文档完全加载时，将在单击按钮时删除所有现有 HTML：document.write()
例
<button type="button" onclick="document.write(12 + 3)">Press me to display an answer</button>
console.log（）
您应该使用该方法打印到控制台 JavaScript。JavaScript 控制台日志函数主要用于代码调试，因为它使 JavaScript 将输出打印到控制台。console.log()
若要打开浏览器控制台，请右键单击页面并选择“检查”，然后单击“控制台”。
例
console.log(12 + 3);
document.write 与 console.log
这些方法的目的和用例各不相同。然而，该方法与用于调试和日志记录的现代 Web 开发更相关。由于该方法可以覆盖 <header> 和 <body> 元素中的所有内容，因此不鼓励使用 。console.logdocument.write
修改 HTML 内容
有三个选项可用于更改指定 HTML 元素的内容： 、 或 。innerHTMLinnerTexttextContent
当用于输出目的时，它们的功能非常相似。但是，当应用它们来获取 HTML 内容时，存在差异。看看下面的示例及其解释：
例
<p id="example"> This paragraph element has excess spacing and has <span>a span element</span> inside.</p><button onclick="getInnerText()">Get innerText</button><button onclick="getInnerHTML()">Get innerHTML</button><button onclick="getTextContent()">Get textContent</button><script>
function getInnerText() {
alert(document.getElementById("example").innerText)
} function getInnerHTML() {
alert(document.getElementById("example").innerHTML)
} function getTextContent() {
alert(document.getElementById("example").textContent)
}</script>
让我们看一下在获取上述元素的内容时，这些属性中的每一个都会给出什么输出。<p>
innerText仅返回没有任何多余间距或标签的文本：<span>"This paragraph element has excess spacing and has a span element inside."
innerHTML返回带有所有多余间距和标签的文本：<span>" This paragraph element has excess spacing and has <span>a span element<span> inside."
textContent返回具有所有多余间距但不带标签的文本：<span>" This paragraph element has excess spacing and has a span element inside."
内部文本
下面的示例查找具有属性的 HTML 元素。 属性定义了 HTML 元素的内容，因此 HTML 中元素的内容将被 JavaScript 用新内容覆盖：id="learn"innerText
例
document.getElementByID("learn").innerText = (12 + 3);
内部HTML
以下示例搜索具有属性的 HTML 元素。属性定义 HTML 内容。因此，HTML 中元素的内容将被 JavaScript 用新内容覆盖：id="learn"innerHTML
例
document.getElementByID("learn").innerHTML = (12 + 3);
text内容
最后一个示例查找具有属性的 HTML 元素。在这种情况下，该属性定义特定节点的内容。因此，HTML 中元素的内容将被 JavaScript 替换为新内容。id="learn"textContent
例
document.getElementByID("learn").textContent = (12 + 3);
声明提示：若要转载请务必保留原文链接，申明来源，谢谢合作！
广告位
广告位