document对象详解

最新推荐文章于 2022-08-23 18:31:23 发布

ceshi123123

最新推荐文章于 2022-08-23 18:31:23 发布

阅读量292

点赞数

分类专栏： javascript 文章标签： JavaScript HTML 浏览器脚本 IE ViewUI

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

document对象详解

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<o:p></o:p>

document.location        // 重新定位网页
---------------------------------------------------------------------
对象方法
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>

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

<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支持此属性，因此也用来判断浏览器的种类*/<o:p></o:p>

html 中的 class属性获取样式中的定义<o:p></o:p>

<o:p> </o:p>

弹出窗口：<o:p></o:p>

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')<o:p></o:p>

</SCRIPT><o:p></o:p>

参数解释：<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束<o:p></o:p>

<o:p> </o:p>

弹出对话框：<o:p></o:p>

window.showModalDialog<o:p></o:p>

<o:p> </o:p>

获取页面的回车操作<o:p></o:p>

if(event.keyCode==13 ){<o:p></o:p>

AddApp();<o:p></o:p>

}<o:p></o:p>

</script><o:p></o:p>

<o:p> </o:p>

定时操作：<o:p></o:p>

function timer() {
setTimeout("alert('Time is up!')", 3000);
}<o:p></o:p>

时间函数：<o:p></o:p>

<script language="JavaScript"><o:p></o:p>

now= new Date();<o:p></o:p>

document.write("Time: " + now.getHours() + ":" + now.getMinutes() + "<br>");<o:p></o:p>

document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" + <o:p></o:p>

                (1900 + now.getYear()));<o:p></o:p>

</script><o:p></o:p>

< SCRIPT LANGUAGE="JAVASCRIPT"> 

　　var today=new Date; 

　　var week=new Array(7);

　　week[0]="天"; 

　　week[1]="一"; 

　　week[2]="二"; 　　　

　　week[3]="三"; 

　　week[4]="四"; 

　　week[5]="五"; 

　　week[6]="六"; <o:p></o:p>

　document.write("今天"＋today.getYear()＋"年"＋(today.getMonth()＋1)＋"月"＋today.getDate()＋"日;星期"＋week[today.getDay()]);<o:p></o:p>

<o:p> </o:p>

浏览器的版本：<o:p></o:p>

< SCRIPT language="JavaScript"><o:p></o:p>

document.write("阁下使用的浏览器是"＋navigator.appName＋navigator.appVersion);
　< /SCRIPT><o:p></o:p>

<o:p> </o:p>

禁止看代码：<o:p></o:p>

可能你看到某些好的网页效果。却发现不允许你查看原代码，是如何实现的呢？
只要在<head>和</head>之间加入下面这段代码就可以了：（可以用鼠标右键试试）
<SCRIPT language=javascript>
function click() {
if (event.button==2) {
alert('对不起,禁止使用此功能.')
}
}
document.οnmοusedοwn=click
</SCRIPT><o:p></o:p>

<o:p> </o:p>

网页的状态栏：window.status 来设置<o:p></o:p>

Eg ：<o:p></o:p>

<o:p> </o:p>

状态栏的滚动 demo：（descrption：scroll() 函数的主要部分是用来计算文本的哪一部分将要显示出来。我并没有详细的解释这段代码，你只需了解滚动是怎么工作的就可以了。
为了启动滚动我们在 <body> 标记符中使用了 onLoad 事件处理器。这意味着 scroll() 函数在 HTML 页一被载入就运行了。
我们通过 onLoad 调用 scroll() 函数。第一步是计算以及显示滚动的文字。在函数的最后作了一个定时设置。这会使 scroll() 函数在 100 毫秒后再次被执行，文字向左移动了一点同时另一个定时设置启动了。这些步骤不停的被执行。
（这样的滚动在 Netscape Navigator 2.x 的版本上会引起一些问题。它会引起一个“Out of memort" 错误。人们一般认为这是因为函数 scroll() 作了递归调用引起的，最后引起内存溢出。但这是不正确的这并不是一个递归调用！只有当我们在 scroll() 函数中调用 scroll() 函数时才是递归调用。我

ceshi123123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document对象详解

document对象详解document 文挡对象 - JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息 "引用的元素为空或者不是对象"------------...
复制链接

扫一扫

专栏目录