JS/JQuery获取不到页面元素的几种可能性

在写JS或者是JQuery的时候，使用$("#btn1")或者Domcument.getElementById获取相关标签元素的时候，偶尔会出现，获取不到相应元素的情况。报出以下错误等等：

Cannot read property 'XXX' of null 错误

Cannot read property 'visibility' of undefined

其实导致这样的问题的原因只有一种，那就是没有获取到相应的标签元素值，也就是 $("#btn1")取到的值是null，所以再去获取这个元素下面的属性的时候，自然就会报错了，而导致出现这样的情况的原因，可能有以下几种。

1.Html页面尚未加载完，在元素加载完成之前就调用元素

根据html页面的特性，是从上到下依次加载的，也就是遇到什么加载什么，所以，有可能JS方法会先于页面DOM元素加载。

如果在这个时候提前调用了JS方法，由于标签元素尚未加载完成，是找不到相应元素的，所以就会报出这种找不到元素的错误。

解决这类型的错误的方法也很简单，只需要：

把相应的JS代码放在html页面的最后面，保持在标签元素加载完后再调用相应的JS方法即可。

或者是使用：

JS的window.onload()方法

onload 事件会在指示页面包含图片等文件在内的所有元素都加载完成立即发生。

JQuery的ready()方法

ready事件会在文档结构已经加载完成（不包含图片等非文字媒体文件）后立即发生。

思想就是让JS方法在页面加载完全之后再运行，这样就可以保证相应元素一定加载完成了。

2.多层iframe嵌套，获取不到不同层级iframe的元素

当整个HTML页面使用了多层iframe嵌套的情况时，就会容易出现这种找不到相应内层iframe中的元素情况。

当我们去获取元素的时候，会默认去外层的iframe中寻找元素，如果是多层嵌套的iframe页面，那我们要去内层iframe中寻找元素的时候，就要通过iframe ID 切换到指定的iframe层中，再获取元素。

var obj=document.getElementById("Iframe").contentWindow;

obj.document.getElementById("menu").style.visibility="hidden";//隐藏元素

还有一种情况就是调用的JS方法处于内层iframe中，而外层窗口又没有相应ID时。

可以使用window.parent的方法，获取当前窗口的父窗口，再使用父窗口的方法获取相应元素。

window.parent.document.getElementById("null_box").getElementsByTagName("input")[0].style.visibility="visible";//恢复元素

当获取不到相应的标签元素的时候，要记住前端的一种思想

当这个元素标签获取不到的时候，可以尝试的去找这个元素标签的父标签。

按照这种寻找父亲的思想一层层往上找，当能获取到最外层父类时，再按照这种层级关系一层层往下找，就可以找到这个元素了。