超清晰的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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
webpack的pitching loader详解
Sep 23 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
js如何验证密码强度
2020/03/18 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python中用于计算对数的log()方法
2015/05/15 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
物业管理计划书
2014/01/10 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
校本教研工作方案
2014/01/14 职场文书
护士自我评价
2014/02/01 职场文书
金秋助学感谢信
2015/01/21 职场文书
争先创优个人总结
2015/03/04 职场文书
大国崛起观后感
2015/06/02 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
pandas进行数据输入和输出的方法详解
2022/03/23 Python