HTML DOM 级别以及一些小坑

API (Web 或 XML 页面) = DOM + JavaScript(脚本语言)

问题

问题从一个异常开始。

有网友写了如下代码。

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

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

当点击按钮的时候，却报错了：

UncaughtTypeError:downloadisnotafunction

报错信息很奇怪： download 不是一个函数。如果我们在 devtools console 执行 $0.download 会得到 ""，一个空字符串。

我们尝试把 <a> 换成 <button>，可以正常执行。

解读

先说答案：HTML 5 中为 <a> 增加了 download 属性，所以在 a 上调用 download() 会提示 downloadisnotafunction，因为所有的属性都是字符串。

同样的坑还有：如果把表单里面的某个控件 id 设置为 submit，会导致表单提交 form.submit() 出错，错误信息和这个类似， submitisnotafunction。

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 [Web性能优化]Chrome 51 引入新特性：Passive event listeners ）

W3C 在 2000 年推出 DOM level 2，直到 9 年后的 2009 年，微软发布的 IE9 才遵循这个标准。WTF！！！

后来陆续推出了 DOM3 和 DOM 4。