超清晰的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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue中使用v-model完成组件间的通信
Aug 22 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 购物车实例(申精)
2009/05/11 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python绘制简单彩虹图
2018/11/19 Python
ipython和python区别详解
2019/06/26 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
骨干教师培训制度
2014/01/13 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
五五普法心得体会
2014/09/04 职场文书
暑期家教宣传单
2015/07/14 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
在Docker容器中部署SQL Server
2022/04/11 Servers