HTML,DOM和javascript的關係

時間 2019-11-24

原文原文鏈接

一：使用JavaScript能夠給HTML中的某些標籤設置事件屬性的處理器（Handle）javascript

在現代瀏覽器中都內置有大量的事件處理器。這些處理器會監視特定的條件或用戶行爲，例如鼠標單擊或瀏覽器窗口中完成加載某個圖像。經過使用客戶端的 JavaScript，能夠將某些特定的事件處理器做爲屬性添加給特定的標籤，並能夠在事件發生時執行一個或多個 JavaScript 命令或函數。html

標籤的事件屬性是有HTML規範所設定的，因此對於某個標籤支持哪些事件屬性，能夠經過查閱該標籤的事件屬性列表來得到，例如，咱們想在鼠標移動到某個超連接時，顯示一個提示對話框，其內容是歡迎來到「該超連接所連接的網站」。如何解決這個問題，首先咱們查看HTML文檔（W3school）中關於標籤<a>的屬性，發現其有一個名爲onmouseover的事件屬性，查看ommouseover事件屬性的具體描述是：當鼠標指針懸停於某元素之上時執行腳本。顯然，這個事件屬性能夠知足咱們的需求，因此咱們應該爲該事件屬性註冊一個事件屬性處理器，事件處理器的值是一個或一系列以分號隔開的 Javascript 表達式、方法和函數調用，並用引號引發來。當事件發生時，瀏覽器會執行這些代碼。經常使用的註冊標籤的事件屬性處理器的方法有兩種：前端

方法一：直接在事件屬性的值中寫JavaScript代碼，例如java

<a href="http://www.google.com" onmouseover="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" onmouseover="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>標籤以後出現，就對該方法的使用產生懷疑。

相關標籤/搜索

html+javascript

javascript+html

html+css+javascript+html

html&&css&&javascript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。