JavaScript: Masukkan pemilih jenis yang ditentukan (hanya tiga pemilih CSS mudah seperti id, kelas dan tagName disokong)

Question

1. Tulis fungsi JavaScript dan masukkan pemilih jenis yang ditentukan (hanya tiga pemilih CSS mudah, id, kelas dan tagName, perlu disokong, tidak perlu serasi dengan pemilih gabungan)

Masalahnya ialah: Saya tidak dapat memahami padanan biasa berikut, var reg = /^(#)?(.)?(w+)$/img;var regResult = reg.exec(selector);, butiran adalah seperti berikut

var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id选择器
                if(regResult[1]) {
                    ...
                }
                //如果是class选择器
                else if(regResult[2]) {
                    ...
                      
                }
                //如果是标签选择器
                else if(regResult[3]) {
                    ...
            }
}
       

Answer 1

. rentetan Berakhir

/^(#)?(.)?(w+)$/imgKandungan biasa:
^ bermaksud bermula dengan xxx $ bermakna berakhir dengan xxxx
(#) boleh dengan atau tanpa #
(.) Ia boleh dengan atau tanpa
(w+) sepadan dengan satu atau lebih perkataan

Answer 2

/^(#)?(.)?(w+)$/img

1. (#)? padanan ID

2. (.)? Padankan nama kelas

3. (w+) Selebihnya ialah nama tag atau ID atau Nama kelas tertentu dalam [1,2]

Answer 3

Xie Yao.

Sila rujuk @trionfo1993

Answer 4

Berikan anda serpihan dom dalam utils yang saya tulis

class dom extends base{

    constructor(){
        super();
    }
    // 根据ID获取指定DOM
    byId(_id){
        return document.getElementById(string.replace(_id,'#',''));
    }
    // 根据ID或Class获取DOM
    get(_id){
        if(_id.indexOf('.') > -1){
            let list = document.getElementsByClassName(string.replace(_id,'\.',''));
            this._object = Array.from(list);
        }else{
            this._object = [this.byId(_id)];
        }
        
        return this;
    }
    // 根据Name获取相关DOM
    byName(_name){
        let list = document.getElementsByName(_name);
        if(list.length > 0)
            return Array.from(list);
        return null;
    }
    // 返回dom原型
    get valueOf(){
        if(this._object.length >1){
            return this._object;    
        }
        return this._object[0];
    }
    // 基础DOM操作方法
    _dom_ctrols(_func){
        for(let info of this._object){
            _func(info);
        }
        return this;
    }
    // 增加class
    addClass(_name){
        this._dom_ctrols((info)=>{
            if(info.className.indexOf(_name) == -1){
                info.className += ' ' + _name;
            }
        })
        return this;
    }
    // 删除class
    removeClass(_name){
        this._dom_ctrols((info)=>{
            info.className = string.replace(info.className,_name,'');
        })
        return this;
    }
    // 显示？隐藏DOM主方法
    _hide_show(_value){
        this._dom_ctrols((info)=>{
            info.style.display = _value;
        });
    }
    // 隐藏DOM
    hide(){
        this._hide_show('none');
    }
    // 显示DOM
    show(){
        this._hide_show('block');
    }