DOM总结

Posted 2021-01-07 jian1234

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)+"字";
}

}