getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别
1. getElementById() getElementsByTagName() javascript原生的方法,这两个不会有兼容性问题。
2. getElementsByClassName()是HTML5的DOM API ,IE8及以下不支持(不支持HTML5的浏览器)。
对于现代浏览器,document.getElementsByClassName( 'wrap' )获取的是DOM中所有class为wrap的元素
在IE8及以下,可以模拟实现这种效果
function getElementsByClassName(oParent, tagName, className) {
if(document.getElementsByClassName ){ //现代浏览器
return oParent.getElementsByClassName(className );
}else{ //IE8以下
var aEls = oParent.getElementsByTagName(tagName);
var arr = [];
for (var i=0; i<aEls.length; i++) {
var arrClassName = aEls[i].className.split( ' ' );
for (var j=0; j<arrClassName.length; j++) {
if ( arrClassName[j] == className ) {
arr.push(aEls[i]);
break;
}
}
}
return arr;
}
}
例如:
<ul>
<li class="box1 box2">1</li>
<li class="box3 box5">1</li>
<li class="box4">1</li>
<li class="box1 box1">1</li>
</ul>
getElementsByClassName(document, 'li', 'box1');
3. querySelector() querySelectorAll()也是HTML5的DOM API ,IE8以下不支持(不支持HTML5的浏览器)。
querySlector() 接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素。
querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合。
document.querySlector('.wrap')获取的是DOM中第一个class为wrap的元素。
document.querySlector('p')获取的是DOM中第一个p元素。
document.querySelectorAll('.wrap')获取的是DOM中class为wrap的元素集合。
document.querySelectorAll('p')获取的是DOM中p元素集合。
getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别的更多相关文章
- JavaScript中querySelector()和getElementById()(getXXXByXX)的区别
在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...
- document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么以及其意义
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签: 1 g ...
- autohotkey 自动登录输入用户名密码 getElementsByTagName/getElementsByClassName/getElementById
针对button未设置id的.可以通过getElementsByTagName获取button的对象数组,再明确其在对象数组中的位置,如第4个button,通过[3]获取.再调用此对象的click() ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- getElementById和querySelector方法的区别
"querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...
- document.getElementById(“id”)与$("#id")的区别
document.getElementById("id")可以直接获取当前对象, jQuery利用$("#id")获取的是一个[object Object],需 ...
- getElementsByTagName("div")和$("div")区别
作者:zccst <body> <div class="selected">1</div> <div class="select ...
- js中script的上下放置区别 , Dom的增删改创建
回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.r ...
随机推荐
- 【Win 10 应用开发】Toast通知激活应用——前台&后台
老周最近热衷于讲故事,接下来还是讲故事时间. 有人问我:你上大学的时候,有加入过学生会吗?读大学有没有必要加入学生会? 哎哟,这怎么回答呢,从短期来说,加入学生会有点用,至少可以娱乐一下,运气好的话, ...
- 前端MVVM框架设计及实现(二)
在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...
- JavaScript 框架设计(二)
JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- How to implement a neural network
神经网络的实践笔记 link: http://peterroelants.github.io/posts/neural_network_implementation_part01/ 1. 生成训练数据 ...
- 如何为RD网关创建自建签名的证书
创建安全的RD网关是一件非常好的事情,这样可以在公网环境下直接远程接入内部的已开启远程访问的主机服务器. 建立这个安全的RD网关需要的材料有RD网关本身,以及一个证书.由于一般情况下这些在RD网关后面 ...
- c++编译器对多态的实现原理总结
问题:定义一个空的类型,里面没有任何的成员变量或者成员函数,对这个类型进行 sizeof 运算,结果是? 结果是1,因为空类型的实例不包含任何信息,按道理 sizeof 计算之后结果是0,但是在声明任 ...
- 1Z0-053 争议题目解析505
1Z0-053 争议题目解析505 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 505.You configured the default backup device type ...
- DotNet常用排序算法总结
数据结构和算法对一个程序来说是至关重要的,现在介绍一下几种算法,在项目中较为常用的算法有:冒泡排序,简单选择排序,直接插入排序,希尔排序,堆排序,归并排序,快速排序等7中算法. 现在介绍选择排序算法, ...
- 轻松搞定Win8 IIS支持SVC 从而实现IIS寄宿WCF服务
写在前面 为了尝试在IIS中寄宿WCF服务,需要配置IIS支持SVC命令,于是便有了在DOS命令中用到ServiceModelReg.exe注册svc命令. 坑爹的是注册成功后就开始报错.无奈之下两次 ...