5.document对象:
Document对象是window对象的一个对象属性,代表浏览器窗口中装载的整个HTML文档。文档中的每个HTML元素对应着JavaScript对象。 因为document代表整个HTML文档,是其他HTML元素的根节点,其他节点可以通过document引用。 document的属性和方法一般用来设置文档的外观和内容。

1.documen对象s属性:
Document对象属性实现的功能用HTML中的标签也可以实现,从表面效果看来相似,但是与事件处理程序结合使用就体现出二者的不同。

2.document对象方法:
最常用的就是 writeln()方法,一些常用的document对象方法如表所示:
open()---打开一个流,跟window对象的open()方法类似。
close()---关闭open()方法打开的输出流
write()---向html文档中写入内容。
writeln()---与write()方法相比,每次写完内容后多一个换行符。
getElementById()---返回文档中任何元素(Id属性具有唯一性)的引用
getElementsByName()---返回指定name属性的对象引用数组。
getElementsByTagName()---返回指定标签名的对象引用数组
createElement()---产生一个代表某个HTML元素的对象,而后使用个父元素的方法来休干文档的内容(如appendChild()方法)

3.document对象事件:
document对象常用的事件处理程序就是window对象中介绍的通用事件,下面通过一个document对 象的实例来演示其属性和方法的使用。

<head>
<script language="JavaScript">
function setDocument() {
document.bgColor = "white";
document.fgColor = "black";
document.alinkColor = "red";
document.vlinkColor = "green";
document.linkColor = "yellow";
}
function create_Element() {
var area = document.getElementById("area"); //通过area读取得对象。
var element = document.createElement("input"); //动态创建一个对象
element.type="radio";
var obj = area.appendChild(element); //将对象插入到area中,返回值是添加的节点
obj.checked=true;
}
</script>
</head> <body onload=="setDocument()">
<h1>document对象的属性和方法</h1><br>
<font color=red onclick="javascript:create_Element()">
点一下这里
</font>
<br><br>
<a href="newWindow.html">进入新窗口</a><br>
<div id="area"></div>
</body> (newWindow.html)
<head>
<script language="JavaScript">
document.write("hello! 欢迎来到新窗口");
</script>
</head>
<body>
<h1>这是新窗口</h1>
</body>

第一个页面打开后的效果,什么标题,红色文本,连接都是通过document对象设置网页文档的背景颜色,文本颜色等等。

点一下红色文本就会出现一个已选定的单选按钮

新链接 的窗口

JavaScript中还有很多其他对象,事实上,HTML中每个元素基本都在JavaScript中有相应的对象。

JavaScript入门2的更多相关文章

  1. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  2. JavaScript入门

    本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...

  3. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  4. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  5. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  6. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  7. 开心菜鸟系列----函数作用域(javascript入门篇)

      1 <!DOCTYPE html>   2 <html>   3 <script src="./jquery-1.7.2.js"></ ...

  8. 开心菜鸟系列----变量的解读(javascript入门篇)

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  9. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

  10. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

随机推荐

  1. apache benchmark

    1 ab是什么 是一个web高并发测试工具,可以发送get.put.post请求. 2 ab -n和-c共存 -c是concurrency的缩写,即同一时间发送多个请求. -n是指本次总共发送多少个请 ...

  2. using the flume-ng-sql-source plugin to push data from Mysql DB to Spark

    org.apache.flume.EventDeliveryException while running flume and sending data to spark · Issue #21 · ...

  3. 推断php操作mysql(添删改查)是否成功

    近期在使用CI框架 , 可是里面的数据库操作没有ThinkPhp方便 , 不知道数据库操作的反馈信息 , 仅仅好借助原生方法来推断是否操作数据库成功 推断php操作mysql(添删改查)是否成功,主要 ...

  4. SVN回滚机制

    引子 工作中遇到一个新同事提交代码时不知怎么的出现了大面积的代码覆盖,由于对SVN也不是特别了解,就看着别人处理问题,自己也验证性的实践了一下,总结一下. 总结 svn每一次提交成功,都会有一个`编号 ...

  5. 微信小程序template使用

    当您的项目需要多次使用同一个布局和样式的时候,您就可以考虑使用template(模板)来减少冗余代码. 使用方式: 1.新建一个template文件夹来存放您的通用模板: 2.在文件夹里面新建一个wx ...

  6. iOS 声明属性关键字的总结

    atomic: 原子操作(原子性是指事务的一个完整操作,操作成功就提交,反之就回滚. 原子操作就是指具有原子性的操作)在objective-c 属性设置里面 默认的就是atomic ,意思就是 set ...

  7. 一个简单的servlet

    1.创建一个自己的servlet文件,继承HttpServlet MyServlet.java package com.jmu.ccjoin.controller; import java.io.IO ...

  8. codeforces B. Balls Game 解题报告

    题目链接:http://codeforces.com/problemset/problem/430/B 题目意思:给出用不多于k种颜色对n个球的染色情况,以及手中的唯一一个球的颜色.初始时,连续的相同 ...

  9. RandomUtils

    package com.cc.hkjc.util; import java.util.Random; public class RandomUtils {    /**     * 获取count个随 ...

  10. [ZJOI 2008] 骑士

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1040 [算法] 首先 , 题目中互相讨厌的关系构成了一棵基环森林 用拓扑排序找出环 ...