嵌套类的Javascript CSS选择器

Question

I am creating a CSS selector for homework. I have managed to extract and get single selectors - eg #_id , but I cannot work out how to get a result for nested ones such as : div#_id._class [NOTE: I cannot use any libraries to do this or querySelectorAll ]

The pseudo-code below is an example of what I currently have:

if (regex match for class) {
    for (a in match for class) {
        if (a.indexOf('.') > -1) {
            var split_ = a.split(".");
            var dot = split_[0];
            var class_ = split_[1];
            array_of_elements = document.getElementsByClassName(class_);
        }
    }

The problem is when the selector is nested I can't extract the whole thing using a similar method. Eg look for an id, look for a class. Can anyone point me in the right direction?

else if (is id) {
    split by ("#");
    for (each result) {
        if (has class ('.')) {
            array_elements = document.getElementById(result_ID)
                             .getElementsByClassName(result_CLASS_NAME));
        } else {
            array_elements = (document.getElementsByTagName(result));
        }
    }

Answer 1

What you mentioned is actually called a sequence of simple selectors .

div#_id._class

It consitst of three simple selectors div , #_id , ._class

What you need to do is get elements by tag name, and then check for matches on all of the remaining simple selectors. I'll give you an idea here:

function qSelector(sequence) {
    var tagName = getTag(sequence) || '*'; // 'div'
    var ids = getIDs(sequence); // ['_id']
    var classes = getClasses(sequence); // ['_class']
    var els = document.getElementsByTagName(tagName);
    return [].filter.call(els, function (el) {
        for (id in ids) { if (el.id != id) return false; }
        for (cls in classes) { if (el.className not contains cls) return false; }
        return true;
    });
}

This is more versatile than your approach and can be easily generalized to work with selectors containing spaces.

I'll leave the implementation of the get… helpers to you.