找回密码
 注册

[JS] getElementById getElementsByTagName getElementsByName getElementsByClassName

php 发表于 2014/4/12 23:29 | 显示全部楼层 |阅读模式
document.getElementById(), document.getElementsByTagName(), document.getElementsByName(), document.getElementsByClassName()的区别和在IE和标准浏览器中的差异
document.getElementById(id)
  获取指定id的DOM元素,参数区分大小写,和其他几个函数的区别在于它返回的是一个元素,而不是一组元素,因为id在页面元素中应该是唯一的,不能多个元素使用同一个id,如果页面中出现了相同id的元素,那么该函数返回第一个元素。
document.getElementsByTagName(tagName)
  获取指定标签的DOM元素集合,参数不区分大小写,如果参数为*,则返回所有DOM元素,可以把document换成某个元素,用于获取某个DOM元素的下级元素,同理,参数如果为*,则返回该元素的所有下级元素。注意是所有下级元素,不是子元素,子元素只是下一级元素,如果要获取某个元素的子元素可以用element.childNodes属性,或者element.children属性,区别在于element.childNodes包含文本节点,element.children不含文本节点,其中element即“某个DOM元素”。
document.getElementsByName(name)
  获取name属性为给定参数的DOM元素,参数区分大小写,和document.getElementsByTagName类似,可以用于获取元素的下级元素。
  document.getElementsByName()在IE浏览器和Chrome,Firefox,Safari,Opera等标准浏览器执行标准不一致。
  在IE6 IE7 IE8 IE9中,document.getElementsByName(name)可以获取id为参数的元素,也可以获取name为参数的元素,这其中还要分两种情况,对于页面中name为给定参数的元素,如果不是form/input/button/textarea等元素,则不会出现在最终结果中,对于页面中id为给定参数的元素,则会出现在最终结果中,多个元素使用同一个id也会全部获取到,而不是只获取第一个。
  标准浏览器和IE10及更新版本中document.getElementsByName(name) 只返回name为给定参数的DOM元素,也没有必须是表单元素才能获取的限制。
  因为IE6 IE7 IE8 IE9中document.getElemensByName非常混乱,应该尽量避免使用document.getElemensByName,或者自己重新定义一个类似功能的函数。(见文末)
  请在IE浏览器和标准浏览器中分别测试以下代码,即可知道document.getElementsByName()在IE6 IE7 IE8 IE9和Chrome,Firefox,Safari,Opera等标准浏览器的区别。
  1. <textarea id="xc"></textarea>
  2. <input name="xc" />
  3. <div name="xc"></div>
  4. <script type="text/javascript">
  5.         var els=document.getElementsByName('xc');
  6.         var ell=els.length;
  7.         for(var j=0;j<ell;j++){
  8.                 alert(els[j].tagName);
  9.         }
  10. </script>
复制代码
document.getElementsByClassName(className)
  获取包含指定类名的DOM元素,参数区分大小写,所谓类名,即元素中的class="a b c",a,b,c即三个CSS类名。
  IE6 IE7 IE8不支持,需要自己写一个类似函数,代码在后面。
最终解决方案
  说了半天的document.getElementById(), document.getElementsByTagName(), document.getElementsByName(), document.getElementsByClassName(),我们来写一个函数,将这四个函数的功能全部融入进去,并且让它支持IE6 IE7 IE8 IE9 IE10 IE11和Google Chrome,Firefox,Safari,Opera等所有主流浏览器。
为避免复制出错,请下载附件测试,不要直接复制本页面上的代码。
  1. <script type="text/javascript">
  2. /*
  3. * 获取指定的DOM元素
  4. * www.51-n.com 吴先成 原创
  5. * qQ:229256237 ohcc@163.com
  6. * @参数s,可以按以下格式给定参数
  7. * 传入DOM元素,直接返回传入的DOM元素
  8. * #p 相当于document.getElementById('p'),给定的参数name为DOM元素的id
  9. * !p 相!user当于document.getElementsByName('p'),给定的参数name为DOM元素的name
  10. * .p 相当于document.getElementsByClassName('p'),给定的参数name为DOM元素的class
  11. * p  相当于document.getElementsByTagName('p'),给定的参数name为DOM元素的标签名
  12. * *  相当于document.getElementsByTagName('*'),返回所有的DOM元素
  13. * @返回值 传入DOM元素或id时返回单个DOM元素,传入其他参数返回DOM元素集,未匹配到元素则返回null
  14. */
  15. function $(s){
  16.         s=s||'';
  17.         var o=[];
  18.         if(typeof s=='object'){
  19.                 return s;
  20.         }else if(typeof s=='string'){
  21.                 var sign=s.charAt(0);
  22.                 var name=s.substr(1);
  23.                 switch(s.charAt(0)){
  24.                         case '#':
  25.                                 o.push(document.getElementById(name));
  26.                                 break;
  27.                         case '.':
  28.                                 if(document.getElementsByClassName){
  29.                                         o=document.getElementsByClassName(name);
  30.                                 }else{
  31.                                         var os=document.getElementsByTagName('*');
  32.                                         var ol=os.length;
  33.                                         for(var i=0;i<ol;i++){
  34.                                                 if(os[i].className&&new RegExp('(?:^|\\s+\\b)'+name+'(?:\\b\\s+|$)').test(os[i].className)) o.push(os[i]);
  35.                                         }
  36.                                 }
  37.                                 break;
  38.                         case '!':
  39.                                 var isIE=/MSIE\s*(\d+)/i.exec(navigator.userAgent);
  40.                                 if(isIE&&isIE[1]<10){
  41.                                         var os=document.getElementsByTagName('*');
  42.                                         var ol=os.length;
  43.                                         for(var i=0;i<ol;i++){
  44.                                                 if(os[i].name&&os[i].name==name) o.push(os[i]);
  45.                                         }
  46.                                 }else{
  47.                                         o=document.getElementsByName(name);
  48.                                 }
  49.                                 break;
  50.                         default:
  51.                                 var os=document.getElementsByTagName(s?s:'*');
  52.                                 var ol=os.length;
  53.                                 for(var i=0;i<ol;i++){
  54.                                         o.push(os[i]);
  55.                                 }
  56.                 }
  57.         }
  58.         return sign=='#'?o[0]:o.length===0?null:o;
  59. }
  60. </script>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表