DOM
表单操纵
1.猎取表单
猎取表单元素
以Document对象中forms属性来猎取当前HTML页面一切表单鸠合
以Document对象中表单的name属性值来猎取表单元元素
<body>
<form action="#">
<input type="submit">
</form>
<form name="mylove" action="#">
<input type="submit">
</form>
<script>
console.log(document.forms);
// 猎取当前HTML页面一切表单元素
console.log(document.mylove);
// document表单称号-有些新浏览器是不支持
</script>
</body>猎取表单组件元素
以HTMLFormElement对象的elements属性来猎取表单组件的鸠合
<body>
<form action="#">
<input type="text" name="username">
<input type="submit">
</form>
<script>
var form = document.forms[0];
console.log(form.elements);
</script>
</body>2.表单操纵
文本内容的挑选
以HTMLElement对象和HTMLTextAreaElement对象中select()要领来猎取文本框一切文本框的内容
<body>
<form action="#">
<input type="text" id="username" value="请输入你用户名">
<!---->
<input type="submit">
<!--定义提交按钮-->
</form>
<script>
var username = document.getElementById(username);
// 猎取ID属性
username.addEventListener('focus',function(){
username.select();
})
username.addEventListener('select',function () {
console.log(username.selectionStart.username.selectionEnd);
var value = username.getAttribute('value');
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
})
</script>
</body>设置文本内容
在HTML5新增中setSelectionRange()要领，来猎取一个核心文本框的文本内容
body>
<form action="#">
<input type="text" id="username" value="请输入你用户名">
<!---->
<input type="submit">
<!--定义提交按钮-->
</form>
<script>
var username = document.getElementById(username);
// 猎取ID属性
username.addEventListener('focus',function(){
username.select();
})
username.addEventListener('select',function () {
console.log(username.selectionStart.username.selectionEnd);
var value = username.getAttribute('value');
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
})
</script>
</body>操纵剪切板
以copy；cut，paste 来设置 操纵剪切板的复制，剪切和粘贴
<body>
<form action="#">
<input type="text" id="username" value="请输入你用户名">
<input type="text" id="username1">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
username.addEventListener('copy',function (event) {
var data = event.clipboardData || window.clipboardData;
console.log(data);
console.log('这是复制操纵');
var value = username.value;
var result = value.substring(selectionStart,username.selectionEnd);
console.log(result);
data.setData('text',result);
});
username.addEventListener('cut',function () {
console.log('这是个剪切操纵');
});
var username1 = document.getElementById('username1');
username1.addEventListener('paste',function (event) {
event.preventDefault();
var data = event.clipboardData || window.clipboardData;
var result = data.getData('text');
/*获得DataTransfer对象
* geData()要领-猎取数据内容*/
if (result === '用户名') {
result ='***';
}
username1.value = result;
})
</script>
</body>下拉列表的操纵
是以select和option对象来建立病供应一些属性和要领
<form action="#">
<select id="yx">
<option id="dj" value="dj">单机</option>
<option value="wy">网页</option>
<option value="dy">端游</option>
</select>
<select id="cyx1" multiple size="5">
<option value="dj">单机</option>
<option value="wy">网页</option>
<option value="dy">端游</option>
</select>
</form>
<script>
var yx = document.getElementById('yx');
// HTMLSelectElement对象
console.log(yx.length);
console.log(yx.options);
console.log(yx.selectedIndex);// 被选中<option>的索引值
// 属性
var yx1 = document.getElementById('yx1');
// size属性默认值是 0
console.log(yx1.size);
console.log(yx1.item(1));
yx1.remove(2);
var dj = document.getElementById('dj');
console.log(dj.index);
console.log(dj.selected);
console.log(dj.text);
console.log(dj.value);
</script>3.表单考证
以checkValidity()如元素值不存在考证题目，会是true，如不是则返回false
以setCustomValidity（message）会为元素自定义个错误信息，假如设置了，该元素未无效，并显现
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
username.addEventListener('blur',function () {
var value = username.value;
if (value === '' || value === undefined || vaiue === null) {
console.log('请输入你用户名');
}
});
</script>
</body>4.表单提交
submit事宜
以submit示意提交表单
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var form = document.forms[0];
form.addEventListener('submit',function (event) {
console.log('该表单已被提交');
});
</script>
</body>submit(）要领
以submit示意提交表单，并用运用恣意一般按钮即可完成提交
<body>
<form action="#">
<input type="text" id="username">
<input id="qyc" type="button" value="提交">
</form>
<script>
var qyc = document.getElementById('qyc');
qyc.addEventListener('click',function () {
var form = document.forms[0];
form.submit();//提交表单
});
</script>
</body>