zoukankan      html  css  js  c++  java
  • 原生JS代码封装(输入id名、class名、标签名 返回 "object HTMLDivElement")

    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));
        }
    }
  • 相关阅读:
    ecmall挂件开发实例二(转)
    ecmall 挂件开发实例一
    ecmall公告挂件分析(转)--此挂件写法已有更新的写法。
    centos下svn的主要常用命令(解决商城系统添加的文件无法自动更新至svn服务器)
    lbypmall虚拟主机的设置
    解决EditPlus的默认编码方式有关问题(转)
    php mysql 字符集(三) (转)
    php mysql apache字符集(二) (转)
    php mysql apache 的字符集
    Android学习笔记——文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)学习
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/10812971.html
Copyright © 2011-2022 走看看