表单操作
获取表单元素
document对象提供了一系列的定位页面元素可以通 getElementById ,getElementByName,getElementByTagname,getElementByClassName等方法获取表单元素。同时document对象提供了form属性可以获取表单集合如下代码所示
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取表达元素</title></head>
<body>
<form action="#"><input type="submit"><!--//创建一个form表单-->
<!--创建一个输入按钮-->
</form>
<form name="myform" action="#"><!--//输入框name=myform-->
<input type="submit"><!---->创建一个输入按钮</form>
<script>
console.log(document.forms);/*打印表格通过form属性 一般使用这个方式*/
console.log(document.myform)/*通过name 名字直接打印 不常用*/</script>
</body>
</html>`
获取表单组件元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取表单组件元素</title>
</head>
<body>
<form action="#">
<input type="text" name="username"><!--创建一个输入框name=username-->
<input type="submit"> <!--创建一个按钮-->
</form>
<script>
var form =document.forms [0];
console.log(form.elements);
</script>
</body>
</html>获取文本组件元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本内容的选择</title>
</head>
<body>
<form action="#"
</form>
<script>
//HTMLinputElement对象
var username =document.getElementById('username');
//绑定获取焦点（focus）事件-失去焦点（blur）事件
username.addEventListener('focus',function () {
//select(方法)-选择当前输入框中的所有文本内容（全选）
//username.select();
})
/*
* selects事件
* 只要选择对应元素的文本内容时被触发
* select（）方法*/
username.addEventListener('select',function(){
/*
* HTMLinputElement对象
* selectioStart-表示用户选中文本内容的开始索引值
* selectionEnd- 表示用户选中文本内容的结束索引值的下一个值*/
console.log(username.selectionStart,username.selectionEnd);
var value =username.getAttribute('value');
var result =value.substring
(username.selectionStart,username.selectionEnd);
console.log(result);
})
</script>
</body>
</html>设置文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置文本内容</title>
</head>
<body>
<form action="#">
<input type="text"id="username" value="请输入你的用户名">
<input type="submit">
</form>
<script>
var form = document.forms[0];
var username =form.elements[0];
username.addEventListener('focus',function () {
username.setSelectionRange(0,5);
})
</script>
</body>
</html>下拉表操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表操作</title></head>
<body>
<form action="#">
<select id="city">
<option id="bj" value="bj">北京</option>
<option value="nj">南京</option>
<option value="tj">天津</option>
</select>
<select id="city2" multiple size="5">
<option value="bj">北京</option>
<option value="nj">南京</option>
<option value="tj">天津</option>
</select></form>
<script>
// HTMLSelectElement对象
var city = document.getElementById('city');
// 属性
console.log(city.length);
console.log(city.options);
console.log(city.selectedIndex);// 被选中<option>的索引值
var city2 = document.getElementById('city2');
// size属性默认值为 0
console.log(city2.size);
console.log(city2.item(1));
city2.remove(2);
var bj = document.getElementById('bj');
console.log(bj.index);
console.log(bj.selected);
console.log(bj.text);
console.log(bj.value);
</script>
</body>
</html>
