js中的DOM对象

DOM【Document Object Model】 ：文档对象模型。就是根据文档的标签层次在内存中形成的一个树状结构对象，就是为了方便操作节点

===================================================================
常用事件

onabort：用户终止页面加载。
onblur： 失去焦点
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus（和onblur相反） 用户获得焦点。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开键盘。
onload 页面完成加载。
onmousedown 用户按鼠标按钮。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。

事件的两个绑定方法
1、直接在标签中写

<input type="button" id="btn1" value="我点" onclick="$btn1();" />

<script type="text/javascript">
function $btn1() {
	console.debug('我点了');
}
</script>

2、根据Id获取元素来绑定

<input type="button" id="btn2" value="我点2" />

<script type="text/javascript">
var $btn2 = document.getElementById("btn2");//通过标签的id属性来获取对应节点
$btn2.onclick = function() {//匿名方法
	console.debug('我又点了');
}
</script>

但是这种绑定是有代码顺序要求的，js代码必须放在html之后，因为代码的执行顺序是从上到下，所以若js放在前面，那么是无法根据节点id来获取元素的

另一个解决方法：等待页面加载完毕之后（οnlοad），再执行js代码

<script type="text/javascript">
	window.οnlοad=function(){ 
    	alert("页面加载完成！"); 
	} 
</script>

js其实很简单，但是用起来还是有点麻烦，现在已经有很多对其进行封装的优秀框架，很香的~