一：使用JavaScript可以給HTML中的某些標籤設置事件屬性的處理器（Handle）
在現代瀏覽器中都內置有大量的事件處理器。這些處理器會監視特定的條件或用戶行爲，例如鼠標單擊或瀏覽器窗口中完成加載某個圖像。通過使用客戶端的 JavaScript，可以將某些特定的事件處理器作爲屬性添加給特定的標籤，並可以在事件發生時執行一個或多個 JavaScript 命令或函數。
標籤的事件屬性是有HTML規範所設定的，所以對於某個標籤支持哪些事件屬性，可以通過查閱該標籤的事件屬性列表來獲得，例如，我們想在鼠標移動到某個超鏈接時，顯示一個提示對話框，其內容是歡迎來到“該超鏈接所鏈接的網站”。如何解決這個問題，首先我們查看HTML文檔（W3school）中關於標籤<a>的屬性，發現其有一個名爲onmouseover的事件屬性，查看ommouseover事件屬性的具體描述是：當鼠標指針懸停於某元素之上時執行腳本。顯然，這個事件屬性可以滿足我們的需求，所以我們應該爲該事件屬性註冊一個事件屬性處理器，事件處理器的值是一個或一系列以分號隔開的 Javascript 表達式、方法和函數調用，並用引號引起來。當事件發生時，瀏覽器會執行這些代碼。常用的註冊標籤的事件屬性處理器的方法有兩種：
方法一：直接在事件屬性的值中寫JavaScript代碼，例如
<a href="http://www.google.com" οnmοuseοver="alert('歡迎來到Google！');return true;">Welcome to Google.</a>
方法二：將JavaScript代碼封裝到一個函數中，然後再onmouseover事件屬性中用函數名來註冊該處理器，例如
<html>
<head>
<script type="text/javascript">
function hello()
{
alert('歡迎來到Google！');
false;
}
</script>
<title>My First page.</title>
</head>
<body>
<a href="http://www.google.com" οnmοuseοver="hello();">Welcome to Google.</a>
</body>
</html>
二：利用JavaScript操縱HTML頁面中的DOM對象
利用JavaScript對象可以操縱HTML中的DOM對象和Browser（瀏覽器）對象，這些對象如下圖所示：
通常在編寫JavaScript代碼時，我們都直接可以使用這些對象，例如獲取或設置對象屬性，使用對象提供的方法。 現在要思考的問題是，這些對象是如何被構造出來的，爲何我們可以直接使用這些對象，這些對象的屬性是由誰來設置的，這些對象的方法的代碼有在哪裏？
實際上上面這些所有的問題，都可以歸結爲一個問題：HTML頁面是如何被顯示的？專業一點的說法就是：HTML頁面是如何被渲染的。
當我們向服務器請求某個頁面時，服務器接受到我們的請求後將該頁面的.html文件該我們發送過來，我們知道.html文件就是一個普通的文本文件，那麼那些多彩的頁面是如何來的呢？以下我們假設，我們請求到了一個名爲index.html的文件。瀏覽器的頁面渲染引擎（實際上就是一個.EXE或.DLL）讀取index.html，在內存中以標籤爲結點來構造一棵DOM（Document Obejct Model）樹。如圖所示：
構造好DOM樹之後，我們的渲染引擎就可以通過對這棵樹以結點形式進行訪問，然後進行頁面的渲染。那有人就要問了，爲啥我們渲染引擎要構造這棵DOM樹，實際上這是由渲染引擎對頁面的渲染算法所決定的，試想以下，如果渲染引擎使用其他的渲染算法，而不是通過遍歷這棵DOM樹來渲染頁面，那麼從渲染引擎的角度上講就不需要構造這個DOM樹了，實際上從使得頁面具有動態效果的的角度上來看還是有必要構造這棵DOM樹的，因爲我們可以使用JavaScript代碼來操縱這些DOM對象從而達到動態設置或改變DOM對象的屬性這樣頁面也就會有所變化。
瀏覽器對象模型（BOM）的作用實際上是和 DOM 的使用是一樣的，就是爲了方便前端頁面的編程，通過使用BOM對象我們就可以操縱瀏覽器，做到動態定製瀏覽器的特性。
渲染引擎在對 index.html 構建DOM樹時,必然對<script>標籤做了特殊處理，因爲該標籤中包含的內容爲JavaScript代碼，它對於頁面的渲染沒有直接的關係（它是有間接的關係），其中的代碼需要經由JavaScript解釋引擎來處理，DOM樹構建好之後，DOM對象和BOM對象自然也就構造好了，那麼JavaScript中使用的對象例如：document，window，中的屬性也就設置好了，方法代碼的入口點，也就確定了，這樣就可以使用JavaScript代碼中的getElementById，getElementByName等方法，來獲取結點，設置屬性。
在編寫HTML頁面時一定要有這樣一個認識：JavaScript代碼在執行時是由JavaScript解釋引擎來進行執行的，而在JavaScript解釋引擎對<script>標籤中的代碼進行解釋執行的時候，瀏覽器的渲染引擎已經完成了對index.html文件的解析，從而DOM和BOM對象就已經構造好了，自然在JavaScript代碼中可以正確引用到結點對象。所以，<script>和其他標籤是分開處理的，同時處理的順序也不同。千萬不要認爲<script>標籤的執行與其位置有關，從而在使用某些方法時有所顧慮，例如：getElementById，千萬不要認爲我們要獲取的元素在JavaScript代碼所出現的<script>標籤之後出現，就對該方法的使用產生懷疑。