超清晰的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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php实现简单加入购物车功能
2017/03/07 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
jquery对table做排序操作的实例演示
2017/08/10 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python比较两个列表大小的方法
2015/07/11 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
浅谈django 重载str 方法
2020/05/19 Python
python 读取.nii格式图像实例
2020/07/01 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
工程师自我评价怎么写
2013/09/19 职场文书
体育教师自荐信范文
2013/12/16 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
小学领导班子对照材料
2014/08/23 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers