JavaScript中document对象使用详解


Posted in Javascript onJanuary 06, 2015

对象属性

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

======================================================================
body-主体子对象

document.body                   //指定文档主体的开始和结束等价于<body></body>

document.body.bgColor           //设置或获取对象后面的背景颜色

document.body.link              //未点击过的链接颜色

document.body.alink             //激活链接(焦点在此链接上)的颜色

document.body.vlink             //已点击过的链接颜色

document.body.text              //文本颜色

document.body.innerText         //设置<body>...</body>之间的文本

document.body.innerHTML         //设置<body>...</body>之间的HTML代码

document.body.topMargin         //页面上边距

document.body.leftMargin        //页面左边距

document.body.rightMargin       //页面右边距

document.body.bottomMargin      //页面下边距

document.body.background        //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick="func()"              //鼠标指针单击对象是触发

document.body.onmouseover="func()"          //鼠标指针移到对象时触发

document.body.onmouseout="func()"           //鼠标指针移出对象时触发

======================================================================
location-位置子对象

document.location.hash          // #号后的部分

document.location.host          // 域名+端口号

document.location.hostname      // 域名

document.location.href          // 完整URL

document.location.pathname      // 目录部分

document.location.port          // 端口号

document.location.protocol      // 网络协议(http:)

document.location.search        // ?号后的部分

常用对象事件

documeny.location.reload()          //刷新网页

document.location.reload(URL)       //打开新的网页

document.location.assign(URL)       //打开新的网页

document.location.replace(URL)      //打开新的网页

======================================================================
images集合(页面中的图象)
a)通过集合引用

document.images                 //对应页面上的<img>标签

document.images.length          //对应页面上<img>标签的个数

document.images[0]              //第1个<img>标签

document.images              //第i-1个<img>标签

b)通过name属性直接引用

<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>

<html>

<script language="javascript">

       oImage=document.caeateElement("IMG")

       oImage.src="1.jpg"

       document.body.appendChild(oImage)

</script>

</html>

=====================================================================
forms集合(页面中的表单)
a)通过集合引用

document.forms                     //对应页面上的<form>标签

document.forms.length              //对应页面上<form>标签的个数

document.forms[0]                  //第1个<form>标签

document.forms                  //第i-1个<form>标签

document.forms.length           //第i-1个<form>中的控件数

document.forms.elements[j]      //第i-1个<form>中第j-1个控件

----------------------------
b)通过标签name属性直接引用

<form name="Myform"><input name="myctrl"></form>

document.Myform.myctrl             //document.表单名.控件名

----------------------------
c)访问表单的属性

document.forms.name             //对应<form name>属性

document.forms.action           //对应<form action>属性

document.forms.encoding         //对应<form enctype>属性

document.forms.target           //对应<form target>属性

document.forms.appendChild(oTag) //动态插入一个控件

----------------------------
示例代码(form):

<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>

----------------------------
示例代码(checkbox):

<html>

<!--checkbox,radio控件相关script-->

<form name="Myform">

<input type="checkbox" name="chk" value="1">1     

<input type="checkbox" name="chk" value="2">2     

</form>     

<script language="javascript">     

function fun(){     

      //遍历checkbox控件的值并判断是否选中     

      var length     

      length=document.forms[0].chk.length     

      for(i=0;i<length;i++){     

      v=document.forms[0].chk.value     

      b=document.forms[0].chk.checked     

      if(b)     

        alert(v=v+"被选中")     

      else     

        alert(v=v+"未选中")    

      }     

      }     

</script>      

<a href=# onclick="fun()">ddd</a>                      

</html>

----------------------------
示例代码(Select):

<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.value)

</script>

<script language="javascript">

       //遍历option项并且判断某个option是否被选中

       for(i=0;i<document.Myform.oSelect.length;i++){

       if(document.Myform.oSelect.selected!=true)

       document.write(document.Myform.oSelect.value)

       else

       document.write("<font color=red>"+document.Myform.oSelect.value+"</font>")   

       }

</script>

<script language="javascript">

       //根据SelectedIndex打印出选中的option

       //(0到document.Myform.oSelect.length-1)

       i=document.Myform.oSelect.selectedIndex

       document.write(document.Myform.oSelect.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集合(页面中的层)

<Div id="oDiv">Text</Div>

document.all.oDiv                                  //引用图层oDiv                

document.all.oDiv.style.display=""                 //图层设置为可视

document.all.oDiv.style.display="none"             //图层设置为隐藏

document.getElementId("oDiv")                      //通过getElementId引用对象

document.getElementId("oDiv").

document.getElementId("oDiv").display="none"

/*document.all表示document中所有对象的集合

只有ie支持此属性,因此也用来判断浏览器的种类*/

图层对象的4个属性

document.getElementById("ID").innerText      //动态输出文本

document.getElementById("ID").innerHTML      //动态输出HTML

document.getElementById("ID").outerText      //同innerText

document.getElementById("ID").outerHTML      //同innerHTML

----------------------------
示例代码:

<html>

<script language="javascript">

function change(){

document.all.oDiv.style.display="none"

}

</script>

<Div id="oDiv" onclick="change()">Text</Div>

</html>

<html>

<script language="javascript">

function changeText(){

document.getElementById("oDiv").innerText="NewText"

}

</script>

<Div id="oDiv" onmouseover="changeText()">Text</Div>

</html>
Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
豆瓣网的jquery代码实例
Jun 15 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
jQuery中Form相关知识汇总
Jan 06 #Javascript
使用VS开发 Node.js指南
Jan 06 #Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 #Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 #Javascript
jQuery中filter()方法用法实例
Jan 06 #Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 #Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 #Javascript
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
js实现登录与注册界面
2017/11/01 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Python字符串切片操作知识详解
2016/03/28 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
部门年终奖分配方案
2014/05/07 职场文书
消防安全标语
2014/06/07 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
内乡县衙导游词
2015/02/05 职场文书
从事会计工作年限证明
2015/06/23 职场文书
高老头读书笔记
2015/06/30 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
Ajax实现异步加载数据
2021/11/17 Javascript
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
深入理解pytorch库的dockerfile
2022/06/10 Python