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. 图片轮播jQuery

          <script type="text/javascript">         //图片轮播         var bannerIndex = 0; ba ...

  2. 学习iOS的博客推荐

    1.取精华.去糟粕!适合iOS开发者的15大网站推荐 http://www.csdn.net/article/2015-03-04/2824108-ios-developers-sites

  3. Knockout.Js官网学习(数组observable)

    前言 如果你要探测和响应一个对象的变化,你应该用observables. 如果你需要探测和响应一个集合对象的变化,你应该用observableArray . 在很多场景下,它都非常有用,比如你要在UI ...

  4. 日期转换(用DateTime的ParseExact方法解析特殊的日期时间)

    今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [07-13 15:50:42] 主要问题是这个时间不是标准的时间,而是自定义的格式,即开头是月-日,然后是时间. 使用最 ...

  5. Spark自定义分区(Partitioner)

    我们都知道Spark内部提供了HashPartitioner和RangePartitioner两种分区策略,这两种分区策略在很多情况下都适合我们的场景.但是有些情况下,Spark内部不能符合咱们的需求 ...

  6. js 触发select onchange事件

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...

  7. Eclipse插件推荐:UCDetector: Unnecessary Code Detector

    正如其名,检查不必要的代码. 下载地址为:http://sourceforge.net/projects/ucdetector/files/latest/download?source=files 官 ...

  8. delphi TFileStream.create

    Value  Meaning  fmCreate Create a file with the given name. If a file with the given name exists, op ...

  9. desin pattern

    uml tool http://cruise.site.uottawa.ca/umple/ http://www.umldesigner.org/download/ http://www.eclips ...

  10. ubuntu 14.04 下安装jdk8及 smartgithg

    公司使用git作为源码管理,又需要在ubuntu下工作,然后,自己就找了找,目前ubuntu下的git gui客户端,感觉 smartgit算是其中比较好用的一个,下边是具体安装步骤 说明,smart ...