一、原生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. MySQL数据查询子查询语句

  2. Pycharm同步本地代码至GitHub

    注册github账号 github地址,进入注册账号 安装git Windows下载地址1 Windows下载地址2 在官方下载完后,双击exe文件进行安装,安装到Windows Explorer i ...

  3. idea的操作

  4. 【第一部分】10Leetcode刷题

    一.删除链表的倒数第N个节点 题目:19. Remove Nth Node From End of List 分析:典型的利用双指针法解题.首先让指针first指向头节点,然后让其向后移动n步,接着让 ...

  5. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  6. (转载)Memcached和Redis简介

    转载自: Memcached和Redis简介 博主的Redis资料列表.http://www.cnblogs.com/programlearning/category/1003158.html 前言: ...

  7. javascript 正则表达式(十)

    一.什么是正则 在常见的字符串检索和替换中,我们需要提供一种模式表示检索或替换的规则.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串. abc [a-z]{4} \d\d\d 二. ...

  8. Codeforces Round #506 (Div. 3)

    题解: div3水的没有什么意思 abc就不说了 d题比较显然的就是用hash 但是不能直接搞 所以我们要枚举他后面那个数的位数 然后用map判断就可以了 刚开始没搞清楚数据范围写了快速乘竟然被hac ...

  9. [转]oracle分页用两层循环还是三层循环?

    select t2.* from --两层嵌套 (select t.* , rownum as row_numfrom t where rownum <=20) t2 where t2.row_ ...

  10. Python学习(十) —— 常用模块

    一.collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdic ...