Javascript 检查多个父标签

Question

我构建了一个非常简单的 contenteditable 编辑器，它允许执行以下操作:

1. A:链接
2. H1、H2标签
3. 粗体、斜体和下划线

以上都是通过 document.execCommand 完成的并且工作正常。我的问题是检查 onmousedown/up 焦点区域是否有父标签(一个或多个)。

我已经成功地编写了一个函数来检查和更新我的编辑器的 CSS(如果存在特定标签)。但这并不能解释多个标签，我相信一定有一种简单的方法可以做到这一点，但我忽略了一些东西。

到目前为止我的代码(目前只寻找一个标签):

document.onmousedown = triggerTextSelection;
document.onmouseup = function (event) {
    setTimeout(function () {
        check(event);
    }, 1);
};

function check() {
    // The same applies for Bold,Italic,Underline etc...
    if (hasParentWithTag(getFocusNode(), 'blockquote')) {
        $('.quote-btn').addClass('btn-active');
    } else {
        $('.quote-btn').removeClass('btn-active');
    }
}

function getFocusNode() {
    return document.getSelection().focusNode;
}

function hasParentWithTag(node, nodeType) {
    while (node.parentNode) {
        if (node.nodeName.toLowerCase() === nodeType) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

感谢任何帮助或指导。

Answer 1

您可以创建一个要测试的节点类型数组，然后检查节点名称是否在数组中，而不是检查节点名称是否等于节点类型