DOM总结
DOM查找方法：
document.getElementById()
document.getElementsByTagName()
DOM设置样式
ele.style.styleName=styleValue
DOM innerHTML
获取文本标签内的内容
<ul id="listWeb">
<li>JavaScript基础</li>
<li>CSS基础</li>
<li>HTML基础</li>
</ul>
var lis = document.getElementById("listWeb").getElementsByTagName("li");
for(var i=0,len=lis.length;i<len;i++){
console.log(lis[i].innerHTML);
lis[i].innerHTML+='程序'; //修改标签里面的内容
}
DOM className
<ul id="listWeb">
<li>JavaScript基础</li>
<li><b>CSS基础</b></li>
<li>HTML基础</li>
</ul>
var lis = document.getElementById("listWeb").getElementsByTagName("li");
for(var i=0,len=lis.length;i<len;i++){
console.log(lis[i].innerHTML);
lis[i].innerHTML+='程序';
lis[1].className = "current"; //更改class的名字
}
语法 获取自定义标签的属性
ele.getAttribute("attrbute");
var p = document.getElementById("text");
console.log(p.getAttribute("class")) //获取class属性
添加属性
p.setAttribute(“data-color”,"red"); //添加新属性
删除属性
p.removeAttribute(“align”);
鼠标事件
onload 页面加载时触发
onclick 鼠标点击时触发 onclick="alert("12313123")"
var btn = document.getElementById("btn")
btn.onclick = function(){
this.className = "unlock"; //改变class的样式的名字 class=“lock”变成class=“unlock”
this.innerHTML = "解锁"; //改变元素的名字 锁定变成解锁
}
onmouseover 鼠标划过时触发 onmouseover="mounsoverFn()" 调用一个函数 function mounsoverFn(btn){btn.style.background="red";}
onmouseout 鼠标离开时触发 onmouseout="mounsoutFn()" 调用一个函数 function mounsoutFn(btn){btn.style.background="blue";}
例子：
<input type="button" value="开始" onmouseover="mouseoverOn(this,'red')" onmouseout="mouseoutOut(this,'orange')"> // this对div的引用
<input type="button" value="结束" onmouseover="mouseoverOn(this,'yellow')" onmouseout="mouseoutOut(this,'green')">
function mounsoverFn(btn，bgcolor){btn.style.background=bgcolor;}
function mounsoutFn(btn，bgcolor){btn.style.background=bgcolor;}
onfoucs 获得焦点时触发
onblur 失去焦点时触发
例子
onfocus获得焦点
onblur失去焦点
例子：
.red{
border:1px solid red;
}
span{display:none;}
姓名：<input type="text" id="inp" class="no"> <span id="tip">请输入您的姓名</span>
var hqsrk =document.getElementById('inp')
tip = document.getElementById("tip");
hqsrk.onfocus=function(){
tip.style.display="block";
tip.innerHTML="请输入您的姓名";
}
hqsrk.onblur=function(){
var abc = this.value; //用于获取文本框的值，value用于获取表单元素的值
if (abc.length==0) {
tip.innerHTML="用户名不能为空"; //更改span标签的内容
inp.className="red"; //更改样式名字 将no改成red
}else{
tip.style.display="none";
inp.className="no";
}
}
onchange 域的内容改变时触发，改变你选择的内容
例子
window.onload=it;
function it(){
var menu = document.getElementById('color'),
div1 = document.getElementById('div');
menu.onchange=function(){
var bgcolor=this.value;
//var bgcolor= menu.option[menu.selectedIndex].value;
//document.write(bgcolor);
if (bgcolor==0) {
div1.style.background="#fff";
}else{
div1.style.background=bgcolor;
}
}
}
onsubmit 表单中的确定按钮被点击时发生 事件加在form标签上的
onmousedown 鼠标按钮在元素上按下时触发
box.onmousedown = function(){
}
onmousemove 鼠标指针移动时发生
box.onmousemove = function(){
}
onmouseup 在元素上松开鼠标按钮时触发
box.onmouseup = function(){
}
onresize 调整浏览器窗口的大小时触发
window.onresize = function(){
}
onscroll 拖动滚动条滚动时触发
window.onscroll= function(){
}
键盘事件
onkeydown 在用户按下一个键盘按键时发生
onkeypress 在按下键盘时发生（只会响应字母与数字符号）
onkeyup 在键盘按键被松开时发生
keyCode 返回onkeydown onkeypress onkeyup事件触发的键的值的字符代码
例子
var text = document.getElementById("text"),
tip = document.getElementById("tip"),
zi = document.getElementById("zi")
var zi_num = 30;
document.onkeyup=function(){
var len = text.value.length;
var allow = zi_num-len;
if(allow>=0){
tip.innerHTML = "您还可以输入"+allow+"字";
}else{
tip.innerHTML = "您已超出"+Math.abs(allow)+"字";
}
}
