JavaScript 输出方式与嵌入式编写指南

JavaScript 输出与 DOM 元素操作

JavaScript 本身并未提供专门的打印或输出函数。在 HTML 页面中，JavaScript 的主要用途之一是操作 HTML 元素。要访问特定的 HTML 元素，可以使用 document.getElementById(id) 方法。通过指定元素的 "id" 属性来定位目标，并利用 innerHTML 属性来获取或修改该元素的内容。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

上述 JavaScript 代码通常放置在 <script> 标签内，以便在 Web 浏览器中执行。

• 代码 document.getElementById("demo") 用于通过 id 属性查找对应的 HTML 元素。
• 代码 innerHTML = "Paragraph changed." 用于将指定元素的 HTML 内容修改为 "Paragraph changed."。

使用 document.write 写入文档

为了测试方便，可以直接在 HTML 文档中编写 JavaScript 代码。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

使用 document.write() 函数仅用于向 HTML 文档直接输出内容。需要注意的是，如果在文档加载完成后执行 document.write，将会导致整个 HTML 页面被新内容覆盖。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
document.write(Date());
}
</script>

</body>
</html>

通过 console.log 输出到控制台

若浏览器支持调试功能，可通过 console.log() 方法在控制台显示 JavaScript 的值。启用方式是在浏览器中按下 F12 键打开调试模式，并在弹出的调试窗口中选择 "Console"（控制台）选项卡。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>