这篇文章给大家分享的内容是关于适合初学者学习的一些常用html对象属性的应用方法介绍 本站收录这篇文章适合初学者学习的一些常用html对象属性的应用方法介绍，详细解说文章中相关初学者 对象 属性 应用方法 技术与知识，欢迎能给大家一些在这方面的支持和帮助！下面是详细内容：
这篇文章给大家分享的内容是关于适合初学者学习的一些常用html对象属性的应用方法介绍
Form 对象Form 对象方法
reset() ：把表单的所有输入元素重置为它们的默认值。
submit() ：提交表单。
Text 对象Text 对象属性
disabled ：设置或返回文本域是否应被禁用。
readOnly ：设置或返回文本域是否应是只读的。
value ：设置或返回文本域的 value 属性的值。
Text 对象方法
focus() :在文本域上设置焦点。
示例
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <form> <input name = wd /> <input type=submit value=百度一下 onclick=sub()> </form> <script> var form = document.getElementsByTagName(form)[0]; var text = document.getElementsByName(wd)[0]; text.focus(); function sub(){ var text = document.getElementsByName(wd)[0];// text.value = 魔道;// text.readOnly = true;// console.log(text.readOnly);// text.disabled = true; console.log(text.disabled); text.focus(); } //type为text、password、textarea的标签均有value、focus、disabled、readOnly </script> </body></html>Radio 对象Radio 对象属性
checked ：设置或返回单选按钮的状态。
disabled ：设置或返回是否禁用单选按钮。
value ：设置或返回单选按钮的 value 属性的值。
Checkbox 对象Checkbox 对象属性
checked ：设置或返回 checkbox 是否应被选中。
disabled ：设置或返回 checkbox 是否应被禁用。
value ：设置或返回 checkbox 的 value 属性的值
Select 对象Select 对象集合
options[] ：返回包含下拉列表中的所有选项的一个数组。
Select 对象属性
disabled ：设置或返回是否应禁用下拉列表。
length ：返回下拉列表中的选项数目。
selectedIndex ：设置或返回下拉列表中被选项目的索引号。
Select 对象方法
add() ：向下拉列表添加一个选项。
remove() ：从下拉列表中删除一个选项。
Option 对象Option 对象构造方法
Option(text,value) ：通过text和value值创建Option对象
Option 对象属性
selected ：设置或返回 selected 属性的值。
text ：设置或返回某个选项的纯文本值。
value ：设置或返回被送往服务器的值。
Select对象及Option对象示例<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <select id=grade> <option value=1>一年级</option> <option value=2>二年级</option> <option value=3>三年级</option> <option value=4>四年级</option> </select> <input type=button onclick=text() value=按钮 /> <script type=text/javascript> function text(){ var select = document.getElementById(grade); console.log(select.disabled); console.log(select.length); console.log(select.selectedIndex); console.log(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`) var options = select.options; console.log(options[select.selectedIndex].value); console.log(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@) for(var i=0;i<options.length;i++){ console.log(options[i].value); console.log(options[i].selected); console.log(options[i].text); } var option = new Option(五年级,5); select.add(option); select.remove(0); } </script> </body></html>注册表<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> </head> <body> <span style=color:red; id=wrong-massage></span><br /> <form onsubmit=return check()> <table> <tr> <td>用户名：</td> <td><input id=name placeholder=请输入用户名 onblur=check_name() ></td> </tr> <tr> <td>密码：</td> <td><input id=pw type=password placeholder=请输入密码 onblur=check_pw()></td> </tr> <tr> <td>确认密码：</td> <td><input id=pw-check type=password placeholder=请输入确认密码/></td> </tr> </table> <input type=radio name=sex value=0/>男 <input type=radio name=sex value=1/>女 <br /> <input type=checkbox name=hobby value=0/>羽毛球 <input type=checkbox name=hobby value=1/>篮球 <input type=checkbox name=hobby value=2/>乒乓球 <input type=checkbox name=hobby value=3/>足球 <br /> <select id=grade> <option value=1>大一</option> <option value=2>大二</option> <option value=3>大三</option> <option value=4>大四</option> </select> <br /> <td><input type=reset value=重置 /></td> <td><input type=submit value=注册/></td> </form> <script> //使用$()函数可节省代码量 function $(id){ return document.getElementById(id); } function check(){ var n = document.getElementById(name); var w = document.getElementById(pw); var msg = document.getElementById(wrong-massage); var c = document.getElementById(pw-check); if(n.value.length>12){ msg.innerHTML = 用户名不能超过15个字符，请重新输入！; n.focus(); return false; } if(n.value.length==0){ msg.innerHTML = 用户名不能为空，请重新输入！; n.focus(); return false; } if(w.value.length>12){ msg.innerHTML = 密码不能超过12个字符，请重新输入！; w.focus(); return false; } if(w.value.length==0){ msg.innerHTML = 密码不能为空，请重新输入！; w.focus(); return false; } if(w.value!=c.value){ msg.innerHTML = 密码错误，请重新输入！; c.focus(); return false; } var sex = document.getElementsByName(sex); var hobby = document.getElementsByName(hobby); for(var i=0;i<sex.length;i++){ sex[i].disabled=true; console.log(sex[i].checked+ +sex[i].value); } console.log(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~) for(var i=0;i<hobby.length;i++){ hobby[i].checked = true; console.log(hobby[i].checked+ +hobby[i].value); } console.log(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~) var select = document.getElementById(grade); var options = select.options; console.log(select.length); console.log(select.selectedIndex); console.log(options[select.selectedIndex].value); for(var i=0;i<options.length;i++){ var option = options[i]; console.log(option.value) select.disabled = true; } return false; } function check_name(){ var n = document.getElementById(name); var msg = document.getElementById(wrong-massage); if(n.value.length>12){ msg.innerHTML = 用户名不能超过15个字符，请重新输入！; n.value = ; n.focus(); } else if(n.value.length==0){ msg.innerHTML = 用户名不能为空，请重新输入！; n.focus(); } else{ msg.innerHTML = ; } } function check_pw(){ var w = document.getElementById(pw); var msg = document.getElementById(wrong-massage); if(w.value.length>12){ msg.innerHTML = 密码不能超过12个字符，请重新输入！; w.value = ; w.focus(); } else if(w.value.length==0){ msg.innerHTML = 密码不匹配，请重新输入！; w.focus(); } else { msg.innerHTML = ; } } </script> </body></html>Image 对象Image 对象属性
src：设置或返回图像的 URL。
关于适合初学者学习的一些常用html对象属性的应用方法介绍的内容写到这里就结束啦，您可以收藏本页网址http://www.VeVb.com/web/a/2018090496002.shtml方便下次再访问哦。