javascript对象

Posted 2020-08-16

1、什么是表单对象  

表单（<form>）是Web页面中的基本元素。表单对象最主要的功能就是能够直接访问页面中的表单。利用表单对象，可以实现与用户的交互；不需要服务器的介入，就可以实现动态改变Web页面的行为。对于Web页面表单，通常使用document对象的forms数组可以很方便地访问不同的表单。例如，某html文件片段如下：  

<form name="form1">  

<input type="text">  

<input type="text">  

<input type="text">  

</form>  

<form name="form2">  

<input type="text">  

<input type="text">  

</form>  

document对象的forms数组有两个元素：forms[0]可以访问第一个表单，其中共有三个基本元素：而forms[1]对应表单form2，其中只有两个元素。  

除了用forms数组方式访问表单对象外，也可以直接用表单的名字进行访问。例如，对于上例，也可以用document.form1和document.form2分别访问两个表单。  

2、表单对象的方法  

表单对象的submit（）方法用于实现表单信息的提交。例如，要提交页面中的一个名为form1的表单，可以使用下列语句：  

document.form1.submit();  

3、表单对象的属性  

属性描述  

Name 表单的名称  

action 提交表单后执行的程序  

target  

指定数据显示在哪个窗口(_blank,_parent,_self,_top) 或哪个框架(框架名称)中  

encoding 默认为text/html  

method “Get”或“Post”  

elements  

数组  

只读，表单中所有对象的索引,0,1,…  

由document.表单名.elements.length可知该表单共有多少个对象  

这里elements属性是一个数组，其中的元素对应于页面上表单内的各个控件。除了elements外，表单的其他几个属性均对应于HTML语法中<form>标记的属性。  

4、表单对象使用示例  

下面示例如果使用表单对象，效果及代码如下：  

<script type="text/javascript">  

function display(){  

var str;  

// 使用表单名称访问表单对象的属性  

str="name="+document.form1.name+"\r";  

str=str+"action="+document.form1.action+"\r";  

str=str+"method="+document.form1.method+"\r";  

//访问表单对象的elements数组  

str=str+"elements:"+"\r";  

for(var i=0;i<document.form1.elements.length;i++){  

str=str+ " "+document.form1.elements[i].type  

+"\t"+document.form1.elements[i].name  

+"\t"+document.form1.elements[i].value+"\r";  

}  

window.alert(str);  

return false;  

}  

function submitform(){  

//使用表单数组+下标访问表单对象  

document.forms[0].submit();  

}  

</script>  

<form name="form1" action="/web/user" method="post" onsubmit="return  

display()">  

<input type="text" name="text1" value="AAA"/>  

<input type="text" name="text2" value="BBB"/>  

<input type="checkbox" name="check1" value="aaa"/>  

<input type="submit" name="submit" value="提交"/>  

<input type="button" name="button" onclick="submitform();" value="js提交"/>  

</form>  

注意：单击“提交”按钮会触发表单的onsubmit事件。如果onsubmit的事件处理过程返回false，则不进行表单数据的提交。但如果直接使用表单对象的submit（）方法，则直接将数据提交出去。  

* 表单中的基本元素  

表单中的基本控件由按钮、单选按钮、复选按钮、提交按钮、重置按钮和文本框等组成。在JavaScript中要访问这些控件，可以使用以下两种方法实现：  

表单.元素名称 例如：document.form1.check  

表单.elements[下标] 例如：document.form1.elements[2]  

下面分别介绍表单中的各个基本控件。  

1、text对象  

text对象对应于页面中的text输入框控件。  

<input type="text" name="控件名称" value="默认文本" />  

属性accessKey 设置或返回访问文本域的快捷键。  

使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点  

alt 设置或返回当浏览器不支持文本域时供显示的替代文本。  

defaultValue 设置或返回文本域的默认值。  

disabled 设置或返回文本域是否应被禁用。  

id 设置或返回文本域的 id。  

maxLength 设置或返回文本域中的最大字符数。  

name 设置或返回文本域的名称。  

readOnly 设置或返回文本域是否应是只读的。  

size 设置或返回文本域的尺寸。  

tabIndex 设置或返回文本域的 tab 键控制次序。  

type 返回文本域的表单元素类型。  

value 设置或返回文本域的 value 属性的值。  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字，选取文本域中的内容。  

focus() 在文本域上设置焦点。  

主要事件onfocus，onblur，onselect，onchange  

text对象使用示例如下：  

<form name="form1">  

<input type="text" name="text1" value="Welcome"/>  

</form>  

<script type="text/javascript">  

document.form1.text1.value="this is a javascirpt";  

document.form1.text1.select();  

alert(document.form1.text1.value);  

document.text1.blur();  

</script>  

2、textarea对象  

textarea对象对应于页面中的textarea输入控件。  

<textarea name="控件名称">默认文本</textarea>  

属性name textarea输入框控件名称  

value textarea输入框控件中当前的文本  

defaultvalue textarea输入框控件的默认文本  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字  

主要事件onfocus，onblur，onselect，onchange  

3、select对象  

select对象对应于网页中的下拉列表框。  

<select name="下拉列表框的名称" size="下拉列表框显示的条数">  

<option value="选择值">选项描述</option>  

<option value="选择值" selected>选项描述</option>  

…………  

</select>  

属性disabled 设置或返回是否应禁用下拉列表  

id 设置或返回下拉列表的 id。  

length 返回下拉列表中的选项数目。  

multiple 设置或返回是否选择多个项目。  

name 设置或返回下拉列表的名称。  

options  

数组  

返回包含下拉列表中的所有选项(option对象)的一个数组。  

其中option对象包括如下属性：  

text 该选项显示的文字  

value 该选项的value值  

selected 指明该选项是否别选中  

selectedIndex 当前选中项的下标  

size 设置或返回下拉列表中的可见行数。  

方法options.add() 向下拉列表添加一个选项。  

blur() 从下拉列表移开焦点。  

focus() 在下拉列表上设置焦点。  

remove() 从下拉列表中删除一个选项。  

主要事件onfocus，onblur，onchange  

4、button对象  

button对象对应于网页中的按钮控件。  

<input type="button" value="按钮上显示的值" name="控件名称">  

属性accessKey 设置或返回访问按钮的快捷键。  

alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。  

disabled 设置或返回是否禁用按钮。  

id 设置或返回按钮的 id。  

name 设置或返回按钮的名称。  

tabIndex 设置或返回按钮的 tab 键控制次序。  

value 设置或返回在按钮上显示的文本。  

方法blur() 把焦点从元素上移开。  

click() 在该按钮上模拟一次鼠标单击。  

focus() 为该按钮赋予焦点。  

主要事件onclick  

5、checkbox对象  

checkbox对象对应于网页中的复选框。  

<input type="checkbox" value="值" name="控件名称" checked>选项说明  

属性accessKey 设置或返回访问 checkbox 的快捷键。  

alt 设置或返回不支持 checkbox 时显示的替代文本。  

checked 设置或返回 checkbox 是否应被选中。  

defaultChecked 返回 checked 属性的默认值。  

disabled 设置或返回 checkbox 是否应被禁用。  

id 设置或返回 checkbox 的 id。  

name 设置或返回 checkbox 的名称。  

tabIndex 设置或返回 checkbox 的 tab 键控制次序。  

value 设置或返回 checkbox 的 value 属性的值  

方法blur() 从 checkbox 上移开焦点  

click() 模拟在 checkbox 中的一次鼠标点击。  

focus() 为 checkbox 赋予焦点。  

主要事件onclick  

6、radio对象  

radio对象对应于网页中的单选控件。当网页中具有多个相同名称的单选控件后，就形成了一个  

radio对象数组，其中每个单选控件即为一个radio对象。  

<input type="radio" value="选项值" name="单选项名称" checked>选项说明  

<input type="radio" value="选项值" name="单选项名称" >选项说明  

…………  

属性accessKey 设置或返回访问单选按钮的快捷键。  

alt 设置或返回在不支持单选按钮时显示的替代文本。  

checked 设置或返回单选按钮的状态。  

defaultChecked 返回单选按钮的默认状态。  

disabled 设置或返回是否禁用单选按钮。  

id 设置或返回单选按钮的 id。  

name 设置或返回单选按钮的名称。  

tabIndex 设置或返回单选按钮的 tab 键控制次序。  

value 设置或返回单选按钮的 value 属性的值。  

方法blur() 从单选按钮移开焦点。  

click() 在单选按钮上模拟一次鼠标点击。  

focus() 为单选按钮赋予焦点。  

主要事件onclick  

7、hidden对象  

hidden对象对应于网页中的隐藏域。  

<input type="hidden" value="值" name="名称" >  

属性alt 设置或返回当不支持隐藏输入域时显示的替代文本。  

id 设置或返回隐藏域的 id。  

name 设置或返回隐藏域的名称。  

value 设置或返回隐藏域的 value 属性的值。  

8、submit对象  

submit对象对应于网页中的submit按钮。  

<input type="submit" value="显示文本" name="名称" >  

属性accessKey 设置或返回访问提交按钮的快捷键。  

alt 设置或返回当浏览器不支持提交按钮时供显示的替代文本。  

disabled 设置或返回提交按钮是否应被禁用。  

id 设置或返回提交按钮的 id。  

name 设置或返回提交按钮的名称。  

tabIndex 设置或返回提交按钮的 tab 键控制次序。  

value 设置或返回在提交按钮上显示的文本。  

方法blur() 从提交按钮上移开焦点。  

click() 在提交按钮上模拟一次鼠标点击。  

focus() 为提交按钮赋予焦点。  

主要事件onclick  

9、password对象  

password对象对应于网页中的密码输入框。  

<input type="password" value="值" name="名称" >  

属性accessKey 设置或返回访问密码字段的快捷键。  

alt 设置或返回当不支持密码字段时显示的替代文字。  

defaultValue 设置或返回密码字段的默认值。  

disabled 设置或返回是否应被禁用密码字段。  

id 设置或返回密码字段的 id。  

maxLength 设置或返回密码字段中字符的最大数目。  

name 设置或返回密码字段的名称。  

readOnly 设置或返回密码字段是否应当是只读的。  

size 设置或返回密码字段的长度。  

tabIndex 设置或返回密码字段的 tab 键控制次序。  

value 设置或返回密码字段的 value 属性的值。  

方法blur() 从密码字段移开焦点。  

click() 为密码字段赋予焦点。  

focus() 选取密码字段中的文本。  

主要事件onfocus，onblur，onselect，onchange  

 

*History对象  

History 对象包含用户（在浏览器窗口中）访问过的 URL。  

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。  

History 对象属性  

属性描述  

length 返回浏览器历史列表中的 URL 数量。  

History 对象方法  

方法描述  

back() 加载 history 列表中的前一个 URL。  

forward() 加载 history 列表中的下一个 URL。  

go(number|URL) 加载 history 列表中的某个具体页面。  

-1表示前一个页面