DOM操作应用

· 创建和插入元素

//先创建一个LI
var oLi = document.createElement('li');
//把创建的LI插入到UL当中
oUl.appendChild(oLi);

· 创建并添加内容在里面

var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
				
//添加的li在末尾
//oUl.appendChild(oLi);

//添加的li在前面
if(aLi.length>0)
{
	oUl.insertBefore(oLi,aLi[0]);
}
else
{
	oUl.appendChild(oLi);
}

· 删除元素

//删除当前的父节点 就是当前的li
oUl.removeChild(this.parentNode);

· 创建文档碎片

//创建文档碎片
var oFrag=document.createDocumentFragment();
	
for(var i=0;i<10000;i++)
{
	var oLi=document.createElement('li');	
	oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);

· 表格的便捷操作

//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML);
//上面的语句可以便捷操作为：
alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

· 表格隔行变色

for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{	
	if(i%2)
	{
		oTab.tBodies[0].rows[i].style.background='gray';
	}
	else
	{
		oTab.tBodies[0].rows[i].style.background='';
	}
}

· 表格隔行变色鼠标进入高亮

		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{	
			var oldColor = '';
			oTab.tBodies[0].rows[i].οnmοuseοver=function()
			{	
				oldColor = this.style.background;
				this.style.background='green';
			};
			oTab.tBodies[0].rows[i].οnmοuseοut=function()
			{
				this.style.background=oldColor;
			};

			if(i%2)
			{
				oTab.tBodies[0].rows[i].style.background='gray';
			}
			else
			{
				oTab.tBodies[0].rows[i].style.background='';
			}
		}

· 表格的添加和删除

		//ID就是行的长度加1
		var id = oTab.tBodies[0].rows.length+1;

		//添加表格功能
		oBtn.οnclick=function()
		{
			var oTr = document.createElement('tr');
			
			//添加第一列内容
			var oTd = document.createElement('td');
			//ID就是行的长度加1,再自增
			oTd.innerHTML=id++;
			oTr.appendChild(oTd);

			//添加第二列内容
			var oTd = document.createElement('td');
			//内容是输入的姓名
			oTd.innerHTML=oName.value;
			oTr.appendChild(oTd);

			//添加第三列内容
			var oTd = document.createElement('td');
			//内容是输入的年龄
			oTd.innerHTML=oAge.value;
			oTr.appendChild(oTd);

			//添加第四列内容
			var oTd = document.createElement('td');
			//内容是删除
			oTd.innerHTML='<a href="javascript:;">删除</a>';
			oTr.appendChild(oTd);

			//删除的功能实现
			oTd.getElementsByTagName('a')[0].οnclick=function()
			{
				oTab.tBodies[0].removeChild(this.parentNode.parentNode);
			}
			oTab.tBodies[0].appendChild(oTr);
		};

·  表格搜索1-基础字符串比较

		oBtn.οnclick=function()
		{	
			//给每一行做循环
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{	
				//如果行里面的第2个元素（name）等于文本框的内容，就黄色背景显示，否则背景为空
				if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value)
				{
					oTab.tBodies[0].rows[i].style.background='yellow';
				}
				else
				{
					oTab.tBodies[0].rows[i].style.background='';
				}
			}
		};

·  表格搜索2-忽略大小写

		oBtn.οnclick=function()
		{	
			//给每一行做循环
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{	
				//如果行里面的第2个元素等于文本框的内容，就黄色背景显示，否则背景为空
				//最后加上toLowerCase()，让他们都转换成小写，实现忽略大小写搜索
				var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
				var sTxt = oTxt.value.toLowerCase();

				if(sTab == sTxt)
				{
					oTab.tBodies[0].rows[i].style.background='yellow';
				}
				else
				{
					oTab.tBodies[0].rows[i].style.background='';
				}
			}
		};

·  表格搜索3-模糊搜索

		oBtn.οnclick=function()
		{	
			//给每一行做循环
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{	
				//如果行里面的第2个元素等于文本框的内容，就黄色背景显示，否则背景为空
				//最后加上toLowerCase()，让他们都转换成小写，实现忽略大小写搜索
				var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
				var sTxt = oTxt.value.toLowerCase();
				
				//模糊搜索：search(),找到就返回字符串出现的位置，没找到返回-1
				//不等于-1，就是找到了的意思
				if(sTab.search(sTxt)!=-1)
				{
					oTab.tBodies[0].rows[i].style.background='yellow';
				}
				else
				{
					oTab.tBodies[0].rows[i].style.background='';
				}
			}
		};

·  表格搜索4-关键字搜索

		oBtn.οnclick=function()
		{	
			
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{	
				var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
				var sTxt = oTxt.value.toLowerCase();
				
				//关键字用 ' ' （空格）隔开
				var arr = sTxt.split(' ');

				//先让背景为空
				oTab.tBodies[0].rows[i].style.background='';

				//在关键字的长度做一个循环，让每一个关键字都搜索
				for(var j=0;j<arr.length;j++)
				{
					if(sTab.search(arr[j])!=-1)
					{
						oTab.tBodies[0].rows[i].style.background='yellow';
					}
				}
			}
		};

·  表格搜索5-筛选

		oBtn.οnclick=function()
		{	
			
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{	
				var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
				var sTxt = oTxt.value.toLowerCase();

				var arr = sTxt.split(' ');

				//先让所有的行都隐藏
				oTab.tBodies[0].rows[i].style.display='none';

				for(var j=0;j<arr.length;j++)
				{
					if(sTab.search(arr[j])!=-1)
					{
						//如果符合条件，就显示出来
						oTab.tBodies[0].rows[i].style.display='block';
					}
				}
			}
		};

·  表格排序

		oBtn.onclick = function()
		{	
			var arr=[];

			//把行全部放到数组arr里面
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{
				arr[i]=oTab.tBodies[0].rows[i];
			}
			
			//运用数组的sort()函数对arr的第一列进行排序功能
			arr.sort(function (tr1,tr2)
				{
					var n1 = parseInt(tr1.cells[0].innerHTML);
					var n2 = parseInt(tr2.cells[0].innerHTML);

					return n1-n2;
				});
			
			//把排序好的数组arr加到表格里面
			for(var i=0;i<arr.length;i++)
			{
				oTab.tBodies[0].appendChild(arr[i]);
			}
		};

笔记：

DOM操作应用


·创建、插入和删除DOM元素（this的使用）
创建：createElement() ，之后添加 oUl.appendChild(oLi); 格式：父级.appendChild(子节点)；
插入：父级.appendChild(子节点) ，父级.insertBefore(子节点，在谁之前插入)
IE 有兼容性问题 ，联合两个插入方法用if判断解决
删除：removeChild(),


·文档碎片
创建文档碎片：createDocumentFragment();


DOM操作应用（高级）
·表格应用
<thead>表头， <tbody>表格的内容，便捷操作：
getElementsByTagName('tbody')[0] = tBodies[0]
getElementsByTagName('tr')[0] = rows[0]
getElementsByTagName('td')[0] = cells[0]
tBodies是数组 、一个表格只能有一个表头tHead表尾tFoot


·表格搜索： 
忽略大小写搜索：toLowerCase() ：转成全小写的形式
模糊搜索：search(),找到就返回字符串出现的位置，没找到返回-1
关键字搜索：split()
筛选：先让所有的display为none隐藏起来，符合条件display就变成block显示出来


·表格排序
appendChild()的使用：1.先把元素从原有的父级上删掉 2.添加到新的父级
sort()的使用（数组排序）