javascript基础学习笔记4

查找元素

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

get的方法是动态查询的，后面添加的也能查询。query的方法是静态的，只查找一次，后面的不会在添加。

元素类型
1.元素节点
2.属性节点
3.文本节点
8.注释节点
9.document节点
10.documentFragment

查找节点的方法：
parentNode：找父节点
childNodes：所有子节点（类数组）
firstChild：第一个子节点
lastChild：最后一个子节点
nextSibling：下个兄弟节点
previousSibling：上个兄弟节点

节点的方法
nodeName：获取节点名字，只读不能修改
nodeValue：只能获取文本节点和注释节点的值，可修改
nodeType（最常用）：可以获取节点类型（int）
attribute：获取属性节点的数组
hasChildNodes：是否有子节点

DOM结构树
            Document---HTMLDocument（XMLDocument）
Node---CharacterData---Text、comment
            Element---HTMLElement---HTMLBodyElement、HTMLHeadElement...
            Attr

封装函数，对e节点传入一个n值，若为正，则返回后面第nge兄弟元素节点，若为负，返回前面第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)..获取元素真实能看到的属性，第二个参数是伪元素，只读，返回样式的值经过转换（em会转换为px）
ele.currentStyle..在IE8下获取元素属性，只读，返回样式的值不会经过转换

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

event

事件处理模型 冒泡（自底向上）/捕获（自顶向下）（只有chorme实现）
捕获：elem.addEventListener('click',function(){},true);
先捕获，后冒泡----谁先绑定，谁先执行

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

取消默认事件 href="javascript:Void();"
Void直接返回里面的参数，也能取消默认事件

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:可以相应任何按键
keypress：只可相应字符按键,返回ascii码，也能转换为字符
属性（which是键盘上的位置，charCode是acsii值）

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

//封装函数，对e节点传入一个n值，若为正，则返回后面第nge兄弟元素节点，若为负，返回前面第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;
}
//获取网页滑动距离
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
        }
    }
}
//获取网页宽高
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;
    }
}
//取消默认事件
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);
    }
}