DOM操作应用高级

Posted 2020-12-06 potatolulu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM操作应用高级相关的知识，希望对你有一定的参考价值。

DOM操作应用高级

表格应用 -1

获取

? tBodies（数组），tHead（一个元素），tFood（一个元素），rows，cells

隔行变色（鼠标移入高亮）

/*小例子
隔行变色，鼠标移入变色移出还原*/
			window.onload=function(){
				var oTab=document.getElementById(‘tab1‘);
				var oldcolor=‘‘;		//用来存放变色后的选中行原先所存背景颜色
				
				for(var i=0;i<oTab.tBodies[0].rows.length;i++)
				{
					//鼠标移入变色,移出还原
					oTab.tBodies[0].rows[i].onmouseover=function(){
						oldcolor=this.style.background;
						this.style.background=‘green‘;
					}
					oTab.tBodies[0].rows[i].onmouseout=function(){
						this.style.background=oldcolor;
					}
					//隔行变色
					if(i%2)
					{
						oTab.tBodies[0].rows[i].style.background=‘‘;
					}
					else
					{
						oTab.tBodies[0].rows[i].style.background=‘#CCC‘;
					}
				}
			};

添加，删除一行

? DOM方法的使用

window.onload=function(){
    			/*添加或删除一行*/
				var oTab=document.getElementById(‘tab1‘);
				var oBtn=document.getElementById(‘btn1‘);
				var oName=document.getElementById(‘name‘);
				var oAge=document.getElementById(‘age‘);
				var id=oTab.tBodies[0].rows.length+1;		//防止ID重用
				
				oBtn.onclick=function(){
					var oTr=document.createElement(‘tr‘);
					var oTd=document.createElement(‘td‘);
					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].onclick=function()	//点击删除当前行信息
					 {
						oTab.tBodies[0].removeChild(this.parentNode.parentNode); 	//从tbody中删而不是table中删tBodies千万不能忘
					 };
					 oTab.tBodies[0].appendChild(oTr);
				};
			};

表格应用 -2

搜索

版本1：基础版本——字符串比较

版本1：忽略大小写——大小写转换

版本1：模糊搜索——search的使用（找到并返回字符串出现的位置，没找到则返回-1）

版本1：多关键词——split

高亮显示，筛选

window.onload=function(){
				var oTab=document.getElementById(‘tab1‘);
				var oTxt=document.getElementById(‘name‘);
				var oBtn=document.getElementById(‘btn1‘);
				
				oBtn.onclick=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(‘ ‘);		//用split分隔符将输入的关键字分割成关键字数组
						
						oTab.tBodies[0].rows[i].style.background=‘‘;
						//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.background=‘yellow‘;
                                   //oTab.tBodies[0].rows[i].style.display=‘block‘;  //筛选
							}
							else
							{
								oTab.tBodies[0].rows[i].style.background=‘‘;
							}
						}
					}
				};
			};

排序

移动li

元素排序：转换——排序——插入

/*移动li*/
window.onload=function(){
				var oUl1=document.getElementById(‘ul1‘);
				var oUl2=document.getElementById(‘ul2‘);
				var oBtn=document.getElementById(‘btn1‘);
				//每点击一下移动按钮，就把Ul1的第一个子节点li放进Ul2中
				oBtn.onclick=function(){
					var oLi=oUl1.children[0];
					oUl2.appendChild(oLi);		//1.先把元素从原有的父级上删掉 2.添加到新的父级上
				};
			};

/*元素排序：转换——排序——插入*/
window.onload=function(){
				var oTab=document.getElementById(‘tab1‘);
				var oBtn=document.getElementById(‘btn1‘);
				
				oBtn.onclick=function(){
					var arr=[];
					for(var i=0;i<oTab.tBodies[0].rows.length;i++)
					{
						//oTab.tBodies[0].rows实际上是元素集合,要使用Array特有的sort排序,必须将其转换成Array数组
						arr[i]=oTab.tBodies[0].rows[i];
					}
					//排序
					arr.sort(function(tr1,tr2){
						var n1=parseInt(tr1.cells[0].innerHTML);
						var n2=parseInt(tr2.cells[0].innerHTML);
						
						return n1-n2;
					});
					//插入
					for(var i=0;i<arr.length;i++)
					{
						oTab.tBodies[0].appendChild(arr[i]);
					}
				};
			};

表单应用 -1

表单基础知识

什么是表单？

? 向服务器提交数据，比如：用户注册

action

? 提交到哪里去

<form action="http://www.baidu.com">
		<!--前台通过id来查找元素，后台通过name来查找元素-->
		用户名：<input type="text" name="user"/><br>
		密码：<input type="password" name="pass" /><br>
		<input type="submit" />
</form>