设为首页收藏本站

 找回密码
 新建账号
轻松E站»轻松E站 › 有点东西 › 网络技术 › getElementById getElementsByTagName getElementsByName getElementsByClassName
返回列表 发新帖

[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>
复制代码
getElementById, getElementsByTagName, getElementsByName, 区分大小写, document

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？新建账号

×

相关帖子
回复

举报

返回列表 发新帖

手机版|轻松E站

GMT+8, 2024/11/21 16:37

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