HTML DOM 級別以及一些小坑 #14

文章首發在《你可能不知道的前端知識點》專欄，備份地址：https://github.com/justjavac/...

---

API (Web 或 XML 頁面) = DOM + JavaScript(腳本語言)

問題

問題從一個異常開始。

有網友寫了以下代碼：

function download() {
      console.log(1);
}

<a onclick="download()">下載</a>

當點擊按鈕的時候，卻報錯了：

Uncaught TypeError: download is not a function

報錯信息很奇怪：download 不是一個函數。若是咱們在 devtools console 執行 $0.download 會獲得 ""，一個空字符串。

咱們嘗試把 <a> 換成 <button>，能夠正常執行。

解讀

先說答案：HTML 5 中爲 <a> 增長了 download 屬性，因此在 a 上調用 download() 會提示 download is not a function，由於全部的屬性都是字符串。

一樣的坑還有：若是把表單裏面的某個控件 id 設置爲 submit，會致使表單提交 form.submit() 出錯，錯誤信息和這個相似，submit is not a function。

DOM

實際上沒有沒有 DOM0 級的官方標準。

DOM 是 Netscape 最先提出，而且與 JS 的誕生是在同一個時間。Netscape2 瀏覽器首先實現了 DOM，定義了獲取文檔中一些元素的入口，好比 document.forms 和 document.images，後期的瀏覽器爲了實現向後兼容，一樣也支持這些接口。在 JS 事件中，咱們常常說起的 DOM 事件，也是在這個階段定義的。其它比較經常使用的還有 CSS 訪問、DOM 遍歷、等。。。

DOM(Document Object Model) 的繁榮能夠追溯至 1990 年代後期微軟與 Netscape 的「瀏覽器大戰」，雙方爲了在 JavaScript 與 JScript 一決生死，因而大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了很多專屬事物，計有 VBScript、ActiveX、以及微軟自家的 DHTML 格式等，使很多網頁使用非微軟平臺及瀏覽器沒法正常顯示。

1998 年 10 月，DOM1 成爲了 W3C 的推薦標準。DOM1 級由兩個模塊組成：DOM核心（DOM Core）和DOM HTML。分別定義了：

• DOM核心：針對任何結構化文檔的標準模型
• DOM HTML：只針對HTML文檔的標準模型

DOM1 就像一個剛出生的孩子，確定有各類不足。因而各類瀏覽器都在原來的基礎上添加新的私有 API，好比 attachEvent 和 addEventListener，因而 W3C 又推出了 DOM level 2。而這個版本最大的變化就是 添加事件監聽的方法統一成了 addEventListener，並增長了第三個參數。（關於第三個參數能夠看我以前的文章 #6 ）

W3C 在 2000 年推出 DOM level 2，直到 9 年後的 2009 年，微軟發佈的 IE9 才遵循這個標準。WTF！！！

後來陸續推出了 DOM3 和 DOM 4。

參考連接

• DOM概述 - Web API 接口 | MDN
• 文檔對象模型 (DOM) - Web API 接口 | MDN
• 探索 DOM Level 3 Core 的關鍵特性 第 1 部分 第 2 部分
• DOM級別 | GCidea's blog