超清晰的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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
详解从vue-loader源码分析CSS Scoped的实现
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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
常见的PHP五种设计模式小结
2011/03/23 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP中比较时间大小实例
2014/08/21 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python实现图像拼接
2020/03/05 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
司考复习计划
2015/01/19 职场文书
会计工作岗位职责
2015/02/03 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python