一、找到元素。
var d = document.getElementById("")
var d = document.getElementsByName("")
var d = document.getElementsByTagName("")
var d = document.getElementsByClassName("")
二、操作元素。
（一）操作内容
1.表单
value
赋值，取值
2.非表单
赋值，取值
innerHTML
innerText
（二）操作属性
1.获得属性值
getAttribute("属性名")，返回的是属性值。
2.给属性赋值（添加属性，修改属性）
setAttribute("属性名","属性值")
3.删除属性
removeAttribute("属性名")
（三）操作样式
1.操作内联样式
使用元素的style属性。
2.操作class
使用元素的className属性。
三、操作相关元素。
注册表单
Html代码
<title>无标题文档</title>
<style type="text/css">
.eee
{
color:red;
}
</style>
<script language="javascript">
function docheck()
{
var s = "";
var uid = document.getElementById("txtUID").value;
var p1 = document.getElementById("txtPWD1").value;
var p2 = document.getElementById("txtPWD2").value;
var email = document.getElementById("txtEmail").value;
if(uid.length==0)
{
s += "用户名不能为空\n";
}
if(p1.length==0)
{
s+="密码不能为空\n";
}
if(p2.length==0)
{
s+="确认密码不能为空\n";
}
if(email.length==0)
{
s+="邮箱不能为空\n";
}
if(p1 != p2)
{
s+= "两次输入的密码不一样！";
}
alert(s);
}
function docheck1()
{
var uid = document.getElementById("txtUID").value;
var p1 = document.getElementById("txtPWD1").value;
var p2 = document.getElementById("txtPWD2").value;
var email = document.getElementById("txtEmail").value;
if(uid.length == 0)
{
document.getElementById("spUID").innerHTML = "<h1>用户名不能为空</h1>";
}
else
{
document.getElementById("spUID").innerHTML = "";
}
if(p1 != p2)
{
document.getElementById("spPWD2").innerHTML = "两次输入的密码不一样";
}
else
{
document.getElementById("");
}
}
</script>
</head>
<body>
<form >
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width=100 align="right">用户名：</td>
<td width=200>
<input type="text" name="txtUID" id="txtUID" />
</td>
<td width="200"><span id="spUID" class="eee"></span></td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="text" name="txtPWD1" id="txtPWD1" />
</td>
<td><span id="spPWD1" class="eee"></span></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td>
<input type="text" name="txtPWD2" id="txtPWD2" />
</td>
<td><span id="spPWD2" class="eee"></span></td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td>
<input type="text" name="txtEmail" id="txtEmail" />
</td>
<td><span id="spEmail" class="eee"></span></td>
</tr>
<tr>
<td colspan="3" align="center">
<input id="btn" type="button" value="注册(10)" disabled="disabled" onclick="docheck1()" /><br/>
<a id="a1" href="Untitled-1.html">查看用户协议</a>
</td>
</tr>
</table>
</form>
</body>
</html>
<script language="javascript">
var n=10;
function bianHua()
{
n--;
if(n==0)
{
var b = document.getElementById("btn");
b.value="注册";
b.removeAttribute("disabled");
}
else
{
var b = document.getElementById("btn");
b.value="注册("+n+")";
window.setTimeout("bianHua()",1000);
}
}
bianHua()
/*
var a = document.getElementById("a1");
var s = a.getAttribute("href");
alert(s);
*/
//var b = document.getElementById("btn");
//b.setAttribute("disabled","disabled");
//b.removeAttribute("disabled");
</script>
QQ面板
<title>无标题文档</title>
<style type="text/css">
.main{width:200px;}
.title
{
background-color:navy;
color:white;
font-weight:bold;
padding:5px;
text-align:center;
margin-top:1px;
}
.content
{
border:#F90;
background-color:yellow;
height:150px;
display:none;
}
</style>
</head>
<body>
<div class="main">
<div class="title" onclick="showDIV(‘hy‘)">我的好友</div>
<div id="hy" class="content"></div>
<div class="title" onclick="showDIV(‘hmd‘)">黑名单</div>
<div id="hmd" class="content"></div>
<div class="title" onclick="showDIV(‘msr‘)">陌生人</div>
<div id="msr" class="content"></div>
</div>
</body>
</html>
<script language="javascript">
function showDIV(divid)
{
//全都收起来
var c = document.getElementsByTagName("div");
for(var i=0;i<c.length;i++)
{
if(c[i].className == "content")
{
c[i].style.display="none";
}
}
//展开点的那个
var d = document.getElementById(divid);
if(d.style.display != "block")
{
d.style.display="block";
}
else
{
d.style.display = "none";
}
}
</script>