JS基础11-DOM操作表单元素

一、DOM访问表单控件的常用属性和方法如下：

 

action

返回该表单的提交地址

elements

返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。

length

返回表单内表单域的个数

method

返回表单内的method属性，主要有get和post两个值

target

确定提交表单时的结果窗口，主要有_self、_blank、_top等

reset()、submit()

重置表单和确定表单方法

二、在elments返回的数组中访问具体的表单控件语法如下：

 

.elements[index]

返回该表单中第index个表单控件

.elements[elementName]

返回表单内id或name为elementName的表单控件

.elementName

返回表单内id或name为elementName的表单控件

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作表单元素</title>

</head>

<body>
<form  id="myform" action="https://www.baidu.com/" method="get" target="_blank">
    <input type="text" value="张三"><br>
    <input type="text" value="123" id="t2"><br>
    <select name="" id="t3">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="淄博">淄博</option>
        <option value="昆明" selected>昆明</option>
    </select>
    <br>
    <input type="button" value="获取表单内第一个控件" onClick="show(c.elements[0])">
    <input type="button" value="获取表单内第二个控件" onClick="show(c.elements['t2'])">
    <input type="button" value="获取表单内第三个控件" onClick="show(c.t3)">
    <input type="button" value="操作表单" onClick="show(c.reset())">
</form>

<!--从上往下执行，计算机先读取到id="myform",之后才能给声明的变量c赋值-->
<script type="text/javascript">
     var c=document.getElementById('myform');
    function show(curr){
        alert(curr.value);
    }
    
</script>
</body>
</html>

 

 

 

 

posted @ 2018-03-26 22:59  LuckyGJX  阅读(198)  评论(0)    收藏  举报