JavaScript基础知识----document对象

对象属性
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>

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

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

<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基础知识----document对象的更多相关文章

JavaScript基础知识（对象、函数与对象）
17.对象属性:描述对象的信息方法:描述对象的行为封装:只关心输入和输出(不管过程如何实现) ü 对象的分类: 内置对象(原生对象): 就是JavaScript语言预定义的对象(如Strin ...
学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效鼠标悬浮于“登录”按钮时，按钮高亮显示；
查看本章节查看作业目录需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效鼠标悬浮于"登录" ...
使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节查看作业目录需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色实现思路: 在页面的 <body&g ...
(转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
JavaScript基础知识整理
只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...

随机推荐

走进Groovy （一）
一直很喜欢脚本语言,但是一直在不大的公司工作,用得一直是“高大上”的JAVA语言,在真正的项目中,没什么机会用到脚本语言.这两年,又断断续续的用了2年的Ruby,再回头继续用JAVA,说实话,真感觉J ...
BZOJ 1196 [HNOI2006]公路修建问题（二分答案+并查集）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1196 [题目大意] 对于每条可能维修的公路可选择修一级公路或者二级公路,价值不同要求 ...
01-复杂度2. Maximum Subsequence Sum (25)
Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to be { Ni, ...
python中变量命名
一综述: 二全局变量(包含函数和类): (1)正常变量x: *通过module.x能够使用. *通过from module import *能够使用. (2)以"_"开头变量 ...
【Oracle】RAC添加新节点
RAC添加节点: 环境: OS:OEL5.6 RAC:10.2.0.1.0 原有rac1,rac2两个节点.如今要添加rac3节点: 操作过程: 改动三个节点上的/etc/hosts文件 192.16 ...
HDU2159：FATE(二维完全背包)
Problem Description 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完这最后一级.现 ...
关于css的默认宽度
<div class="boxa"> <div class="boxb">我是div</div> </div> ...
mysql 数据备份
一.备份数据库并下载到本地[db_backup.php] php代码: <?php // 数据库参数(此处测试,直接给定,项目中使用配置文件) $cfg_dbname = 'blog'; $cf ...
##DAY6 UIScrollView
##DAY6 UIScrollView #pragma mark ———————UIScrollView——————————— 属性: contentSize 内容滚动范围 contentOffset ...
Hibernate学习之hql查询语句
* 页面上数据的字段和数据库中字段差不多,这个时候,采用迫切连接结构比较好,如果页面上的字段很少,要按照需求加载数据,采用带构造函数的select查询实例讲解:转自:http://www.cn ...

JavaScript基础知识----document对象

JavaScript基础知识----document对象的更多相关文章

随机推荐

热门专题