培训第三节课笔记（DOM,）

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属性 将样式作为单独的样式，适合提前就知道样式
<style>
/*#myDiv{
width:200px;
height:200px;

}*/
/*.forback{
background:red;
}*/
</style>

oDiv=document.getElementById('myDiv');
oDiv.className='forback';

(2)style属性：odiv.style.backgroundColor="red";
style属性适宜于值的动态改变

三dom操作之value属性
一般用于input中 可以获取值，也可以修改值
<input type="text" value="yang"id="myname" data-mytest="world" />
<script>
varoInput=document.getElementById('myname');
//alert(oInput.value);
//oInput.value="hello";

四.dom操作之setAttribute与getAttribute
<inputtype="text" value="yang" id="myname"data-mytest="world" />
<script>
varoInput=document.getElementById('myname');
<input type="text" value="yang"id="myname" data-mytest="world" />
<script>
varoInput=document.getElementById('myname');

五.dom操作之innerHtml
<div id="mydiv">
<divid="div1">1111</div>
</div>
<script>
//innerHTML 内部标签的所有内容 不断拼接内部的东西
varoDiv=document.getElementById('mydiv');
//oDiv.innerHTML="<inputtype='text'/>";

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[]节点中一般包含空格之类的不好查找。