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);
}
}
