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对象
Radio 对象代表 HTML 表单中的单选按钮。
checked 设置或返回单选按钮的状态。(true 和 false)
disabled 设置或返回是否禁用单选按钮。
value 设置或返回单选按钮的 value 属性的值。
checkbox对象
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对象
Select 对象代表 HTML 表单中的一个下拉列表。
options[ ] 返回包含下拉列表中的所有选项的一个数组。
disabled 设置或返回是否应禁用下拉列表。
length 返回下拉列表中的选项数目。
selectedIndex 设置或返回下拉列表中被选项目的索引号。(从0开始)
add() 向下拉列表添加一个选项。
remove() 从下拉列表中删除一个选项。
option对象
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>
element对象
在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;
}
div{
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>
<div id="main">
<div 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>
</div>
<span id="date">2018.8.6</span>
</div>
<!--main end-->
<div 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>
</div>
<!--list1 end-->
<div 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>
</div>
<!--list2 end-->
</body>
上例是模仿新浪页面鼠标移动切换标签和显示内容的效果。
window对象
事实上,常用的history,document等对象都属于window对象中,只是window对象是一个全局变量,在使用中“window.”一般被省略。
document对象
domain 返回当前文档的域名,例如:www.blue-bridge.com
URL 返回当前文档的 URL,例如:http://www.blue-bridge.com/venus/login.jsp
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
history对象
back() 加载 history 列表中的前一个 URL,同“后退”按钮。
forward() 加载 history 列表中的下一个 URL,同“前进”按钮。
go() 加载 history 列表中的某个具体页面,history.go(-1)//等同于back()。