超清晰的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下onpropertychange事件的绑定方法
Aug 01 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
微信小程序 教程之引用
Oct 18 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
Node.js 中判断一个文件是否存在
Aug 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript整除实现代码
2010/11/23 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Angular实现响应式表单
2017/08/04 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python算术运算符实例详解
2017/05/31 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
承诺书格式
2014/06/03 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
《比的意义》教学反思
2016/02/18 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技