DOM文档对象模型
文档 --文档表示的就是整个HTML网页文档
对象 --对象表示将页面中的每一部分都转换为了一个对象
模型 --使用模型来表示对象之间的关系，这样方便我们来获取对象
HTML DOM 模型被构造为对象的树：
节点
如何查找 HTML 元素
document节点找到元素
document.getElementById(); //通过元素id找到一个HTML元素节点对象 document.getElementsByTagName(); //通过元素标签名找到一组HTML元素节点对象 document.getElementsByNama(); //通过name属性找到一组HTML元素节点对象
DOM查询
//document中有一个body属性 ，他保存的是bady的引用 //document.documentElement保存的是html根标签 //document.all代表页面中的所有元素 var body =document.body; var html =document.documentElement var all = document.all; document.getElementsByClassName("");
DOM添加
document.getElementById() // 获取某document中的子节点 document.createTextNode() // 创建新节点中的文本 document.createElement() //创建新节点 父节点.appendChild(li); //添加子节点 子节点.parentNode() //获取父元素 父节点.removeChild () //删除节点 父节点.replaceChild //替换子节点
事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
Javascript与HTML之间的交互是通过事件实现的。Javascript中常见的事件已在之前的博客中说到
事件对象event
当事件的响应函数被触发时、浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件相关的一切系信息，比如鼠标的坐标、那个按键被按下、滚轮的移动
<script type="text/javascript"> /* *键盘控制使div根据不同方向移动 */ window.onload = function(){ document.onkeydown = function(event){ event=event || window.event; console.log(event.keyCode); switch(event.keyCode){ case 37 : //alert("向左"); box1.style.left=box1.offsetLeft -10 +"px"; break; case 39 : //alert("向右"); box1.style.left=box1.offsetLeft +10 +"px"; break; case 38 : //alert("向上"); box1.style.top=box1.offsetTop -10 +"px"; break; case 40 : //alert("向下"); box1.style.top=box1.offsetTop +10 +"px"; break; } }; }; </script>
事件的冒泡（Bubble）
所谓事件的冒泡就是事件的向上传导，当后代元素上的事件被触发时，父代的相同事件也会被触发！
事件的委派
将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
