开发者社区> 问答> 正文

编写一个 JavaScript 函数,输入指定类型的选择器(仅需支持 id,class,tagNam

编写一个 JavaScript 函数,输入指定类型的选择器(仅需支持 id,class,tagName 三种简单 CSS 选择器,无需兼容组合选择器)可以返回匹配的 DOM 节点,需考虑浏览器兼容性和性能。

展开
收起
kun坤 2019-11-28 14:51:41 605 0
1 条回答
写回答
取消 提交回答
  • /*** @param selector {String} 传入的CSS选择器。* @return {Array}*/
    var query = function(selector) {
      var reg = /^(#)?(\.)?(\w+)$/gim;
      var regResult = reg.exec(selector);
      var result = [];
      //如果是id选择器
      if (regResult[1]) {
        if (regResult[3]) {
          if (typeof document.querySelector === "function") {
            result.push(document.querySelector(regResult[3]));
          } else {
            result.push(document.getElementById(regResult[3]));
          }
        }
      } //如果是class选择器
      else if (regResult[2]) {
        if (regResult[3]) {
          if (typeof document.getElementsByClassName === "function") {
            var doms = document.getElementsByClassName(regResult[3]);
            if (doms) {
              result = converToArray(doms);
            }
          } //如果不支持getElementsByClassName函数
          else {
            var allDoms = document.getElementsByTagName("*");
            for (var i = 0, len = allDoms.length; i < len; i++) {
              if (allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                result.push(allDoms[i]);
              }
            }
          }
        }
      } //如果是标签选择器
      else if (regResult[3]) {
        var doms = document.getElementsByTagName(regResult[3].toLowerCase());
        if (doms) {
          result = converToArray(doms);
        }
      }
      return result;
    };
    function converToArray(nodes) {
      var array = null;
      try {
        array = Array.prototype.slice.call(nodes, 0); //针对非IE浏览器
      } catch (ex) {
        array = new Array();
        for (var i = 0, len = nodes.length; i < len; i++) {
          array.push(nodes[i]);
        }
      }
      return array;
    }
    
    
    2019-11-28 14:51:52
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载