在寫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”;//恢復元素
當獲取不到相應的標籤元素的時候,要記住前端的一種思想
當這個元素標籤獲取不到的時候,可以嘗試的去找這個元素標籤的父標籤。
按照這種尋找父親的思想一層層往上找,當能獲取到最外層父類時,再按照這種層級關係一層層往下找,就可以找到這個元素了。