js获取对象
2008-12-18 22:43
如果不用类库(如jquery)来写,往往很多时候,都需要通过id或tag来获取html里的某一对象,然后对其进行操作。
为了节省代码,把常用的获取对象的方法集成到函数里,每次直接通过传递参数来调用,可以是代码更简洁。下面总结了一下常用的获取对象的方法,供参考。 function GetId(id){return document.getElementById(id)} //通过ID获取对象 function GetTag(tag){return document.getElementsByTagName(tag)} //通过Tag获取对象(html标签名称) function GetChildTag(id,tag){return id.getElementsByTagName(tag)} //通过Tag获取某ID对象的子对象 function GetClass(className){return getElementsByClassName(className)} //通过className获取对象 var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;}; Array.prototype.each=function(func){for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};}; var getElementsByClassName=function(cn){ var hasClass=function(w,Name){ var hasClass = false; w.className.split(' ').each(function(s){ if (s == Name) hasClass = true; }); return hasClass; }; var elems =document.getElementsByTagName("*")||document.all; var elemList = []; $c(elems).each(function(e){ if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList); }; //上面代码里通过className获取对象的代码参考了论坛的一篇帖子,在此表示感谢。 使用方法示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript获取对象封装</title> <style type="text/css" media="all"> #test{ width:600px; height:auto; overflow:hidden; padding:9px; border:#FF0000 1px solid; background-color:#F0F0F0; } ul{ border:#FFCC33 1px solid; height:auto; overflow:hidden; width:560px; background-color:#666666; color:#FFFFFF; margin:6px 0px; padding:6px; list-style-type:circle; } .test2{ background-color:#999999; color:#333333; } input{ height:22px; border:#FF9933 1px solid; overflow:hidden; cursor:pointer; } </style> <script language="javascript" type="text/javascript"> /*-------------封装开始------------------*/ function GetId(id){return document.getElementById(id)} //通过ID获取对象 function GetTag(tag){return document.getElementsByTagName(tag)} //通过Tag获取对象 function GetChildTag(id,tag){return id.getElementsByTagName(tag)} //通过Tag获取ID的子对象 function GetClass(className){return getElementsByClassName(className)} //通过className获取对象 var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;}; Array.prototype.each=function(func){for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};}; var getElementsByClassName=function(cn){ var hasClass=function(w,Name){ var hasClass = false; w.className.split(' ').each(function(s){ if (s == Name) hasClass = true; }); return hasClass; }; var elems =document.getElementsByTagName("*")||document.all; var elemList = []; $c(elems).each(function(e){ if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList); }; /*-----------------封装结束---------------------*/ window.οnlοad=function(){ GetTag("input")[0].οnclick=function(){alert("id为test的div内容是:/n"+GetId("test").innerHTML)} GetTag("input")[1].οnclick=function(){alert("body里共有"+GetTag("li").length+"个li")} GetTag("input")[2].οnclick=function(){alert("DIV里共有"+GetChildTag(GetId("test"),"li").length+"个li")} GetTag("input")[3].οnclick=function(){alert("className为test2的内容是:/n"+GetClass("test2")[0].innerHTML+"/n"+GetClass("test2")[1].innerHTML)} } </script> </head> <body> <div id="test" title="这是id=test的div"> <ul title="div内第一个ul"> <li>ccontent1</li> <li>ccontent2</li> <li>ccontent3</li> <li>ccontent4</li> </ul> <ul class="test2" title="div内第二个ul,class=test2"> <li>bcontent1</li> <li>bcontent2</li> <li>bcontent3</li> </ul> </div> <ul class="test2" title="div外的ul,class=test2"> <li>content1</li> <li>content2</li> </ul> <input type="button" value="通过id获取" /> <input type="button" value="通过tag获取" /> <input type="button" value="通过id内tag获取" /> <input type="button" value="通过className获取" /> </body> </html> |