查找元素

1.getElementById
2.getElementsByTagName
3.getElementsByClassName
4.querySelector
5.querySelectorAll

get的方法是動態(tài)查詢的，后面添加的也能查詢。query的方法是靜態(tài)的，只查找一次，后面的不會在添加。

元素類型
1.元素節(jié)點(diǎn)
2.屬性節(jié)點(diǎn)
3.文本節(jié)點(diǎn)
8.注釋節(jié)點(diǎn)
9.document節(jié)點(diǎn)
10.documentFragment

查找節(jié)點(diǎn)的方法：
parentNode：找父節(jié)點(diǎn)
childNodes：所有子節(jié)點(diǎn)（類數(shù)組）
firstChild：第一個子節(jié)點(diǎn)
lastChild：最后一個子節(jié)點(diǎn)
nextSibling：下個兄弟節(jié)點(diǎn)
previousSibling：上個兄弟節(jié)點(diǎn)

節(jié)點(diǎn)的方法
nodeName：獲取節(jié)點(diǎn)名字，只讀不能修改
nodeValue：只能獲取文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)的值，可修改
nodeType（最常用）：可以獲取節(jié)點(diǎn)類型（int）
attribute：獲取屬性節(jié)點(diǎn)的數(shù)組
hasChildNodes：是否有子節(jié)點(diǎn)

DOM結(jié)構(gòu)樹
??????????? Document---HTMLDocument（XMLDocument）
Node---CharacterData---Text、comment
??????????? Element---HTMLElement---HTMLBodyElement、HTMLHeadElement...
??????????? Attr

封裝函數(shù)，對e節(jié)點(diǎn)傳入一個n值，若為正，則返回后面第nge兄弟元素節(jié)點(diǎn)，若為負(fù)，返回前面第n個元素節(jié)點(diǎn)，若為0則返回自己

function retSibling(e, n) {
    while (e && n) {
        if (n > 0) {
            if (e.nextElementSibling) {
                e = e.nextElementSibling;
            } else {
                //IE8沒有nextElementSibling
                for (e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
            }
            n--;
        } else {
            if (e.previousElementSibling) {
                e = e.previousElementSibling;
            } else {
                for (e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
            }
            n++;
        }
    }
    return e;
}

腳本化css

window.getComputedStyle(elem,null)..獲取元素真實(shí)能看到的屬性，第二個參數(shù)是偽元素，只讀，返回樣式的值經(jīng)過轉(zhuǎn)換（em會轉(zhuǎn)換為px）
ele.currentStyle..在IE8下獲取元素屬性，只讀，返回樣式的值不會經(jīng)過轉(zhuǎn)換

offsetLeft/offsetRight/offsetWidth/offsetHeight/offsetParent:其頂部是否有定位的元素，有就返回

event

事件處理模型 冒泡（自底向上）/捕獲（自頂向下）（只有chorme實(shí)現(xiàn)）
捕獲：elem.addEventListener('click',function(){},true);
先捕獲，后冒泡----誰先綁定，誰先執(zhí)行

focus,blus,select,change,reset,submit不冒泡

取消默認(rèn)事件 href="javascript:Void();"
Void直接返回里面的參數(shù)，也能取消默認(rèn)事件

event || window.event(只適用于IE)

事件源對象
1.event.target 火狐瀏覽器
2.event.srcElement IE瀏覽器
3.chorme都有

div.setCapture():把任何地方獲取的事件都觸法在div上
div.releaseCapture()

e.button = 2(右鍵)
e.button = 1(左鍵)

移動端是touchstart touchmove touchend

鍵盤事件
keydown keyup keypress
keydown>keypress>keyup
keydown:可以相應(yīng)任何按鍵
keypress：只可相應(yīng)字符按鍵,返回ascii碼，也能轉(zhuǎn)換為字符
屬性（which是鍵盤上的位置，charCode是acsii值）

domtree csstree rendertree（渲染樹）
window.onload是要等所有的dom css render加載完之后，最后加載

//封裝函數(shù)，對e節(jié)點(diǎn)傳入一個n值，若為正，則返回后面第nge兄弟元素節(jié)點(diǎn)，若為負(fù)，返回前面第n個元素節(jié)點(diǎn)，若為0則返回自己
function retSibling(e, n) {
    while (e && n) {
        if (n > 0) {
            if (e.nextElementSibling) {
                e = e.nextElementSibling;
            } else {
                //IE8沒有nextElementSibling
                for (e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
            }
            n--;
        } else {
            if (e.previousElementSibling) {
                e = e.previousElementSibling;
            } else {
                for (e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
            }
            n++;
        }
    }
    return e;
}
//獲取網(wǎng)頁滑動距離
function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}
//獲取網(wǎng)頁寬高
function getViewportOffset() {
    if (window.innerWidth) {
        return {
            x: window.innerWidth,
            y: window.innerHeight
        }
    } else {
        //判斷是否為怪異模式
        if (document.compatMode == 'backCompat') {
            return {
                x: document.body.clientWidth,
                y: document.body.clientHeight
            }
        } else {
            return {
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            }
        }
    }
}
//獲取樣式
function getStyle(elem, prop) {
    if (elem.currentStyle) {
        return elem.currentStyle[prop];
    } else {
        return window.getComputedStyle(elem, null)[prop];
    }
}
//給元素添加事件類型的方法
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachListener) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}
//移除元素上的事件
function removeEvent(elem, type, handle) {
    if (elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
    } else {
        elem.detachEvent(type, handle);
    }
}
//取消冒泡
function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancleBubble = true;
    }
}
//取消默認(rèn)事件
function cancleHandler(event) {
    if (event.prenventDefault) {
        event.prenventDefault();
    } else {
        event.returnValue = false;
    }
}
//拖拽方法
function drag(elem) {
    var divX, divY;
    addEvent(elem, 'mousedown', function (e) {
        var event = e || window.event;
        divX = -parseInt(elem.offsetLeft) + event.pageX;
        divY = -parseInt(elem.offsetTop) + event.pageY;
        addEvent(document, 'mousemove', mouseMove);
        addEvent(document, 'mouseup', mouseUp);
        stopBubble(event);
        cancleHandler(event);
    });
    function mouseMove(e) {
        var event = e || window.event;
        elem.style.left = event.pageX - divX + 'px';
        elem.style.top = event.pageY - divY + 'px';
    }
    function mouseUp(e) {
        var event = e || window.event;
        removeEvent(document, 'mousemove', mouseMove);
        removeEvent(document, 'mouseup', mouseUp);
    }
}