W3C（ World Wide Web Consortium，万维网联盟）推荐的处理标记语言文档的标准编程接口API
DOM提供了对HTML或XML文档的访问模型，将文档作为一个树形结构，树的每个结点表示一个标签或标签内的文本项
XML（eXtensible Markup Language）
可扩展标记语言：通过用户自定义的标签，对数据进行结构化组织，用于数据交换
DOM基础－－什么是DOM
DOM是一种与浏览器、语言无关的编程接口，用于访问或修改XML文件中的内容
将XML（HTML）解析为节点树进行访问：//html也是xml的一中，DOM对于html的解析和读取也至关重要。
DOM树的节点类型：
Document－－顶层节点
Element
Attr－－属性名和属性值，没有子节点
Text－－标签与标签之间的文本，没有子节点
Node接口：定义节点对象的属性和方法
nodeName String 节点的名字；根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
previousSibling Node 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
appendChild(node) 将node添加到childNodes的末尾
removeChild(node) 从childNodes中删除node
BOM document ＝ HTML DOM document
var oHtml = document.documentElement; //<html>元素
访问指定节点方法1：getElementsByTagName()
返回一个包含所有的tagName（标签名）等于指定值的元素的NodeList，如：
var oImgs = document.getElementsByTagName("img");var oPs = document. getElementsByTagName(“p”);
var oImgs = oPs[0]. getElementsByTagName(“img”);
访问指定节点方法2：getElementsByName()
访问指定节点方法3：getElementById() 返回id等于指定值的元素，效率最高
处理节点的属性：
DOM定义了三个元素方法来帮助快速访问属性：
getAttribute(name)——等于attributes.getNamedItem(name).value； //顾名思义，获得属性值。
setAttribute(name, newvalue)——等于attribute.getNamedItem(name).value = newvalue；
removeAttribute(name)——等于attributes.removeNamedItem(name)。 //删除谁，直接说名字
创建和操作节点：
createElement()、createTextNode()、appendChild()
创建和操作节点：
removeChild()、replaceChild()和insertBefore() //appendChild是在已有节点之后插入节点
创建并加入文档片段：（适用于大量更新）
createDocumentFragment()
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
//实际上oFragment就不存在了，oFragment的子节点会变成插入的元素的直接子节点。
事件编程
事件是可以被 JavaScript 侦测到的行为，如鼠标单击、页面载入完成，交互式功能通过事件编程来实现
事件－－事件处理函数/监听函数
响应某个事件而调用的函数称为事件处理函数
方法一：直接在代码上加载事件
<div onclick = “alert(‘I was clicked’)”></div>
或者：
<div onclick = “createMsg()”></div>
<script type="text/javascript">
function createMsg() {
......}
</script>
方法二：使用DOM的方式获取对象，并加载事件
window.onload = function() {
var element = document.getElementById('choices');
var anchors = element.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++ ) {
anchors[i].onclick = popUpResult;}
//注意，onClick对应的是方法本身，而不是方法的结果，所以不要加（）！
}
popUpResult = function(evt){
var src = evt.srcElement; … …
}
方法三：使用标准的addEventListener方式和IE的attachEvent方式
try //标准方式
{ doms[i].addEventListener('mouseover',show_color,false);
doms[i].addEventListener('mouseout',hide_color,false);
}
catch(e) //IE方式
{ doms[i].attachEvent('onmouseover', show_color);
doms[i].attachEvent('onmouseout', hide_color);
}
事件对象在发生事件时创建，只有事件处理函数可以访问 e
IE中： oDiv.onclick = function(){
var oEvent = window.event; }
DOM中： oDiv.onclick = function(){
var oEvent = arguments[0]; }
或oDiv.onclick = function(oEvent)
//注意，在火狐中，不允许function(e){}这种事件样式出现，要写成标准的function(event e){}才能够使其识别。
属性和方法
altKey 是否按下alt键
button 按下鼠标的按钮，1－左键，2－右键…
clientX，clientY 鼠标在客户区中的位置
keyCode 按键代码，Unicode字符
type 事件的名称
srcElement 引起事件的元素
toElement 鼠标事件中，鼠标正在进入的元素
分为：用户操作事件（鼠标、键盘），浏览器HTML事件（网页载入、表单提交等）
鼠标事件
click 左键单击
dbclick 左键双击
mousedown 任一键单击
mouseout 鼠标移出某个元素时
mousemove 在某个元素上时持续发生
键盘事件
keydown 键盘按键产生
keypress 按键并产生字符时产生
keyup 释放按键产生
属性
keyCode //键盘按键码，如a和A都是65
charCode //Unicode字符
target（DOM）或者 srcElement（IE）
shiftKey、ctrlKey、altKey
浏览器HTML事件
load 页面完全载入后，window对象上触发，<img/>完全载入后，在其上触发，<object/>元素完全载入后，在其上触发
error javascript出错时
change 文本框内容发生变化时
submit 提交表单时，在<form/>上触发
focus与blur 控件获得或失去焦点时
scroll 滚动条卷动时触发