1.找元素
var a = document.getElementById("test"); //根据ID找,只能找到一个
var a = document.getElementsByClassName("test");//根据class名找，可以找到多个，返回数组
var a = document.getElementsByTagName("div"); //根据标签名找，可以找到多个，返回数组
var a = document.getElementsByName("uid"); //根据Name找，可以找到多个，返回数组，主要针对于表单元素
2.控制元素
var a = document.getElementById("test");
a.remove(); //移除元素
var s = document.createElement("span"); //创建元素
a.appendChild(s); //追加子元素
3.操作内容
普通元素
var a = document.getElementById("test");
alert(a.innerText); //取元素的文本内容
a.innerText = "<b>加粗</b>"; //给元素赋文本值
alert(a.innerHTML); //取元素的HTML代码内容
a.innerHTML = "<b>加粗</b>";//给元素扔一个HTML代码
表单元素
var a = document.getElementById("uid");
a.value = "用户名"; //给元素赋值
alert(a.value); //取值
4.操作属性
var a = document.getElementById("test");
a.setAttribute("bs","100"); //添加属性
alert(a.getAttribute("bs")); //获取属性值
a.removeAttribute("bs"); //移除属性
5.操作样式
var a = document.getElementById("test");
a.style.backgroundColor = "red"; //设置样式
alert(a.style.width); //获取样式,只能获取内联的
a.style.width = ""; //移除样式
二、例子鼠标点击事件变红色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .item{ 200px; height:200px; background-color:#60F; float:left; margin:2px;} </style> </head> <body> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> <div class="item" onclick="sel(this)"></div> </body> <script type="text/javascript"> function sel(a){ //让所有的元素变为初始颜色 var sy = document.getElementsByClassName("item"); for(var i=0;i<sy.length;i++){ sy[i].style.backgroundColor = "blue"; } //让该元素变选中 a.style.backgroundColor="red"; } </script> </html>
三、关于鼠标的事件
onclick 鼠标单击触发
ondblclick 鼠标双击触发
onmouseover 鼠标移上触发
onmouseout 鼠标离开触发
onmousemove 鼠标移动触发
关于键盘的事件
onkeydown 键盘按下触发
onkeyup 按键抬起的时候触发
onkeypress 按键触发
关于表单的事件
onfocus 获得焦点触发
onblur 失去焦点触发
onchange 内容改变触发