1、组织超链接跳转
<a href="www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function(){
alert("嘎嘎");
return false;
};
</script>
2、点小图显示大图
<a href="image/.jpg" id="ak"><img src="images/a-small.jpg"/></a>
<img src="" id="big"/>
<script src="common.js"></script>
<script>
my$("ak").onclick=function(){
my$("big").src=this.href;
return.false
};
</script>
3、隔行变色
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>红旗</li>
<li>奥迪</li>
<li>奔驰</li>
<li>哈弗</li>
</ul>
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
var list=my$("uu").getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].style.backgroundColor=i%2==0?"red":"yellow";
}
};
</script>
4、高亮显示
<input type="button" value="变亮" id="btn"/>
<ul id="uu">
<li>红旗</li>
<li>奥迪</li>
<li>奔驰</li>
<li>哈弗</li>
</ul>
<script src="common.js"></script>
<script>
var list=document.getElementsById("li");
for(var i=0;i<list.length;i++){
list[i].onmouseover=function(){
this.style.backgroundColor="yellow";
};
list[i].onmouseout=function(){
this.style.backgroundColor="";
};
}
</script>
5、总结获取元素方式
根据id属性值获取元素，返回的是一个元素对象
document.getElementById("id属性的纸");
根据标签名字获取元素，返回的是一个伪数组，里面保存了多个DOM对象
document.getElementsByTagName("标签名字");
下面几个有的浏览器不支持
根据name属性的值获取元素，返回的是一个伪数组，里面保存了多个DOM对象
document.getElementsByName("name属性的值");
根据类样式的名字获取元素，返回的是一个伪数组，里面保存了多个DOM对象
document.getElementsByClassName("类样式的名字");
根据选择器获取元素，返回的是一个元素对象
document.querySelector("选择器的名字");
根据选择器获取元素，返回的是一个伪数组，里面保存了多个DOM对象
document.querySelectorAll("选择器的名字");
6、模拟搜索框
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="common.js"></script>
<script>
my$("txt").onfocus=function(){
if(this.value=="请输入搜索内容"){
this.value="";
this.style.color="black";
}
};
my$("txt").onblur=function(){
if(this.value==""){
his.value="请输入搜索内容";
this.style.color="gray";
}
};
</script>
7、验证文本框密码长度
<input type="text" value="" id="txt"/>
<script src="common.js"></script>
<script>
my$("txt").onblur=function(){
if(this.value.length>=6&&this.value.length<=10){
this.style.background="red";
}else{
this.style.background="green";
}
};
</script>
8、innerText和innerContent
（1）设置标签中间文本内容，应该用innerContent，谷歌、火狐支持，ie8不支持
（2）设置标签中间文本内容，应该用innerText，谷歌、火狐、ie8都支持
（3）如果这个属性在浏览器中不支持，那么这个属性类型是undefined
兼容代码
<input type="button" value="设置值" id="btn"/>
<div id="dv">偶</div>
<script src="common.js"></script>
<script>
function setInnerText(element,text){
if(typeof element.textContent=="undefined"){
element.innerText=text;
}elsr{
element.textContent=text;
}
}
function getInnertext(element){
if(typeof element.textContent=="undedined"){
return element.innerText;
}else{
return element.textContent;
测试
my$("btn").onclick=function(){
console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"),"任意文本内容");
};
</script>
9、innerText和innerHTML
想要设置标签及内容（标签），使用innerHTML，想要设置文本内容，innerText、textContent、innerHTML，建议用innerHTML
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
my$("dv").innerHTML=“哈哈”；
};
</script>
10、自定义属性
在html标签中添加的自定义属性，如果想要获取属性的值，需要使用getAtribute（“自定义属性名字”）才能获取这个属性
设置自定义属性：setAttribute（"属性的名字"，"属性的值"）获取自定义属性getAttribute（"属性的名字"）
<script src="common.js"></script>
<script>
var list=my$("uu").getElementByTagName("li");
for(var i=0;i<list.length;i++){
list[i].setAttribute("score","(i+1)*10");
list[i].onclick=function(){
alert(this.getAttribute("score"));
};
}
移除自定义或自带的属性：removeAttribute("属性的名字")
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10"></div>
<script src="common.js"></script>
<script>
</script>
11、tab切换
<div class="box" id="box">
<div class="hd">
<span cladd="current">体育</span>
<span>娱乐</span>
</div>
<div class="bd">
<ul>
<li class="current">体育模块</li>
<li>娱乐模块</li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
var box=my$("box");
var hd=box.getElementByTagName("div")[0];
var bd=box.getElementByTagName("div")[1];
var list=bd.getElementsByTagName("li");
var spans=hd.getElementByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].setAttribute("index",i);
spans[i].onclick=function(){
for(var j=0;j<spans.length;j++){
spans[j].removeAttribute("class");
}
this.className="current";
var num=this.getAttribute("index");
for(var k=0,k<list.length;k++){
list[k].removeAttribute("class");
}
list[num].className="current";
};
}
</script>