原生JS代码封装（输入id名、class名、标签名返回 "object HTMLDivElement"）

佚名 6年前 (2019-05-05) 随笔 1095人围观抢沙发百度已收录

object HTMLDivElement，即 HTMLDivElement 对象，而这个对象是哪里来的呢？查阅《JavaScript权威指南》中文第六版363页，我们可以知道： HTMLDivElement 是 HTMLElement 的一个子对象，而 HTMLElement 又是 Element 的子对象。 function $(selector) { var startWith = ""; if(/^#/.test(selector)) { startWith = "id"; } else if(/^\./.test(selector)) { startWith = "class"; } else if(/^[^#\.]/.test(selector)){ startWith = "tagname"; } if(/\[\w+=.+?\]/.test(selector) ){ //属性选择器 var arr = selector.match(/(.+?)\[(\w+)=(.+?)\]/); //.box[name=123] var _selec = arr[1]; //.box var propname = arr[2]; //name var propval = arr[3]; //123 var elelist = null; switch(startWith) { case "id" : return _id(_selec.substring(1)); case "class" : { console.log(); elelist = Array.from(document.getElementsByClassName(_selec.substring(1))); return elelist.filter(function(val, index){ return val[propname] == propval; }); } case "tagname" : { elelist = Array.from(document.getElementsByTagName(_selec)); return elelist.filter(function(val, index){ return val[propname] == propval; }); } } return null; } switch(startWith) { case "id" : return _id(selector.substring(1)); case "class" : { return _class(selector.substring(1)); } case "tagname" : { return _tag(selector); } } function _id(id) { return document.getElementById(id) } function _class(classname) { console.log(classname); return Array.from(document.getElementsByClassName(classname)); } function _tag(tag) { return Array.from(document.getElementsByTagName(tag)); } }