DOM：Document Object Model(文本对象模型)
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型 DOM 是针对xml(html)的基于树的API
DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟） DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
节点及其类型：
例1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1. 当整个 HTML 文档完全加载成功后触发 window.onload 事件.
//事件触发时, 执行后面 function 里边的函数体.
window.onload = function(){
//2. 获取所有的 button 节点. 并取得第一个元素
var btn = document.getElementsByTagName("button")[0];
//3. 为 button 的 onclick 事件赋值: 当点击 button 时, 执行函数体
btn.onclick = function(){
//4. 弹出 helloworld
alert("helloworld");
}
}
</script>
</head>
<body> <button>ClickMe</button> </body>
</html>
js代码写入方式：
第一种：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body> <!-- HTML 代码和 JS 代码耦合在一起. -->
<button onclick="alert('helloworld...');">ClickMe</button> </body>
</html>
第二种：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title> </head>
<body> <button>ClickMe</button> </body>
</html> <!--
在整个 HTML 文档被加载后, 获取其中的节点.
把 script 节点放在 html 文档的最后
但不符合些 JS 代码的习惯.
-->
<script type="text/javascript"> //1. 获取 button
var btns = document.getElementsByTagName("button");
alert(btns.length); //2. 为 button 添加 onclick 响应函数
btns[0].onclick = function(){
alert("helloworld!!");
} </script>
第三种：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window.onload 事件在整个 HTML 文档被完全加载后出发执行.
//所以在其中可以获取到 HTML 文档的任何元素.
window.onload = function(){ }
</script>
</head>
<body> <button>ClickMe</button> </body>
</html>