超清晰的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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
jQuery实现验证码功能
Mar 17 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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错误、异常处理机制(补充)
2012/05/07 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
分分钟玩转Vue.js组件
2016/10/25 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
怎样声明接口
2014/09/19 面试题
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
拖鞋店创业计划书
2014/01/15 职场文书
安全标准化实施方案
2014/02/20 职场文书
三八妇女节活动总结
2014/05/04 职场文书
社区活动策划方案
2014/08/21 职场文书
挂靠协议书
2015/01/27 职场文书
面试通知邮件
2015/04/20 职场文书
大学生村官入党自传
2015/06/26 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python