JavaScript之DOM概括

• 通过ID寻找 var x=document.getElementById("intro");
• 通过标签名寻找 var y=document.getElementsByTagName("p");
• 写入内容。document.write() 可用于直接向 HTML 输出流写内容。绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
• 改变HTML内容。 document.getElementById(id).innerHTML=new HTML
• 改变HTML属性。 document.getElementById(id).attribute=new valuedocument.getElementById("image").src="landscape.jpg";
• 改变HTML样式。 document.getElementById(id).style.property=new style
document.getElementById("p2").style.color="blue"; onclick="document.getElementById('id1').style.color='red'">(点击按钮时改变样式)
• 向button分配事件属性<button onclick="displayDate()">Try it</button>
• 删除某个节点var child=document.getElementById("p1"); child.parentNode.removeChild(child);

JavaScript和事件

来自于江水博客

基础事件操作

监听事件的方法：

内联HTML属性

<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

DOM属性绑定

element.onclick = function(event){
    alert('你点击了这个按钮');
};

事件监听函数

element.addEventListener(<event-name>, <callback>, <use-capture>);
//例子
var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click', function() {
    alert('你点击了这个按钮');
}, false);

• click、load、mouseover是事件的名字，响应事件的函数，如onclick、onload等叫做事件处理程序（或事件侦听器）。
• HTML事件处理程序<input type="button" value="click me" onclick="showme( )" />,事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。并且会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，也就是事件对象，通过event变量，可以访问事件对象，在函数的内部，this等于时间的目标元素。
• DOM0级事件处理程序：将一个函数赋值给一个事件处理程序属性，被认为是元素的方法。此时的事件处理程序实在元素的作用域中运行的，this引用当前元素。。可以通过this访问元素的任何属性和方法。也可以通过设置btn.onclick=null删除事件处理程序。
• DOM2级事件处理程序：定义了两个方法，addEventListener() removeEventListener()接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值。true 捕获阶段false冒泡阶段（多数情况）。好处是可以添加多个事件处理程序。使用addEventListener() 添加的函数必须通过removeEventListener()来进行消除。即：addEventListener()添加的匿名函数没办法消除。
• IE事件处理程序attachEvent() datchEvent()接收两个参数：事件处理程序名称、事件处理程序函数。并且使用attachEvent()下，事件处理程序会在全局作用域中运行，this等于window。调用两次attachEvent()添加事件处理程序，是按照相反的顺序被触发。
• 跨浏览器的事件处理程序.................P354...............