一、原生JavaScript支持6种方式获取元素

  1. document.getElementById('id');
  2. document.getElementsByName('name');
  3. document.getElementsByTagName('tag');
  4. document.getElementsByClassName('className');
  5.  
  6. document.querySelector("#id");
  7. document.querySelector(".className");
  8. document.querySelector("p");
  9. document.querySelectorAll("div");

二、getElementsByClassName的兼容性问题

非IE6,7,8可以直接用自带的属性getElementsByClassName，如果需要考虑兼容，就需要自己写了。

比如实现点击class="click-enable"的td时，分别打印该td中数字的整数和小数部分，尝试用js实现，考虑兼容性。

大概思路，是将你要获取class元素父级下的所有元素都取出来，再循环查找className，满足的元素存到数组中，然后返回。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>原生JavaScript获取类名</title>
  6. </head>
  7.  
  8. <body>
  9. <table id="list">
  10.   <tr>
  11.     <td class="click-enable">1.1</td>
  12.     <td>1.2</td>
  13.     <td class="click-enable">1.3</td>
  14.     <td>1.4</td>
  15.   </tr>
  16.   <tr>
  17.     <td class="click-enable">2.1</td>
  18.     <td>2.2</td>
  19.     <td class="click-enable">2.3</td>
  20.     <td>2.4</td>
  21.   </tr>
  22.   <tr>
  23.     <td class="click-enable">3.1</td>
  24.     <td>3.2</td>
  25.     <td class="click-enable">3.3</td>
  26.     <td>3.4</td>
  27.   </tr>
  28. </table>
  29.  
  30. <script type="text/javascript">
  31. window.onload = function () {
  32.   var tagName = getClassName("list", "click-enable");
  33.   for(var i=0;i<tagName.length;i++){
  34.     var kk=tagName[i].innerHTML;
  35.     var bb=kk.split('.');
  36.     var x=bb[0];
  37.     var y=bb[1];
  38.     document.write("整数部分:"+x+" 小数部分:"+y+'</br>');
  39.   }
  40. }
  41.  
  42. function getClassName(oParent, className)
  43. {
  44.   var oParent = oParent ? document.getElementById(oParent) : document;
  45.   //判断浏览器是否支持getElementsByClassName，如果支持就直接用。
  46.   if (document.getElementsByClassName){
  47.     return oParent.getElementsByClassName(className);
  48.   }else{
  49.     var aEle = oParent.getElementsByTagName('*');   //获取指定元素
  50.     var arr = [];  //这个数组用于存储所有符合条件的元素
  51.     for(var i = 0; i < aEle.length; i++){ //遍历获得的元素
  52.       if (aEle[i].className == className){
  53.         //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll
  54.         arr[arr.length] = aEle[i];
  55.         //方法2：arr.push(aEle[i]);
  56.       }
  57.      //方法3
  58.      //if(aEle[i].className.indexOf(className) != -1){
  59.      //  arr[arr.length] = aEle[i];
  60.      //}
  61.     }
  62.     return arr;
  63.   }
  64. }
  65. </script>
  66. </body>
  67. </html>

 三、querySelectorAll的兼容性问题

querySelector和querySelectorAll方法是 W3C Selectors API 规范中定义的。他们的作用是根据CSS 选择器规范，便捷定位文档中指定元素。但ie6，ie7不支持。

  1. if (!document.querySelectorAll) {
  2.   document.querySelectorAll = function (selectors) {
  3.     var style = document.createElement('style'), elements = [], element;
  4.     document.documentElement.firstChild.appendChild(style);
  5.     document._qsa = [];
  6.  
  7.     style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
  8.     window.scrollBy(0, 0);
  9.     style.parentNode.removeChild(style);
  10.  
  11.     while (document._qsa.length) {
  12.       element = document._qsa.shift();
  13.       element.style.removeAttribute('x-qsa');
  14.       elements.push(element);
  15.     }
  16.     document._qsa = null;
  17.     return elements;
  18.   };
  19. }
  20.  
  21. if (!document.querySelector) {
  22.   document.querySelector = function (selectors) {
  23.     var elements = document.querySelectorAll(selectors);
  24.     return (elements.length) ? elements[0] : null;
  25.   };
  26. }

或者

  1. function getId(strid){
  2.     if ('querySelector' in document) {
  3.       document.querySelector("#" + strid);
  4.     } else {//IE6
  5.       document.getElementById(strid);
  6.     }
  7. }

原生JavaScript支持6种方式获取元素的更多相关文章

  1. 原生js获得八种方式,事件操作

    08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...

  2. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  3. 不使用spring的情况下原生java代码两种方式操作mongodb数据库

    由于更改了mongodb3.0数据库的密码,导致这几天storm组对数据进行处理的时候,一直在报mongodb数据库连接不上的异常.   主要原因实际上是和mongodb本身无关的,因为他们改的是配置 ...

  4. SPRING IN ACTION 第4版笔记-第十章Hitting the database with spring and jdbc-003-四种方式获取DataSource

    一.概述 1.Spring offers several options for configuring data-source beans in your Spring application, i ...

  5. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...

  6. nginx的upstream目前支持5种方式的分配(转)

    nginx的upstream目前支持5种方式的分配 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight 指定轮询几率,weight ...

  7. nginx的upstream目前支持5种方式的分配

    Nginx   nginx的upstream目前支持5种方式的分配 FROM: 转载 1 轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器, 如果后端服务器down掉, 能自动剔除. 2 w ...

  8. css点滴1—八种方式实现元素垂直居中

    这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...

  9. 让浏览器非阻塞加载javascript的几种方式

    通常大多数浏览器是并行下载资源的,但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构.脚本之间的存在依赖关系.使用document.write 向页面输出HTML等.浏览器为了确保正确执行脚本和呈 ...

随机推荐

  1. 【ES】学习9-聚合2

    按时间统计:date_histogram GET /cars/transactions/_search { , "aggs": { "sales": { &qu ...

  2. WEB漏洞 XSS（一）

    1.xss的形成原理 xss 中文名是“跨站脚本攻击”,英文名“Cross Site Scripting”.xss也是一种注入攻击,当web应用对用户输入过滤不严格,攻击者写入恶意的脚本代码(HTML ...

  3. Git使用五：回到过去

    reset:将仓库里面的内容恢复回暂存区,类似于从仓库里检出文件到暂存区checkout:将暂存区的文件恢复回工作区,即,把暂存区的文件检出到工作区 下面是之前三次提交的内容 三个区域的文件状态: 执 ...

  4. linux安装python3+selenium

    安装笔记 当前安装使用centos7 安装python3 1.下载 [admin@ ~] wget https://www.python.org/ftp/python/3.6.0/Python-3.6 ...

  5. 51 NOd 1459 迷宫游戏 （最短路径）

    1459 迷宫游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间, ...

  6. What is base..ctor(); in C#?

    I am disassembling some C# applications and I am trying to reconstruct the source code. I am disasse ...

  7. caffe调loss方法

    正文 what should I do if... ...my loss diverges? (increases by order of magnitude, goes to inf. or NaN ...

  8. android开发默认图标怎么换？

    首先要在资源文件放入想换的图标图片拖到drawable-XX文件夹下, 然后打开AndroidManifest.xml这个配置清单文件找 到application标签里的这句android:icon= ...

  9. WebApi服务以及跨域设置

    WCF 它利用TCP.HTTP.MSMQ等传输协议构建“契约先行”的服务.WCF最初为基于SOAP的服务而设计[xml],繁琐.冗余.慢.沉重 WebApi 基于http协议,轻量级的,支持URL路由 ...

  10. rabbitmq更换数据文件和日志文件的存放位置

    原来的默认位置是/var下 需要将这些文件更换位置 1.先创建数据文件和日志文件存放位置的目录并给权限 mkdir -p /usr/local/rabbitmq/mnesia mkdir -p /us ...