用于嵌套类的 Javascript CSS 选择器答案

【问题标题】：Javascript css selector for nested classes用于嵌套类的 Javascript CSS 选择器
【发布时间】：2014-07-15 16:13:30
【问题描述】：

我正在为作业创建一个 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));
        }
    }

【问题讨论】：

这应该是伪代码吗？因为if(regex match for class){ 作为 javascript 对我来说没有任何意义。
是抱歉伪代码
那么你可以用什么？您尝试实现哪些 CSS 选择器模式？有many...
我认为您实际上是指 sequence of simple selectors，而不是 嵌套类。措辞在这里很重要:)

标签： javascript css class nested pseudocode

【解决方案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… 助手的实现留给你。

【讨论】：