一、Dom 的基本概念
1、Dom：Document Object Model 文档对象模型；
2、Dom 是W3C组织推荐的处理可扩展标记语言的标准编程接口；
3、注意：
它可被任何编程语言诸如 Java、JavaScript和 VBScript 使用，只需要实现Dom规范。
通过Dom，可以访问所有的 HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
在JS中，我们通过使用Dom规范，使用JS语言来处理HTML界面；
二、什么是Dom对象
在解释Dom对象之前，先要解释一下什么是Js对象。
1、JS对象官方解释：
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。
比如：声明一个 JavaScript 变量时：
vartxt = "Hello";
这时已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性length。对于上面的字符串来说，我们可以设置length的值是 5。字符串对象同时拥有若干个内建的方法。
属性：
txt.length=5
方法：
txt.indexOf()
txt.replace()
txt.search()
那么，什么是Dom对象呢？
在JS中通过Dom拿到HTML中的标签，为DOM对象，它定义了访问HTML/XML文档对象的一套属性、方法和事件。
比如：
（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
（2）其次，看到的是网页文档的内容，即document文档。
（3）定位对象：
window.document.myform.text1
或
document.myform.text1
因为window窗口对象是所有页面的根对象，所以常常省略。我们在代码中经常会写成：
vartemp1= document.getElementById('btn');
vartemp2 = document.getElementsByName('btn');
这就是在获取Dom中的对象，并获取它的属性；
三、注册Dom事件
Dom内部提供了很多个事件可以使用，比如：onclick；
使用方法：
1、动态注册：
<input type="button" id="btnShow2"value="显示" /> <script> //推荐使用这种方法注册事件 //好处：实现了代码分离（html和js）；可以使用this document.getElementById('btnShow2').οnclick= function () { alert(this.value); } //这里使用了匿名函数，动态加载 </script>
2、直接在html元素上注册
<html> <head> </head> <body> <p id="p">点击按钮就执行displayDate()函数</p> <button id="id" οnclick="displayDate()">点击</button>//在此处onclick中只需要写出事件发生后对应处理的js代码即可 <script> function displayDate(){ document.getElementById("p").innerHTML="fighting"; }; </script> </body> </html>
Onload 事件加载
事件Onload:当所有节点及节点的内容加载完成后，会触发此事件；
<script> //页面中的所有节点加载完成后，会触发此事件 οnlοad= function () { //当节点存在后，找到并注册点击事件 document.getElementById('span1').οnclick= function () { alert('ok'); } } </script> <body> <span id="span1">点击显示</span> </body>
总结：
在JS中，我们通过使用Dom规范，使用JS语言来处理HTML界面；
因为在代码中实践的欠缺，所以，只是对概念有了些许的理解，希望大家包含。
