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. JavaScript高级 引用类型（二）《JavaScript高级程序设计（第三版）》

    五.Function类型 是JS中最重要的一种引用类型 构造方式:(三种) 函数声明: 函数表达式定义: 函数构造器: 没有重载: 如果有两个相同函数名的函数,执行时,执行最近被定义的一次. 函数声明 ...

  2. [原]hdu2602 Bone Collector (01背包）

    本文出自:http://blog.csdn.net/svitter 题意:典型到不能再典型的01背包.给了我一遍AC的快感. //=================================== ...

  3. 安装JAVA JDK注意事项

    1 WIN8系统 安装JDK  我安装的是1.6版本,   64位的 : 2 安装好后  cmd  输入 java -version  正常 java  命令  正常 javac 命令不正常    提 ...

  4. maven私服搭建和启动遇到的问题

    1.私服下载地址:http://www.sonatype.org/nexus/ 2.在win10中安装nexus时提示:wrapper | OpenSCManager failed - 拒绝访问. ( ...

  5. C# 判断一字符串是否为合法数字（正则表达式）

    判断一个字符串是否为合法整数(不限制长度) public static bool IsInteger(string s) { string pattern = @"^\d*$"; ...

  6. Webservice SOAP传输序列化总结 以及webservice之序列化以及反序列化实例

    一.所有Webservice中传递的对象都必须能够序列化,这个是作为在网络之间传输的必要条件.XML WebService和SOAP标准支持的数据类型如下: 1.基本数据类型. 标准类型,如:int ...

  7. 记 移动端页面中莫名其妙的渲染BUG

    问题描述: 在一个很简单的测试页面中 简单的两块布局,上下两块均没有单独设置字体大小,都用body继承的大小,即40px.我们现在给第一个块.fl  加上浮动 float:left; 另外一个块处于正 ...

  8. kettle的job

    1.首先创建一个job 2.拖拽组件形成下面的图 这里需要注意,在作业中的连线分为三类: 黄色锁的线:这个步骤执行之后,无论失败与否都会执行下一个步骤 绿色对号线:步骤执行成功了,才会执行下一个步骤. ...

  9. Centos 7配置ntp时间同步

    1.NTP时钟同步方式说明     NTP在linux下有两种时钟同步方式,分别为直接同步和平滑同步: 1)直接同步      使用ntpdate命令进行同步,直接进行时间变更.如果服务器上存在一个1 ...

  10. 集合删数 （vijos 1545） 题解

    [问题描述] 一个集合有如下元素:1是集合元素:若P是集合的元素,则2 * P +1,4*P+5也是集合的元素,取出此集合中最小的K个元素,按从小到大的顺序组合成一个多位数,现要求从中删除M个数位上的 ...