Dotcpp  >  编程教程  >  JavaScript入门  >  初步演示JS—HTML输出流

初步演示JS—HTML输出流

点击打开在线编译器,边学边练

接下来我们将具体学习,我们可以在本教程学到什么

JavaScript:直接写入 HTML 输出流

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

实例代码:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>C语言网(www.dotcpp.com)</title>
 </head>
 <body>
    
 <p>
 JavaScript 能够直接写入 HTML 输出流中:利用document.write实现
 </p>
 <script>
 document.write("<h1>这是一个h1标签标题</h1>");
 document.write("<p>这是一个p标签段落。</p>");
 </script>
 <p>
 您只能在 HTML 输出流中使用 <strong>document.write</strong>。
 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
 </p>
    
 </body>
 </html>

运行结果:

               

直接写入 HTML 输出流

                             


JavaScript:对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

实例代码:

<!DOCTYPE html>
 <html>
 <head> 
 <meta charset="utf-8"> 
 <title>C语言网(www.dotcpp.com)</title> 
 </head>
 <body>
    
 <h1>我的第一个 JavaScript</h1>
 <p
 JavaScript 能够对事件作出反应。比如对按钮的点击:onclick()事件
 </p>
 <button type="button" onclick="alert('欢迎!')">点我!</button>
    
 </body>
 </html>

运行结果:

点击前

点击后

JavaScript:改变 HTML 内容

JavaScript 来处理 HTML 内容是非常强大的功能。

x=document.getElementById("demo");  //查找元素
 x.innerHTML="Hello JavaScript";    //改变内容

您会经常看document.getElementById("***some id*")**。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

实例代码:

<!DOCTYPE html>
 <html>
 <head> 
 <meta charset="utf-8"> 
 <title>学习使我快乐</title> 
 </head>
 <body>
    
 <h1>我的第一段 JavaScript</h1>
 <p id="demo">
 JavaScript 能改变 HTML 元素的内容。
 </p>
 <script>
 function myFunction()
 {
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
 }
 </script>
 <button type="button" onclick="myFunction()">点击这里</button>
    
 </body>
 </html>

运行效果:

点击前点击后

这一节我们了解了一些有关Js的代码,同时对JS有了一定的了解,接下来让我们继续了解Js的有关代码。



本文固定URL:https://www.dotcpp.com/course/1238

上一课:

什么是JS

下一课:

初步演示JS—验证输入

JavaScript教程
第一章 JavaScript入门
第二章 JavaScript基础语法及数据类型
第三章 JavaScript函数
第四章 JavaScript类
第五章 JS高级教程
第六章 JS Window
第七章 JS库
Dotcpp在线编译      (登录可减少运行等待时间)