超清晰的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 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
什么是Python包的循环导入
2020/09/08 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
学前教育专业求职信
2014/09/02 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
学术会议领导致辞
2015/07/29 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
生日宴会祝酒词
2015/08/10 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python