Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
程序员文章站
2022-05-19 10:45:35
...
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