Question

我正在为家庭作业创建一个CSS选择器。我设法提取并获得单个选择器 - 例如#_id，但我无法弄清楚如何获得嵌套的结果，例如：div#_id._class [注意：我不能使用任何库来执行此操作或querySelectorAll]

下面的伪代码是我目前拥有的一个例子：

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_);
        }
    }

问题是当选择器嵌套时我无法使用类似的方法提取整个事物。例如。寻找一个id，寻找一个类。有人能指出我正确的方向吗？

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

您提到的实际上称为简单选择器序列。

div#_id._class

它包含三个简单选择器 div，#_id，._class

您需要做的是按标签名称获取元素，然后检查所有剩余简单选择器的匹配项。我会在这里给你一个想法：

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;
    });
}

这比你的方法更通用，可以很容易地推广到包含空格的选择器。

我会将get…助手的实施留给您。

嵌套类的Javascript css选择器

1 个答案: