Question

function $(e){return document.querySelector(e)}

我将此作为querySelector的简写。

例如：$('.MainClass').style.display='none';

它实际上也有效，但Chromes Console记录器显示错误：

 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '[object HTMLDocument]' is not a valid selector.

这很奇怪，因为在使用$('cssslectorhere')时它仍然有效。我这样做的原因是因为我习惯了jQuery，我喜欢$符号。但我讨厌在控制台日志中看到这个错误，无论如何要删除它？

Answer 1

您尚未提供所有代码。在某个地方，你正在这样做：

$(document)

这适用于jQuery，但它不适用于querySelector，因为它不是选择器。

删除该用法，或更改$功能以处理document。

function $(e){
    return e === document ? document : document.querySelector(e);
}

Answer 2

听起来你的代码试图传递document对象而不是$(document)中的字符串选择器。您可以通过将代码更改为此来解决此问题：

function $(e){
    if (typeof e === "string") {
        return document.querySelector(e);
    } else {
        return e;
    }
}

然后，这将适用于您传递的任何DOM对象，例如document或document.body。

或者，你可以让它变得更加万无一失：

//Returns true if it is a DOM node
function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}

function $(e) {
    if (typeof e === "string") {
        return document.querySelector(e);
    } else if isNode(e) {
        return e;
    } else {
        throw new Error("arg in $(arg) must be selector string or DOM node");
    }
}

有关isNode()功能的讨论/参考，请参阅this prior answer。

隐藏函数$ console错误？

2 个答案: