自从标准浏览器增加了querySelector这个类JQ的方法后,选择一个元素变成了一件so easy的事情。但是某些浏览器还是不支持。使用jq库又有点太大,其实可以自己动手实现这个选择器,具体代码如下

    function getByClass(sele,parent){
var parent = parent||document;
if(parent.querySelectorAll){
return parent.querySelectorAll(sele);
}else if(parent.getElementsByClassName){
return parent.getElementsByClassName(sele.slice(1));
}else{
var tags = parent.getElementsByTagName("*");
var targets=[];
for(var i=0;i<tags.length;i++){
if(tags[i].className.indexOf(sele.slice(1))>-1){
targets.push(tags[i]);
}
}
return targets;
}
}
function find(sele,parent){
var parent=parent||document;
// console.log("sele:",sele,";parent:",parent);
var selectorArr = sele.split(/\s+/);
var selector = selectorArr.shift();
// console.log("selector:",selector);
var targets=[];
if(selector.indexOf("#")>-1){
targets.push(document.getElementById(selector.slice(1)));
}else if(selector.indexOf(".")>-1){
targets=getByClass(selector,parent);
}else{
targets = parent.getElementsByTagName(selector);
}
var result=[];
if(selectorArr.length>0){
for(var i=0;i<targets.length;i++){
var tempResult=Array.prototype.slice.call(find(selectorArr.join(" "),targets[i]),0);
result=result.concat(tempResult);
}
}else{
return targets;
}
return result;
}

原理是将网友传入的参数分解,前面的通过迭代选择不断的更新父元素,最后一个选择器就是在父元素的子元素中选择匹配的元素。

案例网址:http://imgad0.pconline.com.cn/ivy/image/20172/21/14876672047970.html

querySelectorAll选择器的js实现的更多相关文章

  1. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  2. querySelector/querySelectorAll选择器两个容易忽略的点

    jquery写得多了,原生js大API就容易忘.如果你也是这样,一起来回顾一下HTML5的类jquery选择器querySelector和querySelectorAll吧,querySelector ...

  3. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  4. 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  5. 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效

    最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖  npm install flatpickr --save 随后在页面中引入css ...

  6. 移动端滚动选择器mobileSelect.js

    一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. 特性 原生js移动端选择控件,不依赖任何库 可传入普通 ...

  7. 让IE8兼容识别css3选择器——selectivizr-min.js

    html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  8. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  9. 日积月累系列之省市选择器(js源码)

    省市选择器是大家经常用到的, 但网上找的省市选择器都不是很实用,于是自己写了移动端的省市选择器. 界面: 源码结构: 演示地址:http://component.cform.cn/city/ 演示二维 ...

随机推荐

  1. linux命令总结----转载

    1.终端是个奇妙的东西,一开始它的低颜值,高难度可能会令我们灰心气馁. 但是入门之后,你会发现终端命令行是如此强大,简直飞一般的感觉.就是这个feel,倍儿爽~ 享受“弹指间,一切尽在掌握”的感觉. ...

  2. docker image 详解

    docker iamge docker 镜像: [root@localhost ~]# docker image --help Usage: docker image COMMAND 管理镜像 Com ...

  3. Collection<T> 的一个坑

    当前所在的公司偏好使用 Collection<T>(System.Collections.ObjectModel), 这货比起List<T>不仅少了很多实用方法, 而且还有一个 ...

  4. 编辑gif

    在撰写文档的过程中,为了清晰的表述我们的内容经常会加入一些图片.对于 `.jpg` 或 `.png` 的静态图我们可以直接 使用windows自带的照片编辑器编辑即可.对于如 licecap 录制出来 ...

  5. IP报文头详解

    IPv4报头: 报头长度:20-60字节bytes 白色部分为固定头部部分(20 bytes),绿色option选项部分为可选部分. 固定头部大小计算: 4bit + 4bit + 8bit + 16 ...

  6. 解决ubuntu 图标消失问题(ubuntu 16)

    如题,我的ubuntu 16 在安装了新内核并重启之后,所有的图标都消失了. (可能和新内核没有多大关系,我切回旧内核也那样) 是什么bug我不清楚,但是图标原有的位置还是可以点击的,仔细看图标还在, ...

  7. mvc @helper 创建用户自定义html

    转载地址:https://www.cnblogs.com/caofangsheng/p/5670071.html

  8. Difference between Load / Stress / Performance Testing

    Load and stress testing are subsets of performance testing. Performance testing means how best somet ...

  9. vim编辑器中没有高亮显示,退格键不能使用的问题

    在~/.vimrc下添加如下内容,立即生效

  10. 每日一练ACM 2019.04.13

    2019.04.13 第1002题:A+B Proble Ⅱ Problem DescriptionI have a very simple problem for you. Given two in ...