JS定时器与DOM操作详解-优快云博客

前言

没有前沿了，本系列文章主要随缘，靠看各种前辈文章，觉得好的地方截取汇合，非原创。

定时器——作用：可以每隔一段时间执行一次函数。

setInterval () 间隔性，每隔一段时间执行一次；

setTimeout() 延时性，只执行一次。

——停止定时器：

clearInterval()关闭setInterval()；

clearTimeout()关闭setTimeout;


        window.onload = function (){
        	var oBtn1 = document.getElementById('btn1');
        	var oBtn2 = document.getElementById('btn2');
        	var timer = null;
 
        	oBtn1.onclick = function(){
        		timer = setInterval(function(){
        			alert('a');
        		}, 1000);
        	};
 
        	oBtn2.onclick = function(){
                clearInterval(timer)
        	}
        }

——Date对象（日期对象）

new用于创建一个对象。

getHours() 获取小时；getMinutes() 获取分钟；getSeconds() 获取秒数；

getFullYear() 年； getMonth() 月(会比实际月份少1)； getDate() 日； getDay() 星期(星期天为0)；

——获取字符串（兼容性问题）

var str = 'abbcak';
 
        // alert(str[0]);    //IE 7以下不兼容
        alert(str.charAt(0));

——合并函数：两个完全相同的函数可以互相连等；

——offsetLeft/offsetTop：获取物体左/上边距，可一同获取padding，margin。

DOM基础

——节点

CSS中叫做标签；JS中叫做元素；DOM中叫做节点

——浏览器对DOM的支持情况

IE（6-8）10%；chrome 60%；火狐 99%；

——获取子节点（子节点只算第一层）

childNodes：在chrome及IE9以上会同时获取文本节点及元素节点；

nodeType：用于判断节点类型，文本节点为3，元素节点为1；

children：只获取元素节点，建议使用

   for (var i = 0; i < oUl.length; i++) {
        	if (oUl.childNodes[i].nodeType == 1) {
        		oUl.childNodes[i].style.background = 'red'
        	}
        }       //循环所有子节点不会出现文本节

——获取父节点

parentNode 获取某元素的父节点；

offsetParent 获取某元素用于定位的父节点。

——首尾及兄弟节点

获取首节点：IE（6-8）用firstChild；高版本浏览器用firstElementChild；

获取尾节点：IE（6-8）用lastChild；高版本浏览器用lastElementChild；

下一个兄弟节点：IE（6-8）用nextSibling；高版本浏览器用nextElementSibling；

上一个兄弟节点：IE（6-8）用previousSibling；高版本浏览器用previousElementSibling；

——DOM方式操作元素属性

获取：getAttribute(名称)；
设置：setAttribute(名称，值)；
删除：removeAttribute(名称)

——封装一个函数（通过className来获取某些元素）

 function getByClass(oParent,sClass){
       	  var aResult = [];       //定义一个数组用于储存返回值
       	  var aEle = oParent.getElementsByTagName('*');
 
       	  for(var i = 0;i < aEle.length;i++){
       	  	if(aEle[i].className == sClass)
       	  	{
       	  		aResult.push(aEle[i]);
       	  	}
       	  }
 
       	  return aResult;

DOM操作应用

——创建DOM元素

createElement 创建一个元素；

appendChild（子节点）向父元素追加一个元素；

insertBefore(子节点，在谁之前) 向父元素插入一个元素；

   oBtn.onclick = function (){
         	var oLi = document.createElement('li');
         	var aLi = oUl.getElementsByTagName('li');
            
            //父级.appendChild(子节点)；
         	// oUl.appendChild(oLi);
 
         	oUl.insertBefore(oLi, aLi[0]);
         }；

——删除DOM元素

removeChild (节点)删除子元素；

——文档碎片

createDocumentFragment()：可以提高DOM操作性能（仅限于IE6-8）；

DOM高级

——表格应用

获取：tBodies，tHead，tFoot，rows，cells;

——搜索

toLowerCase() 用于忽略大小写；

search() 用于模糊搜索，找到并返回字符串出现的位置，如果没找到返回 -1；

split() 用于多关键词搜索，将字符串切分成数组

——排序(ul li)

appendChild() 1. 先把元素从原有的父级上删掉 2.添加到新的父级；

oBtn.onclik = function (){
         	var aLi = oUl1.getElementsByTagName('li');
         	//aLi为元素集合而并非数组，不能直接用 sort（)排序
         	
         	var arr = [];
 
         	for (var i = 0; i < aLi.length; i++) {
         		arr[i] = aLi[i];
         	}
 
         	arr.sort(function (li1,li2){      //比较函数
         		var n1 = parseInt(li1, innerHtml);
         		var n2 = parseInt(li2, innerHtml);
 
         		return n1-n2;
         	});
 
         	for (var i = 0; i < arr.length; i++) {
         		oUl1.appendChild(arr[i]);
         	}
         
         }