超清晰的document对象详解


Posted in Javascript onFebruary 27, 2007

document 文挡对象 - JavaScript脚本语言描述
---------------------------------------------------------------------
注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写
   否则会提示你一个错误信息 "引用的元素为空或者不是对象"
---------------------------------------------------------------------

对象属性
document.title             //设置文档标题等价于HTML的<title>标签
document.bgColor           //设置页面背景色
document.fgColor           //设置前景色(文本颜色)
document.linkColor         //未点击过的链接颜色
document.alinkColor        //激活链接(焦点在此链接上)的颜色
document.vlinkColor        //已点击过的链接颜色
document.URL               //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate   //文件建立日期,只读属性
document.fileModifiedDate  //文件修改日期,只读属性
document.fileSize          //文件大小,只读属性
document.cookie            //设置和读出cookie
document.charset           //设置字符集 简体中文:gb2312
---------------------------------------------------------------------
对象方法
document.write()                  //动态向页面写入内容
document.createElement(Tag)       //创建一个html标签对象
document.getElementById(ID)       //获得指定ID值的对象
document.getElementsByName(Name)  //获得指定Name值的对象
---------------------------------------------------------------------

images集合(页面中的图象)

a)通过集合引用
document.images             //对应页面上的<img>标签
document.images.length      //对应页面上<img>标签的个数
document.images[0]          //第1个<img>标签           
document.images[i]          //第i-1个<img>标签

b)通过nane属性直接引用
<img name="oImage">
document.images.oImage      //document.images.name属性

c)引用图片的src属性
document.images.oImage.src  //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="/1.jpg"
同时在页面上建立一个<img>标签与之对应就可以显示

<html>
<img name=oImage>
<script language="javascript">
   var oImage
   oImage = new Image()
   document.images.oImage.src="/1.jpg"
</script>
</html>

----------------------------------------------------------------------

forms集合(页面中的表单)

a)通过集合引用
document.forms                 //对应页面上的<form>标签
document.forms.length          //对应页面上<form>标签的个数
document.forms[0]              //第1个<form>标签
document.forms[i]              //第i-1个<form>标签
document.forms[i].length       //第i-1个<form>中的控件数
document.forms[i].elements[j]  //第i-1个<form>中第j-1个控件

b)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl         //document.表单名.控件名

-----------------------------------------------------------------------
<html>
<!--Text控件相关Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>
<!--Select控件相关Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

<script language="javascript">
   //遍历select控件的option项
   var length
   length=document.Myform.oSelect.length
   for(i=0;i<length;i++)
   document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
   //遍历option项并且判断某个option是否被选中
   for(i=0;i<document.Myform.oSelect.length;i++){
   if(document.Myform.oSelect[i].selected!=true)
   document.write(document.Myform.oSelect[i].value)
   else
   document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")   
   }
</script>

<script language="javascript">
   //根据SelectedIndex打印出选中的option
   //(0到document.Myform.oSelect.length-1)
   i=document.Myform.oSelect.selectedIndex
   document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
   //动态增加select控件的option项
   var oOption = document.createElement("OPTION");
   oOption.text="4";
   oOption.value="4";
   document.Myform.oSelect.add(oOption);
</script>
<html>
-----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv                       //引用图层oDiv
document.all.oDiv.style                 
document.all.oDiv.style.display=""      //图层设置为可视
document.all.oDiv.style.display="none"  //图层设置为隐藏
/*document.all表示document中所有对象的集合
只有ie支持此属性,因此也用来判断浏览器的种类*/

Javascript 相关文章推荐
限制只能输入数字的实现代码
May 16 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
对node.js中render和send的用法详解
May 14 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
JavaScript中void(0)的具体含义解释
Feb 27 #Javascript
[原创]保存的js无法执行的解决办法
Feb 25 #Javascript
轻轻松松学习JavaScript
Feb 25 #Javascript
用javascript编写的第一人称射击游戏
Feb 25 #Javascript
极酷的javascirpt,让你随意编辑任何网页
Feb 25 #Javascript
你真的了解JavaScript吗?
Feb 24 #Javascript
SUN的《AJAX与J2EE》全文译了
Feb 23 #Javascript
You might like
神族 Protoss 剧情介绍
2020/03/14 星际争霸
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python的keyword模块用法实例分析
2015/06/30 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
行政助理求职自荐信
2013/10/26 职场文书
客户接待方案
2014/02/26 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
理财计划书
2014/08/14 职场文书
工程部岗位职责
2015/02/10 职场文书
出国导师推荐信
2015/03/25 职场文书
2016入党心得体会范文
2016/01/06 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers