时间:2021-07-01 10:21:17 帮助过:4人阅读
text对象
Text 对象代表 HTML 表单中的文本输入域。在 HTML 表单中 input type=”text 每出现一次,Text 对象就会被创建。
disabled 设置或返回文本域是否应被禁用。(只有true和false两个值)
readOnly 设置或返回文本域是否应是只读(只能读取,不能被修改)的。(只有true和false两个值)
value 设置或返回文本域的 value 属性的值。
focus() 在文本域上设置焦点。
eg:
<form> <input name="wd" /> <input type="button" onclick="onesubmit()" value= "搜索" /> </form> <script> var form = document.getElementsByTagName("form")[0]; form.action = "https://www.baidu.com/s"; var text = document.getElementsByName("wd")[0]; function onesubmit(){ text.value = "中国";//设置或返回文本域的 value 属性的值 console.log(text.value); text.focus();//在文本域上设置默认焦点 text.readOnly = true;//设置或返回文本域是否应是只读的 即不能更改 text.disabled = true;//设置或返回文本域是否应被禁用,即不能使用 } </script>
Radio 对象代表 HTML 表单中的单选按钮。
checked 设置或返回单选按钮的状态。(true 和 false)
disabled 设置或返回是否禁用单选按钮。
value 设置或返回单选按钮的 value 属性的值。
Checkbox 对象代表一个 HTML 表单中的 一个选择框。
checked 设置或返回多选按钮的状态。
disabled 设置或返回某个按钮是否应被禁用。
value 设置或返回 checkbox 的 value 属性的值。
eg:
<body> <form onsubmit="return check()"> 用户名<input name="user_name" id="user_name" /><br /> 密码<input name="password" id="password" type="password" /><br /> 确认密码<input name="pw_check" id="pw_check" type="password" /><br /> <input type="reset" value="重置" /> <input type="submit" value="注册" /> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 <input type="checkbox" name="hobby" value="足球" />足球 <select name="choose" id="choose"> <option value="gaoyi">高一</option> <option value="gaoer">高二</option> <option value="gaosan">高三</option> </select> </form> <span id="msg" style="color: red;"></span> <script> function $(id){ return document.getElementById(id); } function check(){ var selects = document.getElementById("choose"); selects.disabled=true; console.log(selects.length); console.log(selects.selectedIndex); var options = selects.options; for(var i=0;i<options.length;i++){ console.log(options[i].value) } console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$"); var radios = document.getElementsByName("sex"); for(var i=0;i<radios.length;i++){ console.log(radios[i].checked+radios[i].value); } radios[0].cheked=true; radios[0].disabled=true; console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); var checkboxes = document.getElementsByName("hobby"); for(var i=0;i<checkboxes.length;i++){ console.log(checkboxes[i].checked+checkboxes[i].value) } checkboxes[2].checked=true; checkboxes[2].disabled=true; console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); var user_name = $("user_name").value; var password = $("password").value; var pw_check = $("pw_check").value; if(user_name.length==0){ $("msg").innerHTML = "用户名不能为空"; return false; } else if(user_name.length>12){ $("msg").innerHTML = "用户名不能超过12个字符"; return false; } if(password.length==0){ $("msg").innerHTML = "密码不能为空" return false; } else if(password.length>15){ $("msg").innerHTML = "密码不能超过12个字符"; return false; } if(password!=pw_check){ $("msg").innerHTML = "密码不一致"; return false; } console.log("注册成功") return false; } </script> </body>
Select 对象代表 HTML 表单中的一个下拉列表。
options[ ] 返回包含下拉列表中的所有选项的一个数组。
disabled 设置或返回是否应禁用下拉列表。
length 返回下拉列表中的选项数目。
selectedIndex 设置或返回下拉列表中被选项目的索引号。(从0开始)
add() 向下拉列表添加一个选项。
remove() 从下拉列表中删除一个选项。
Option(text,value) 通过text(即option标签之间的值)和value值创建Option对象
selected 设置或返回 selected 属性的值。(true或false,即是否选中)
text 设置或返回某个选项的纯文本值。
value 设置或返回被送往服务器的值。
eg:
<html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <select id="selected"> <option value="小学一年级">一年级</option> <option value="小学二年级">二年级</option> <option value="小学三年级">三年级</option> <option value="小学四年级">四年级</option> <option value="小学五年级">五年级</option> <option value="小学六年级">六年级</option> </select> <input type="button" onclick="test()" value="按钮" /> <script> function test(){ var selects = document.getElementById("selected"); console.log(selects.disabled); console.log(selects.selectedIndex); console.log(selects.length); console.log("@@@@@@@@@@@@@@@@@@@@@@@@"); var options = selects.options; console.log(options[selects.selectedIndex]); 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); } console.log("######################"); var option1 = new Option("初一","初中一年级"); var option2 = new Option("初二","初中二年级"); var option3 = new Option("初三","初中三年级"); selects.add(option2); selects.add(option1); selects.remove(6); selects.add(option2); selects.add(option3); selects.remove(0); selects.remove(0); selects.remove(0); selects.remove(0); selects.remove(0); selects.remove(0); } </script> </body></html>
在HTML DOM中,Element对象表示HTML元素,该对象可以拥有类型为元素节点、文本节点、注释节点的子节点。通过Document对象的getElementById()方法、getElementsByTagName()或getElementsByName()方法获取Element对象。
element.className 设置或返回元素的 class 属性。
element.innerHTML 设置或返回元素的内容。
element.style 设置或返回元素的 style 属性。
element.parentNode 以Node 对象方式返回元素的父节点。
eg:
<head> <meta charset="utf-8" /> <title></title> </head> <script> function news(){ var elements1 = document.getElementById("news"); elements1.className = "selected"; var elements2 = document.getElementById("see"); elements2.className = "fault"; var elements3 = document.getElementById("list1"); elements3.className = "visited"; var elements3 = document.getElementById("list2"); elements3.className = "unvisited"; } function see(){ var elements = document.getElementById("news"); elements.className = "fault"; var elements2 = document.getElementById("see"); elements2.className = "selected"; var elements3 = document.getElementById("list1"); elements3.className = "unvisited"; var elements3 = document.getElementById("list2"); elements3.className = "visited"; } </script> <style> body { color: #333; padding: 5px 0; font: 12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background: #fff; } a{ color: #666; text-decoration: none; } a:visited{ color:#666; } p{ display: block; } #main{ position: relative; display: block; height: 34px; width: 356px; border: 1px solid #dbdee1; line-height: 34px; background: url(img/bg1px.png) 0 -33px repeat-x; zoom: 1; /*缩放比例*/ } #main:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;/*隐藏h2标签*/ } #main #menu{ float: left; margin-left: -2px; } #main #menu span{ float: left; height: 35px; line-height: 35px; font-size: 16px; font-family: "Microsoft YaHei","微软雅黑","SimHei","黑体"; padding: 0 13px; margin-top: -1px; } #main #menu .selected{ height: 33px; line-height: 29px; border-top: 3px solid #ff8400; border-left: 1px solid #dbdee1; border-right: 1px solid #dbdee1; background-color: #fff; _position: relative; _margin-bottom: -1px; padding: 0 12px; border-left: 0; padding-left:13px ; } #main #date{ float: right; display: inline; margin-right: 10px; } #list1{ position: absolute; } #list2{ position: absolute; } #list1 a{ color: #122e67; text-decoration: none; } #list1 a:visited{ color: #52687e; text-decoration: none; } #list2 a{ color: #122e67; text-decoration: none; } #list2 a:visited{ color: #52687e; text-decoration: none; } .visited{ display: block; } .unvisited{ display: none; } ul{ height: auto; height: 208px; overflow: hidden; clear: both; list-style: none; display: block; } ul li{ padding-left: 10px; line-height: 26px; height: 26px; overflow: hidden; font-size: 14px; background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px; _zoom: 1; } </style> <body> <p id="main"> <p id="menu"> <span id="news" class="selected" onmouseover="news()"> <a href="http://news.sina.com.cn/" target="_blank">新闻</a> </span> <span id="see" class="fault" onmouseover="see()"> <a href="http://henan.sina.com.cn/" target="_blank">看河南</a> </span> </p> <span id="date">2018.8.6</span> </p> <!--main end--> <p id="list1" class="visited"> <ul> <li> <a target="_blank" href="http://news.sina.com.cn/c/xl/2018-08-06/doc-ihhhczfc3414364.shtml">习近平对王继才先进事迹作出重要指示</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/gov/xlxw/2018-08-06/doc-ihhhczfc3730191.shtml">习近平引领科技强军路</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc1300781.shtml">构建更加紧密的中非命运共同体</a> <a target="_blank" href="http://news.sina.com.cn/zt_d/djbl/">大江奔流</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1539880.shtml">人民日报评论员:积极进取 引领中国经济行稳致远</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-06/doc-ihhhczfc6968447.shtml">百白破你真的了解吗?</a> <a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc6967406.shtml">关于免疫和疫苗安全的问答</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-05/doc-ihhhczfc0144855.shtml">经济日报连发五文 解读当前经济形势</a> <a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1656430.shtml">三大关键词</a> </li> <li><a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1674641.shtml">用不靠谱的手段耍弄世界 注定不能让美国再次伟大</a> </li> <li><a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhkusks5999396.shtml">全国网络安全员法制与安全知识竞赛报名网站已开启</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc3323403.shtml">特朗普揶揄中国股市 但不小心暴露自己一个硬伤</a> </li> <li> <a target="_blank" href="http://news.sina.com.cn/zx/2018-08-06/doc-ihhhczfc6757917.shtml">上海机场(集团)有限公司董事长吴建融被查</a> </li> </ul> </p> <!--list1 end--> <p id="list2" class="unvisited"> <ul> <li> <a href="http://henan.sina.com.cn" target="_blank">177家违规网站被通报 河南全面清退县级以下政府网站</a> </li> <li> <a target="_blank" href="http://henan.sina.com.cn">河南四家长联名举报质疑考生答题卡掉包 官方回应</a> </li> <li> <a target="_blank" href="http://henan.sina.com.cn/news/z/2018-08-07/detail-ihhkusks7863084.shtml">央视新闻联播聚焦河南 34条洲际航线扩展开放触角</a> </li> <li> <a target="_blank" href="http://henan.sina.com.cn/news/m/2018-08-07/detail-ihhkusks7805180.shtml">河南开展幼儿园"小学化"治理:幼儿园严禁教小学课程</a> </li> <li> <a target="_blank" href="http://wx.sina.com.cn/news/2018-08-06/detail-ihhhczfc2526781.shtml">百城致敬40年:专注粮油研究半个世纪</a> </li> <li> <a target="_blank" href="http://henan.sina.com.cn/news/zhuazhan/2018-08-07/detail-ihhkusks7771435.shtml">周末夜查+夜间突击检查 河南"夜查"行动将持续至年底</a> </li> </ul> </p> <!--list2 end--> </body>
上例是模仿新浪页面鼠标移动切换标签和显示内容的效果。
事实上,常用的history,document等对象都属于window对象中,只是window对象是一个全局变量,在使用中“window.”一般被省略。
domain 返回当前文档的域名,例如:www.blue-bridge.com
URL 返回当前文档的 URL,例如:http://www.blue-bridge.com/venus/login.jsp
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
back() 加载 history 列表中的前一个 URL,同“后退”按钮。
forward() 加载 history 列表中的下一个 URL,同“前进”按钮。
go() 加载 history 列表中的某个具体页面,history.go(-1)//等同于back()。
相关推荐:
处理文本部分内容的TextRange对象应用实例
《JavaScript闯关记》之单体内置对象
以上就是javascript 内置对象(部分内容)的详细内容,更多请关注Gxl网其它相关文章!