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

document.getElementById('id');

document.getElementsByName('name');

document.getElementsByTagName('tag');

document.getElementsByClassName('className');

document.querySelector("#id");

document.querySelector(".className");

document.querySelector("p");

document.querySelectorAll("div");

二、getElementsByClassName的兼容性问题

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>原生JavaScript获取类名</title>

</head>

<body>

<table id="list">

  <tr>

    <td class="click-enable">1.1</td>

    <td>1.2</td>

    <td class="click-enable">1.3</td>

    <td>1.4</td>

  </tr>

  <tr>

    <td class="click-enable">2.1</td>

    <td>2.2</td>

    <td class="click-enable">2.3</td>

    <td>2.4</td>

  </tr>

  <tr>

    <td class="click-enable">3.1</td>

    <td>3.2</td>

    <td class="click-enable">3.3</td>

    <td>3.4</td>

  </tr>

</table>

<script type="text/javascript">

window.onload = function () {

  var tagName = getClassName("list", "click-enable");

  for(var i=0;i<tagName.length;i++){

    var kk=tagName[i].innerHTML;

    var bb=kk.split('.');

    var x=bb[0];

    var y=bb[1];

    document.write("整数部分:"+x+" 小数部分:"+y+'</br>');

  }

}

function getClassName(oParent, className)

{

  var oParent = oParent ? document.getElementById(oParent) : document;

  //判断浏览器是否支持getElementsByClassName，如果支持就直接用。

  if (document.getElementsByClassName){

    return oParent.getElementsByClassName(className);

  }else{

    var aEle = oParent.getElementsByTagName('*');   //获取指定元素

    var arr = [];  //这个数组用于存储所有符合条件的元素

    for(var i = 0; i < aEle.length; i++){ //遍历获得的元素

      if (aEle[i].className == className){

        //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll

        arr[arr.length] = aEle[i];

        //方法2：arr.push(aEle[i]);

      }

     //方法3

     //if(aEle[i].className.indexOf(className) != -1){

     //  arr[arr.length] = aEle[i];

     //}

    }

    return arr;

  }

}

</script>

</body>

</html>

 三、querySelectorAll的兼容性问题

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

if (!document.querySelectorAll) {

  document.querySelectorAll = function (selectors) {

    var style = document.createElement('style'), elements = [], element;

    document.documentElement.firstChild.appendChild(style);

    document._qsa = [];

    style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';

    window.scrollBy(0, 0);

    style.parentNode.removeChild(style);

    while (document._qsa.length) {

      element = document._qsa.shift();

      element.style.removeAttribute('x-qsa');

      elements.push(element);

    }

    document._qsa = null;

    return elements;

  };

}

if (!document.querySelector) {

  document.querySelector = function (selectors) {

    var elements = document.querySelectorAll(selectors);

    return (elements.length) ? elements[0] : null;

  };

}

或者

function getId(strid){

    if ('querySelector' in document) {

      document.querySelector("#" + strid);

    } else {//IE6

      document.getElementById(strid);

    }

}

原生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. day 28 面向对象 三种特性之一 多态 鸭子类型 反射（反省）

    多态是OOP的三大特征之一 字面意思:多种形态 多种状态 官方描述:不同的对象可以响应(调用)同一个方法 产生不同的结果(例如水的三相特征) 多态不是什么新技术 我们编写面向对象的程序时 其实就有多态 ...

  2. mysql解决外网不能连接

    mysql解决外网不能连接 Author:SimpleWu 或许有些时候会遇到通过ip地址访问项目的数据库,可是访问失败了. 现在给大家一种解决方案: #进入mysql数据库 USE mysql; # ...

  3. LeetCode（98）： 验证二叉搜索树

    Medium! 题目描述: 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和右 ...

  4. hdu2871 区间合并（类似poj3667）+vector应用

    用vector进行插入和删除操作! 总是有些地方处理不好,对拍了才知道错在哪里,, /* 给定一些操作 reset 清空 new a ,申请最左边的连续a个空间 free a,清空a所在的块 get ...

  5. 微信公众号开发调用自带地图 不显示（openLocation）

    1.需要在wx.config中声明需要使用的功能(openLocation) 例如: wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端aler ...

  6. 激活函数的比较，sigmoid，tanh，relu

    1. 什么是激活函数 如下图,在神经元中,输入inputs通过加权.求和后,还被作用了一个函数.这个函数就是激活函数Activation Function 2. 为什么要用激活函数 如果不用激活函数, ...

  7. Centos+Redis 集群

    Redis 3.2.6集群搭建 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2):slave- ...

  8. Oracle数据库查看表空间是否为自增的

    表空间是有数据文件组成的,所以看表空间是否自增即看数据文件,如下查自增的表空间: select tablespace_name,file_name,autoextensible from dba_da ...

  9. 使用openssl创建一个自签名https证书，并配置到nginx里面

    公司内网也有这个需求,就简单实现一下. 参考的都是网上的方案,一次过. 1,使用openssl建立服务器私钥(需要输入密码,请记住这个密码)生成RSA密钥 >openssl genrsa -de ...

  10. C#学习-属性是对字段的扩展

    属性是对字段的扩展. 根据面向对象语言的封装思想,字段最好设为private,因为这样可以防止客户端直接对字段进行篡改,从而保证了内部成员的完整性. 于是为了访问类中的私有字段,C#提供了属性这种机制 ...