超清晰的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小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Angular2数据绑定详解
Apr 18 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
vue中的数据绑定原理的实现
Jul 02 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
bootstrap table表格插件使用详解
2017/05/08 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python开头的coding设置方法
2019/08/08 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python各层级目录下import方法代码实例
2020/01/20 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
医院护士的求职信范文
2013/12/26 职场文书
销售团队口号大全
2014/06/06 职场文书
员工年度工作总结2015
2015/05/18 职场文书
python pyhs2 的安装操作
2021/04/07 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
Linux中如何安装并部署Redis
2022/04/18 Servers
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers