JS获取对象代码示例

稿源：互联网 2022-06-11 10:04:24 点击： 463 撤稿纠错

通过JS获取对象信息，阿里西西网页特效收集。

以下讨论的是和JS 获取对象相关的JS获取对象代码示例教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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.onload=function(){ GetTag("input")[0].onclick=function(){alert("id为test的div内容是：n"+GetId("test").innerHTML)} GetTag("input")[1].onclick=function(){alert("body里共有"+GetTag("li").length+"个li")} GetTag("input")[2].onclick=function(){alert("DIV里共有"+GetChildTag(GetId("test"),"li").length+"个li")} GetTag("input")[3].onclick=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> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于JS获取对象代码示例的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200812103979.shtml方便下次再访问哦。

·上一篇： 关于减速运动效果
·下一篇： 完美的全选反选复选框代码

JS获取对象代码示例

文章分类LIST >>返回首页

最新游戏

最新新闻