document类的用法归总

document类的用法归总 ­ 
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 1/7
document类的用法归总
注：页面上元素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值的对象
document.body.appendChild(oTag)
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
body‐主体子对象
document.body 指定文档主体的开始和结束等价于bodybody
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 背景图片
2016/2/21 document类的用法归总 ­ keep on ­ JavaEye技术网站
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 2/7
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) 打开新的网页
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
selection‐选区子对象
document.selection
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
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属性
2016/2/21 document类的用法归总 ­ keep on ­ JavaEye技术网站
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 3/7
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] 第i‐1个form标签
document.forms[i].length 第i‐1个form中的控件数
document.forms[i].elements[j] 第i‐1个form中第j‐1个控件
b)通过标签name属性直接引用
form name=Myforminput name=myctrlform
2016/2/21 document类的用法归总 ­ keep on ­ JavaEye技术网站
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 4/7
document.Myform.myctrl document.表单名.控件名
c)访问表单的属性
document.forms[i].name 对应form name属性
document.forms[i].action 对应form action属性
document.forms[i].encoding 对应form enctype属性
document.forms[i].target 对应form target属性
document.forms[i].appendChild(oTag) 动态插入一个控件
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
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
!‐‐checkbox,radio控件相关script‐‐
form name=Myform
input type=checkbox name=chk value=11
input type=checkbox name=chk value=22
form
script language=javascript
function fun(){
遍历checkbox控件的值并判断是否选中
var length
length=document.forms[0].chk.length
for(i=0;ilength;i++){
v=document.forms[0].chk[i].value
b=document.forms[0].chk[i].checked
if(b)
alert(v=v+被选中)
else
2016/2/21 document类的用法归总 ­ keep on ­ JavaEye技术网站
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 5/7
alert(v=v+未选中)
}
}
script
a href=# onclick=fun()ddda
html
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
html
!‐‐Select控件相关Script‐‐
form name=Myform
select name=oSelect
option value=11option
option value=22option
option value=33option
select
form
script language=javascript
遍历select控件的option项
var length
length=document.Myform.oSelect.length
for(i=0;ilength;i++)
document.write(document.Myform.oSelect[i].value)
script
script language=javascript
遍历option项并且判断某个option是否被选中
for(i=0;idocument.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)
2016/2/21 document类的用法归总 ­ keep on ­ JavaEye技术网站
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 6/7
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=oDivTextDiv
document.all.oDiv 引用图层oDiv
document.all.oDiv.style.display= 图层设置为可视
document.all.oDiv.style.display=none 图层设置为隐藏
document.getElementId(oDiv) 通过getElementId引用对象
document.getElementId(oDiv).style=
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()TextDiv
html
html
script language=javascript
function changeText(){
document.getElementById(oDiv).innerText=NewText
2016/2/21 document类的用法归总 ­ keep on ­ JavaEye技术网站
http://www.360doc.com/content/11/0222/17/1554013_95156937.shtml 7/7
}
script
Div id=oDiv onmouseover=changeText()TextDiv
html