1.事件onkeydown onkeyup 连等，可用oninput 事件当输入时(高级浏览器好用)
处理兼容：
onpropertychange(当属性改变的时候,兼容低版本ie)，不适用于ie9，处理ie9使用变态方法：定时器。微博统计数字代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oT=document.getElementById('t1');
var oSp=document.getElementById('sp1');
var timer=null;
if(window.navigator.userAgent.indexOf('MSIE 9.0')!=-1){
oT.onfocus=function(){
timer=setInterval(function(){
oSp.innerHTML=oT.value.length;
},100);
};
oT.onblur=function(){
clearInterval(timer);
};
}else{
oT.oninput=oT.onpropertychange=function(){
oSp.innerHTML=this.value.length;
document.title=this.value.length;
};
}
};
</script>
</head>
<body>
<input type="text" id="t1" value="" />
<span id="sp1">0</span>
</body>
</html>
2.DOM操作的增删改查：
增:obj.appendChild(创建的元素)；
删：obj.removeChild(创建的元素)；
改:obj.innerHTNL='';
查:obj.parentNode();结构父级
obj.offsetParent();定位父级
示例:简易留言板
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn');
var oT=document.getElementById('txt');
oBtn.onclick=function(){
//创建li
var oLi=document.createElement('li');
//li里添加内容
oLi.innerHTML=''+oT.value+'<a href="javascript:;">删除</a>';
//往ul添加
if(oUl.children.length){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
//清除value
oT.value='';
var oA=oLi.children[0];
oA.onclick=function(){
oUl.removeChild(oLi);
};
};
};
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="留言" id="btn"/>
<ul id="ul1">
<!--<li>1111<a href="javascript:;">删除</a></li>-->
</ul>
</body>
</html>
网友评论