script位置影響執行時機以及script的執行和DOM載入之間的微妙關係
阿新 • • 發佈：2019-01-23
除錯過程中的思考：
==================================================================
DOM的載入和script執行之間的關係:先執行script程式碼，再載入DOM。
在執行document.getElementsByTagName('div');時，還沒有載入div元素
所以獲取不到div元素。
==================================================================
<html>
<head>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛澤東==============");
}
</script>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>會當水擊三千里</p>
</div>
</body>
</html>
==================================================================
轉換script的位置將會出現什麼問題：
載入完DOM元素後，執行script。此時可以獲取div元素。
==================================================================
<html>
<head>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>會當水擊三千里</p>
</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛澤東==============");
}
</script>
</body>
</html>
==================================================================
換成事件觸發機制又會怎樣：在點選按鈕觸發事件時，執行create函式。
再點選之前DOM已經載入完畢，而且這個事件可以看作button的方法屬性。
==================================================================
<html>
<head>
<script type="text/javascript">
function create() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛澤東==============");
}
}
</script>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>會當水擊三千里</p>
</div>
<input type="button" value="create" onclick='create()'/>
</body>
</html>
==================================================================
學會使用console.log();定位錯誤。
如何定位?折半查詢，縮小搜尋範圍。
定位到錯誤後，反思解決。
做筆記，記錄下這類錯誤。
==================================================================
==================================================================
DOM的載入和script執行之間的關係:先執行script程式碼，再載入DOM。
在執行document.getElementsByTagName('div');時，還沒有載入div元素
所以獲取不到div元素。
==================================================================
<html>
<head>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛澤東==============");
}
</script>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>會當水擊三千里</p>
</div>
</body>
</html>
==================================================================
轉換script的位置將會出現什麼問題：
載入完DOM元素後，執行script。此時可以獲取div元素。
==================================================================
<html>
<head>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>會當水擊三千里</p>
</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛澤東==============");
}
</script>
</body>
</html>
==================================================================
換成事件觸發機制又會怎樣：在點選按鈕觸發事件時，執行create函式。
再點選之前DOM已經載入完畢，而且這個事件可以看作button的方法屬性。
==================================================================
<html>
<head>
<script type="text/javascript">
function create() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛澤東==============");
}
}
</script>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>會當水擊三千里</p>
</div>
<input type="button" value="create" onclick='create()'/>
</body>
</html>
==================================================================
學會使用console.log();定位錯誤。
如何定位?折半查詢，縮小搜尋範圍。
定位到錯誤後，反思解決。
做筆記，記錄下這類錯誤。
==================================================================