Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

• 复制了一份别人写的自定义的显示隐藏方法，准备在我的js中用一下，结果使用后刚一运行就报错了。

问题代码如下所示：

//自定义的控制显示或隐藏的方法，该方法接收两个参数，参数1表示要显示的元素，参数2表示要隐藏的元素（参数可以为空）
function showOrhide(show,hide){
    console.log($(show));//后来调试代码加上的，为了定位问题
    console.log($(hide));//后来调试代码加上的，为了定位问题
    if($(show)){
        $(show).show();
    }
    if($(hide)){
        $(hide).hide();
    }
    if(hide === ".share-friends-page"){
        $(".share-btn").removeAttr('isClick');
    }
}
//给按钮注册点击方法
$(".share-btn").click(function(event) {
    $(".share-btn").attr("isClick","yes");
    showOrhide(".share-friends-page","");//此处调用定义的显示或隐藏的方法【会报错】
});

报错详情：

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

具体错误如下图所示：

问题说明：

未捕获的类型错误：不能在“窗口”环境上调用执行“getComputedStyle”方法：因为参数1不是“元素”类型。

• 看了错误后就懵逼了，因为自己也是第一次遇到这种错误，也不知道错在哪里了，只好去问度娘，但是效果并不奏效，没有得到什么实际的帮助。
• 最后，就打算自己调试一下代码，准确定位一下问题的所在。

错误调试：

说明：
在调用showOrhide(".share-friends-page","");方法时，第一个参数有值，而第二个参数为空。为了定位问题，然后在方法内部调用console.log()方法输出了第二个参数$(hide)，即console.log($(hide));。

经过调试问题就显现了，得到的最终结果如下图所示：

分析：

• 显而易见，传值为空的第二个参数，输出的$(hide)居然不为空，而是输出了document元素。
• 按道理来说，$("")应该是输出空才对呀，而且也不应该报错，毕竟代码是原封不动复制粘贴过来的，并没有进行改动。
• 这就奇怪了，为什么别人写的代码用起来就没问题，我按部就班的使用就出错了呢？这不应该呀，对此我自己也很无奈。
• 然后，我就在别人原先写的代码上进行了调试，同样是输出了$("")，结果却出现了差异。

调试结果如下图所示：

分析：

• 很惊奇的发现，别人代码中的$("")输出的是空，没错，而且我的用法也没错呀。
• 为什么我照搬过来的代码中的$("")却输出了document元素？然后我就仔细对比了一下代码，终于被我发现了问题所在。

定位问题

原来是引用了不同的jQuery版本导致的，别人引用的版本是：

<script src="../../statics/system/jquery-1.8.3.js"></script>

而我引用的版本是：

<script src="../../statics/system/jquery-1.3.2.js"></script>

说明：

• 就这样一个小小的问题，困扰了我那么久，还一直找不出问题所在，我也实属无奈，好在问题被我发现了。
• 我在引入jQuery时选择了一个低版本的，当时想的是为了更好的向老版本浏览器兼容。
• 现在想想完全没有必要，虽说没用最新版的jQuery，但是也不能用太低版本的jQuery。
  因为低版本会出现一些没有修复的bug，而这些bug出现的地方在我们没有遇到之前并不清楚。
• 所以说在引入jQuery时也是要有一定的选择的，而不是随便拿来一个就用，这样很可能会给自己日后的开发留下一些隐患的。【大家应该在jQuery版本的选择这方面留意一些。】

对错误的调试结果的分析

为了确认低版本的jQuery对$("")的处理方式为$(document)，我做了如下图所示的操作：

分析

• 首先，$(hide)输出了对应的jQuery对象。
• 其次，$(hide)[0]将jQuery对象转化为了DOM对象，并进行输出。
• 然后，通过DOM对象的nodeName属性，来得到当前对象的节点名称。
  因为nodeName属性可依据节点的类型返回其名称。对于元素节点，将返回标签名；而对于属性节点，则返回属性名。
• 接着，对于nodeType这个DOM属性，会返回指定节点的节点类型，并且是以数字的形式返回的。
• 至于其他的节点类型，大家可以查看下图，也可以点击此处查看W3C中对Node Types的具体介绍：HTML DOM nodeType 属性 。

已知，总共存在 12 种不同的节点类型。
对常见的节点类型而言：对于元素节点，该属性将返回1；而对于属性节点，则该属性返回2。

由上图可知，nodeType的返回值为9，说明该DOM元素的节点类型为Document。

nodeType为1，即Element。//代表元素，
nodeTytpe为9，即Document。//代表整个文档，（DOM树的根节点）

下图展示了不同的节点类型，nodeName和nodeType属性的不同返回值。

说明：根据nodeName属性的返回值也能判断出当前的节点类型。

nodeType为1，即Element。//nodeName返回元素名。
nodeTytpe为9，即Document。//nodeName返回#document。

结束语

发现的问题：不同的jQuery版本对$("")的处理不同。

• 高版本的jQuery会将$("")处理为空("")；

//jQuery v1.8.3 Date:2012-11-14 
//对$("")的处理方式：init {}
→_proto_:Object(0)

• 而低版本的jQuery则将$("")处理为document对象。

/*jQuery v1.3.2 Date:2009-02-19
对$("")的处理方式：init [document, context: document]*/
→0:document
→context:document
    length:1
→_proto_:Object