JS——表单操作及select多级联动下拉列表

最新推荐文章于 2024-09-21 09:29:16 发布

偷只猫来养

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量3.1k

点赞数 7

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42602282/article/details/107087794

版权

本文详细介绍了如何使用JavaScript操作HTML表单，包括获取表单元素、表单及表单元素的属性、事件处理，特别是焦点放在了如何使用select创建多级联动下拉列表，讲解了select的各种属性和JS操作select的方法。

摘要由CSDN通过智能技术生成

JS——表单操作及select多级联动下拉列表

一、获取表单元素

1、获取页面所有表单元素：document.forms

使用document.forms返回的是一个HTMLCollection数组，数组的元素是form，有多少个form就有多少个元素，每个元素是一个类数组，其中包含了当前表单中的所有元素及其对应的属性。

            <form>
			
			<input type="text" />
			<input type="password" />
			<input type="button" />
			<input type="date" />
			
		</form>
		
		<script type="text/javascript">
			let formAll = document.forms;
			console.log(formAll);
		//HTMLCollection数组,数组中有一个form,form中包含了所有的写的标签及其属性
		</script>

2、通过获取节点方式获取表单元素：通过js获取节点的标准方法比如document.getElementById、document.getElementsByClassName等

        <form>
			
			<input type="text"  id="text"  />
			<input type="password" class="pwd" />
			<input type="button" />
			<input type="date" />
			
		</form>
		
		<script type="text/javascript">
			
			let text = document.getElementById('text');
			let pwd = document.getElementsByClassName('pwd')[0];
			let input = document.querySelectorAll('input');
       </script>

注意： 在使用document.querySelector方法获取表单元素时，如果不是通过id、class、元素关系等获取，而是直接通过元素的type属性来获取时，要指明type属性值：

        <input type="radio" />
		<input type="checkbox" />
		
		<script type="text/javascript">
			let radio = document.querySelector("input[type='radio']");
			let checkbox = document.querySelector("input[type='checkbox']");
		</script>

二、表单及表单元素的属性

1、表单的方法：

方法	说明
submit()	表单提交
reset()	表单重置

        <form >
			<input type="text" />
		</form>
		
		
		<script type="text/javascript">
			let form = document.querySelector('form');
			let input = document.querySelector('input');
			form.submit();//提交表单
			form.reset();//重置表单
			
		</script>

2、表单中元素属性操作：

属性	说明
type	可读可写，表示表单元素的类型，可以动态更改类型
form	只读属性，包含了该元素的form表单对象，不存在时返回null
name	可读可写，表示元素的名称