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. kbengine mmo源码(完整服务端源码+资源+完整客户端源码)

      本项目作为kbengine服务端引擎的客户端演示而写 更新kbengine插件库(https://github.com/kbengine/kbengine_unity3d_plugins):    ...

  2. Openvz特点和分析

    OpenVZ是开源软件,是基于Linux平台的操作系统级服务器虚拟化解决方案.OpenVZ采用SWsoft的Virutozzo虚拟化服务器软件产品的内核,Virutozzo是SWsoft公司提供的商业 ...

  3. js设计模式（11）---命令模式

    0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...

  4. Web服务器控件表

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAykAAAFRCAIAAAD/5nW4AAAgAElEQVR4nOydd3gVxfrHN6TXQ0KXEn

  5. CentOS用户权限管理--su与sudo

    Linux权限管理--su与sudo 1.su用来切换登录的用户,比如当前用户为chen,可以用su zhu,并输入用户zhu的登录密码,就可以切换到用户zhu.如果一个普通用户想切换到root用户, ...

  6. SequoiaDB（巨杉数据库）（社区版）安装配置使用图解

    SequoaiDB是一款新型企业级分布式非关系型数据库,提供了基于PC服务器的大规模集群数据平台.作为全球第一家企业级文档式 NoSQL分布式数据库,为用户提供了一个高扩展性.高可用性.高性能.易维护 ...

  7. wampserver php多版本5.2--5.6和apche2.2/2.4

    一.准备 wampserver2.5 php5各版本 php5.2到php5.6 apache2.2和apache2.4 二.安装 先成功安装wampserver2.5,如果安装不成功,多是vc11没 ...

  8. Material Design：CollapsingToolbarLayout

    activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...

  9. Android四大组件一----Activity

    最新面试需要复习一下Android基础. {所谓Activity} 通俗点:app上看到的窗口基本都是Activity Android 程序一般是由多个Activity组成,用户看到的能够交互的窗口通 ...

  10. 清空FORM表单的几种方式 Reset 重加载

    1. form中定义name <form name = "sbform" action="sb_add.php" method="post&qu ...