Js引入問題-Uncaught TypeError: Cannot read property 'appendChild' of undefined的分析與解決

時間 2021-03-11

標籤 app code blog 圖片文檔 function 渲染方法欄目 JavaScript 简体版

原文原文鏈接

在<head>內引入外部Js ，報錯出異常，顯示Uncaught TypeError: Cannot read property 'appendChild' of undefined，屬性未定義。爲何出現這種問題。查找好久發現這跟Js、DOM加載順序有關，因爲寫在了<head>內，它會先執行，可是此時因爲DOM還未加載完，而Js裏有須要獲取DOM中元素的語句要執行，這時就會出現異常，Js報錯Uncaught TypeError: Cannot read property 'appendChild' of undefined，沒法讀取未定義的屬性'appendChild'。app

解決方法很簡單，將Js的外部文件引入放在<body>中就行，讓整個頁面加載完後再執行Js就不會出現沒法讀取的問題了。（若是是內部Js的話，還能夠使用window.onload = function(){} 代碼包裹，也是在文檔加載以後再執行）code

---------------------------------------------------------------這是分割線------------------------------------------------------------

這裏再（複習）補充一下Js知識：

<head>內的Js可能會阻塞頁面的傳輸和頁面的渲染，也就是在<head>內的Js通常要先執行完後，纔開始渲染body頁面。因此儘可能不要將 JS 文件放在 head 內。能夠選擇在 DOM完成時，或者特定區塊後引入和執行 JavaScript。blog

因此爲了不<head>內引入的Js會阻塞頁面的傳輸和頁面的渲染，通常原則是，樣式在前面，DOM文檔，腳本在最後面。遵循先解析再渲染再執行Javascript這個順序。圖片

相關標籤/搜索