原生js快速查找指定元素

虽然已经很少有原生js写项目，不过有些组件任然使用js，原生js有一个非常麻烦的问题就是查找元素，写class怕准确度底，id总不不能写一大堆，又不想引用jquery

className：id，class，tag支持父元素指向下级的子元素
attribute：通过自定义属性筛选
只需要通过父元素缩小范围，在元素队列中通过自定义属性锁定想要查找的元素,不需要定义一堆id，定义class有时候就觉得烦，更别说一堆id了

// 元素选择器
export const $ = function $(className: string, label = '') {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);if (classlist[i][0] !== '#') {return checkAttribute();}}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]) {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>console.log(browser.$('#ui-bottom-toolbar span', 'attribute=减少'));