JavaScript 通常用于操作 HTML 元素。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素:

例子

通过指定的 id 来访问 HTML 元素,并改变其内容:

<!DOCTYPE html>
<html>
<body> <h1>My First Web Page</h1> <p id="demo">My First Paragraph.</p> <script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script> </body>
</html>

效果:

My First Web Page

My First JavaScript

JavaScript 由 web 浏览器来执行。在这种情况下,浏览器将访问 id="demo" 的 HTML 元素,并把它的内容(innerHTML)替换为 "My First JavaScript"。

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中:

<!DOCTYPE html>
<html>
<body> <h1>My First Web Page</h1> <script>
document.write("<p>My First JavaScript</p>");
</script> </body>
</html>

效果:

My First Web Page

My First JavaScript

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

实例

<!DOCTYPE html>
<html>
<body> <h1>My First Web Page</h1> <p>My First Paragraph.</p> <button onclick="myFunction()">点击这里</button> <script>
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script> </body>
</html>

效果:

My First Web Page

My First Paragraph.

点击这里文档消失

Windows 8 中的 JavaScript

提示:微软支持通过 JavaScript 创建 Windows 8 app。

对于因特网和视窗操作系统,JavaScript 都意味着未来。

前端之JavaScript第一天学习(3)-JavaScript输出的更多相关文章

  1. 前端之JavaScript第一天学习(1)-JavaScript 简介

    javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...

  2. 前端之JavaScript第一天学习(2)-JavaScript 使用

    HTML 中的脚本必须位于 <script> 与 </script> 标签之间.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  3. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  4. Javascript 第一阶段 学习使用总结

    JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  5. 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

  6. 前端框架Vue------>第一天学习(3)

    文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...

  7. 前端框架Vue------>第一天学习(2) v-if

    API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...

  8. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  9. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

随机推荐

  1. BochsDebug

    Bochs User Manual   Chapter 8. Tips and Techniques   8.12. Using Bochs internal debugger Note, if yo ...

  2. 学习web前端开发感想

    1.学习一个技术,不是一看见源代码就是copy,而是仔细阅读后,找到自己想要的,并且自己写出来,自己理解了,下次遇到同样的问题,自己才能解决. 2.在电脑上学习的过程中,我总是先建立一个文本文档,这样 ...

  3. 官网下载Spring dist

    新版Spring官网下载Spring的dist可真是麻烦 跟着下面的贴图走吧,有些在网页的下面,需要打开相应页面后往下拉拉. 下载完后解压lib里面就是各种jar包了 真是麻烦啊,不好找,不过Spri ...

  4. firefox 中碰到的一个小坑

    情况描述: 在一个处于正常文档流的div中,里面有一部分文字,还有个有浮动的块, 上代码 HTML: <div class="container">   this is ...

  5. 基于zookeeper的远程方法调用(RMI)的实现

    采用zookeeper的命名服务,采用不同的目录结构存储不同模块不同服务的rmi的url,使用key来对应不同的服务.同时采用zookeeper解决了单点问题. 当有两个相同的服务注册时,因为采用的是 ...

  6. PHP preg_replace() 正则替换所有符合条件的字符串示例

    PHP preg_replace() 正则替换,与Javascript 正则替换不同,PHP preg_replace() 默认就是替换所有符号匹配条件的元素.  需要用程序处理的数据并不总是预先以数 ...

  7. 一个php函数,能够遍历一个文件夹下的所有文件和子文件夹

    <?phpfunction my_scandir($dir){    $files=array();    if(is_dir($dir))     {        if($handle=op ...

  8. 5)Java部分常用package功能介绍

    1> java.lang    (package)   这个是系统的基础类,比如String等都是这里面的,这个package是唯一一个可以不用import就可以使用的Package 包中关键类 ...

  9. JDBC基础一

    JDBC:java database connectivity SUN公司提供的一套操作数据库的标准规范. JDBC与数据库驱动的关系:接口与实现的关系. JDBC规范(掌握四个核心对象): Driv ...

  10. jquery.unobtrusive-ajax.js源码阅读

    /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. All right ...