瀏覽器在獲得一個html之後，會“自上而下”加載，並且在加載過程中進行解析渲染。
如果含有JavaScript代碼，HTML頁面的執行過程也不會變。在調用js代碼時，就需要考慮代碼執行順序的問題，如下面例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var p = document.querySelector(".p");
console.log(p);
</script>
</head>
<body>
<p class="p">這是一段文字</p>
</body>
</html>
這段代碼用到了一個document.querySelector()方法，該方法會返回文檔中與指定選擇器或選擇器組匹配的第一個 html元素Element。 如果找不到匹配項，則返回null。
代碼的目的是獲取p元素，但執行結果是null。說明沒有找到class爲p的元素。
改進代碼後，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class="p">這是一段文字</p>
<script type="text/javascript">
var p = document.querySelector(".p");
console.log(p);
</script>
</body>
</html>
把js代碼放到<body>內，則得到我們要的結果，執行結果如下：