JS中document对象详解3

最新推荐文章于 2024-09-17 21:49:02 发布

雨落

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量439

点赞数

分类专栏： web开发文章标签： javascript input function html 浏览器 div

web开发专栏收录该内容

29 篇文章 0 订阅

订阅专栏

转自：http://hi.baidu.com/%E5%EB%B3%DF%C8%CB%C9%FA/blog/item/c823464469a3c53587947333.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">

</form>
document.Myform.myctrl //document.表单名.控件名

-----------------------------------------------------------------------
<html>

<form name="Myform">

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

----------------------------
图层对象的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" οnclick="change()">Text</Div>
</html>

<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" οnmοuseοver="changeText()">Text</Div>
</html>