DOM增加元素属性/dom事件

增: 元素(标签),节点
创建元素三种方法:
1 document.write(“html”);
2 元素对象.innerHTML = “html”
3 document.createElement(“标签名”); 创建元素对象,返回值
元素对象.appendChild(子元素对象); 添加
给body添加:document.body.appendChild(子元素对象);
注:建议使用第三方法,性能最好
元素对象.insertBefore(要插入的元素,已有元素); 在某元素之前插入元素
元素对象.removeChild(元素对象) 移除元素
元素对象.replaceChild(新元素对象,已有元素) 替换元素
节点层级操作:
当前元素.parentNode 当前节点的父节点
当前元素.childNodes 当前节点的子节点
当前元素.children 当前节点的子元素
当前元素.nextSibling 当前节点的后一个兄弟节点
当前元素.nextElementSibling 当前节点的后一元素
当前元素.previousSibling 当前节点的前一个兄弟节点
当前元素.previousElementSibling 当前节点的前一元素
当前元素.firstChild 当前节点的第一个孩子节点
当前元素.lastChild 当前节点的最后一个孩子节点
事件:
三要素:1 事件源 2 事件类型 3 事件处理程序
事件的使用:
1 在标签行内能过属性使用事件
2 通过js注册事件:
事件源.事件类型 = function(){}
事件源.addEventListener(“事件类型”,处理程序,布尔值);
事件类型:字符串,不加on
处理程序: 匿名函数或调用函数
布尔值:
事件源.attachEvent(); //IE浏览器
//有兼容性的注册事件函数

function addEvent(element,eventType,funName,broad){
	if(element.addEventListener){
		element.addEventListener(eventType,funName,broad);
	}else if(element.attachEvent){
	    element.attachEvent("on"+eventType,funName);
	}else{
	    element["on"+eventType] = funName;
	}
}

3 移除事件
事件源.事件类型 = null;
事件源.removeEventListener(“事件类型”);
事件源.detachEvent(“事件类型”);
//有兼容性的移除事件函数

function removeEvent(element,eventType,funName,broad){
				if(element.removeEventListener){
					element.removeEventListener(eventType,funName,broad);
				}else if(element.detachEvent){
					element.detachEvent("on"+eventType,funName);
				}else{
					element["on"+eventType] = null;
				}
			}

事件三个阶段:
1 捕获
2 当前
3 冒泡
注:event.eventPhase