HTML5第三节课笔记
一.定时器,延时器
setInterval (反复执行)----------clearInterval
setTimeout(只执行一次)-----------clearTimeout //延时用到倒计时
一般集合运动使用
实例:小鱼移动
var oFish=document.getElementById('fish');
var timer=null;
timer=setInterval(function(){
if(oFish.offsetLeft<=150)
{
clearInterval(timer);
}
else{
oFish.style.left=oFish.offsetLeft-7+'px';
}
},50);
二.动态修改样式:
(1)className属性 将样式作为单独的样式,适合提前就知道样式
/*#myDiv{
width:200px;
height:200px;
}*/
/*.forback{
background:red;
}*/
oDiv=document.getElementById('myDiv');
oDiv.className='forback';
(2)style属性:odiv.style.backgroundColor="red";
style属性适宜于值的动态改变
三dom操作之value属性
一般用于input中 可以获取值,也可以修改值
varoInput=document.getElementById('myname');
//alert(oInput.value);
//oInput.value="hello";
四.dom操作之setAttribute与getAttribute
varoInput=document.getElementById('myname');
varoInput=document.getElementById('myname');
五.dom操作之innerHtml
//innerHTML 内部标签的所有内容 不断拼接内部的东西
varoDiv=document.getElementById('mydiv');
//oDiv.innerHTML="
6.dom操作之document.createElement
7.dom操作之document.createTextNode
8.dom操作之元素.appendChild
var oP=document.createElement('p');
varospan=document.createTextNode('hello world');//文本节点
oP.appendChild(ospan);
oDiv.appendChild(oP);//appendChild不会删除原来的,始终加到元素的底部
9.dom操作之元素.insertBefore
varoDiv1=document.querySelector('#div1');
//就近父级 op加到oDiv1前面
//上拉刷新 下拉刷新
oDiv.insertBefore(oP,oDiv1);
10.dom操作元素之firstChild
lastChild
childNodes集合
一般不建议使用childNodes[]节点中一般包含空格之类的不好查找。