超清晰的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 相关文章推荐
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
详解vue中组件参数
Jul 09 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python算法之图的遍历
2017/11/16 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
使用python制作一个解压缩软件
2019/11/13 Python
python创建子类的方法分析
2019/11/28 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
生育关怀行动实施方案
2014/03/26 职场文书
房屋维修协议书范本
2014/09/25 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
环境卫生整治简报
2015/07/20 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
win10下go mod配置方式
2021/04/25 Golang
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis