HTML中获取对象的方法总结

最新推荐文章于 2022-05-18 14:35:35 发布

pricks

最新推荐文章于 2022-05-18 14:35:35 发布

阅读量6.2k

点赞数

分类专栏： HTML 文章标签： html function button input radiobutton javascript

本文链接：https://blog.csdn.net/biologypianoprogram/article/details/4104071

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

如果不用类库(如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> <mce:style type="text/css" media="all"></mce:style><style type="text/css" media="all" mce_bogus="1">#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> <mce:script language="javascript" type="text/javascript"></mce: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>

除了上面的方法，还有两个方法：

（1）：document.getElementsByName("name"):即通过html标签元素的name属性名称来获取对象，这一点在radiobutton组和checkbox组中特别有用，见下例；

（2）：和（1）配合使用：nextSibling——当前对象的下一个对象。见下例：