JavaScript之DOM入门
DOM（Document Object Model，文档对象模型）是JavaScript中的重要组成部分，本文将主要介绍之。
JavaScript的组成包含三大部分，分别为ECMAScript、DOM和BOM。JavaScript组成，如下图所示：
☆ECMAScript
ECMAScript是JavaScript语言的规范，是JavaScript的核心内容，它描述了语言的基本语法和数据类型等。ECMAScript是一套标准，定义了JavaScript编码方式与语言特性。
☆DOM
文档对象模型（Document Object Model，简称DOM）是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口（API）。网页上组织页面（或文档）的对象被组织在一个树形结构中，通过DOM操作的方式可以让页面跟JavaScript进行通信或交互。DOM树展示，如下图所示：
DOM用于操控HTML和CSS的标签结构（即节点）——用 DOM API可以轻松地删除、添加和替换节点，从而使开发者对文档的内容和结构具有空前的控制力。
☆BOM
浏览器对象模型（Browser Object Model，简称BOM）是对浏览器窗口进行访问和操作的功能接口。例如，弹出新的浏览器窗口、获取浏览器信息等。注意，BOM是作为JavaScript的一部分而不是作为W3C组织的标准，每款浏览器都有自己的实现方式，这会导致BOM代码的兼容性不如ECMAScript和DOM代码的兼容性。
下面开始介绍DOM（Document Object Model，文档对象模型）的使用。
获取元素
document文档指整个页面的根对象（最外层对象），通过document文档获取页面中的具体HTML元素。注意document文档的类型为对象类型，即typeof document返回object值，因此，通常document文档亦称document对象。document文档页面的最外层如图所示。
document文档页面的最外层如下图所示：
document对象常见属性如下：
document.doctype 用于获取或设置文档头信息
document.documentELement 用于获取或设置<html>标签
document.head 用于获取或设置<head>标签
document.body 用于获取或设置<body>标签
document.title <用于获取或设置title>标签。
可以先通过给元素添加id属性，如：
<… id="xxx" …>
然后，通过document对象的getElementById()方法——把id值通过字符串形式放到此方法的小括号中，获取元素。除了获取元素外，也可以对元素的属性进行设置。
在前面，讲解了DOM操作HTML元素的属性，同样对HTML元素的style属性也能够获取和设置。
getElementById()方法可以获取到指定id的HTML元素。那么，如何获取一个HTML元素集合呢？例如，一组<li>标签。可以通过getElementsByTagName()方法来实现，该方法通过指定HTML标签名的方式来获取。
注意，一组标签即可以在整个document文档下获取，也可以在指定的祖先元素下获取。此方式与getElementById()方法不一样，getElementById()方法只能在document文档下获取，因为id属性具有唯一性，不存在包含关系。
获取到元素集合后，如何去操作？在JavaScript语法中不能直接去操作整体集合，必须分别操作集合的每一项元素。可以通过“[]+下标”的方式获取指定集合中的某一项元素，下标从0开始。例如，li[0]表示li集合中的第一个元素，li[1]表示li集合中的第二个元素。
可以通过集合对象下面的length属性获得集合内元素的个数。获取到集合的长度，再配合循环语句，就可以对一组HTML元素集合操作。
除了可以通过标签的方式获取集合，还可以通过class属性的方式获取集合。getElementsByClassName()方法与getElementsByTagName()方法使用方式类似。
下面给出九九表一个例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function secondFunction(){
var div = document.getElementById("div1");
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
div.innerHTML += j + "*" + i + "=" + (i*j) ;
div.innerHTML += " "
}
div.innerHTML += "<br>" ;
}
}
</script>
</head>
<body>
<input type="button" οnclick="secondFunction()" value="显示九九表">
<div id="div1"></div>
</body>
</html>