1.获取表单方法
document.getElementById('myform')
document.getElementsByTagName('form')[0]
document.forms[0]
document.forms['yourform'] // 使用form的名称下标获取元素
document.yourForm // 使用name名称直接获取元素
PS: submit事件,用传统的方式: object.onsubmit = function(){}
问题: submit事件,为什么要用form对象来触发呢?为什么不能是input中的sub按钮来触发呢?
答: 把submit事件注册到input中的submit按钮,是无法出发到submit事件的,必须把submit事件绑定到form对象上,才可以触发submit事件,只不过是触发submit事件的流畅是点击input中的submit按钮而已
submit()方法可以让非submit按钮进行提交,但是对象一定是form
<form id="myForm" name="yourFrom">
<input type="text" name="user" value="123">
<input type="button" value="提交" id="btn">
</form>
<script type="text/javascript">
var btn = document.getElementById('btn');
var fm = document.getElementById('myForm');
btn.onclick = function(){
fm.submit();
}
</script>
2.表单控件获取
<form id="myForm" name="yourFrom">
<input type="text" name="user" value="123">
<input type="button" value="提交" id="btn" >
</form>
<script type="text/javascript">
var fm = document.getElementById('myForm');
console.log(fm[0]) // 向下兼容,不推荐
console.log(fm.length) // 向下兼容,不推荐
console.log(fm.elements) // 表单空间集合 HtmlCollection
console.log(fm.elements.length) // 推荐
console.log(fm.elements[0]) // HTMLInputElement
console.log(fm.elements['user'])
</script>
3.选择框脚本
添加选项
<form id="myForm" name="yourFrom">
<select name="city" multiple = 'multiple'>
<option value="上海">上海</option>
<option>无</option>
</select>
</form>
<script type="text/javascript">
var city = document.getElementsByName('city')[0];
// DOM添加
// var option = document.createElement('option');
// option.appendChild(document.createTextNode('北京 t'));
// option.setAttribute('value','北京 t');
// city.appendChild(option);
// 使用option构造函数添加
var option = new Option('北京t','北京v');
// city.appendChild(option); // IE不支持
city.add(option, undefined) // 最佳兼容方案,如果把undefined换成数字或者null都会产生浏览器不兼容
// city.remove(0) // 删除第0个元素
单选框和复选框:
判断checked = true 就行