虽然已经很少有原生js写项目，不过有些组件任然使用js，原生js有一个非常麻烦的问题就是查找元素，写class怕准确度底，id总不不能写一大堆，又不想引用jquery
className：id，class，tag支持父元素指向下级的子元素
attribute：通过自定义属性筛选
只需要通过父元素缩小范围，在元素队列中通过自定义属性锁定想要查找的元素,不需要定义一堆id，定义class有时候就觉得烦，更别说一堆id了
// 元素选择器export const $ = function $(className: string, attribute = '') {if (!className) {return null;}const classlist = className.split(' ');let dom;for (let i = 0; i < classlist.length; i++) {dom = search(classlist[i], i === 0 ? document : dom);}// 元素查询function search(name: string, element = document) {const nameText = name.substring(1);switch (name[0]) {case '.':return element.getElementsByClassName(nameText);case '#':return element.getElementById(nameText);default:return element.getElementsByTagName(name);}}// 属性查询function checkAttribute() {if (attribute === '') return dom;const attrList = attribute.split('=');for (let i = 0; i < dom.length; i++) {if (dom[i].getAttribute(attrList[0]) === attrList[1]) {dom[i].search = search;return dom[i];}}}return checkAttribute();};
使用示例
<div id="ui-bottom-toolbar"><span label="全屏" class="iconfont icon-quxiaoquanping"></span><div label="缩放" class="ui-toolbar-scale"><span button="减少">-</span><span >100%</span><span button="增加">+</span></div></div>$('#ui-bottom-toolbar span', 'attribute=减少');const dom = $('.ui-excel-menu', `menu=子菜单`);dom.search('.ui-excel-menu-ul');
如果觉得《原生js快速查找指定元素》对你有帮助，请点赞、收藏，并留下你的观点哦！
