Javascript Dom 相关知识整理

一、选择器

document.getElementById

document.getElementsByTagName

document.getElementsByClassName（IE 9）

document.getElementsByName

document.querySelector（IE 8）

document.querySelectorAll

querySelector和getElementBy系列的不同之处：

1. querySelector 属于W3C的Selectors API 规范，getElementBy 属于W3C的DOM API 规范

2. querySelector 被IE 8+浏览器支持，getElementsByClassName 被IE 9+支持

3. querySelector接收CSS选择器作为参数

4. querySelectorAll 返回的是一个static node list，而getElementsBy 返回的是一个 live node list。下面的demo 2将导致无限循环

var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// Demo 2
var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li")); 
}

二、DOM对象的属性

1. getAttribute和setAttribute可以设置dom对象的属性，支持IE 8+浏览器。通过dom.attributes.nodeValue同样可以获取属性的值，兼容性未知

2. parentNode可以获取父节点

3. firstChild、lastChild、childNodes可以获取子节点

4. nextSibling获取已知节点的下一个节点，previousSibling获取已知节点的上一个节点

三、DOM对象的方法

1. appendChild() 添加节点

2. cloneNode() 复制节点

3. insertBefore() 在当前节点的指定子节点之前插入

4. removeChild() 删除节点

5. replaceChild() 替换节点

四、事件

1. dom 0级事件（dom.onclick）只能绑定一次，而dom 2级事件（addEventListener）可以绑定多次

2. 当同一类型事件绑定多次时，addEventListener按照添加顺序执行。attachEvent按添加顺序倒序执行

3. 在addEventListner中，通过event对象拥有以下属性、方法

• target
• type
• stopPropagation()
• preventDefault()

4. 在attachEvent中，event对象拥有以下属性、方法　

• srcElement
• type
• cancelBubble（默认为false，设置为true可以取消冒泡）
• returnValue（默认为true，设置为false可以阻止默认行为）

夸浏览器的事件处理程序

var EventUtil = {

    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false)

        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
            
        } else {
            element['on' + type] = handler
        }
    },

    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)

        } else if (element.detachEvent) {
            element.detachEvent('on' + type, hander)

        } else {
            element['on' + type] = null
        }
    }
}