Javascript中DOM常用操作

作用域、闭包、原型链


===========获取特定元素：


getElementById()                 |
                        |---getAttribute(attr_name)、setAttribute(attr_name, attr_val)
getElementByTagName() |




===========获取子元素：


childNodes | 属性，检索出所有的子元素
nodeType | 属性，获取节点的属性（元素节点--1、文本节点--3、属性节点--2）
nodeValue | 属性，获取和设置节点的值
length | 属性，获取长度
firstChild | 属性，获取第一个节点对象
lastChild | 属性，获取最后一个节点对象
nextSibling | 属性，获取下一个兄弟节点
previousSibling | 属性，获取前一个兄弟节点
parentNode | 属性，获取父节点
removeChild | 属性，删除子节点


==========写入元素：
document.write()
innerHTML | 属性，读写元素中的HTML内容
style | 属性，读写元素的样式属性
className | 属性，读写元素的class属性


==========创建元素：
document.createElement(node_name)
document.createTextNode(text)


==========插入元素：
parent.appendChild(child)
parent.insertBefore(new_ele, target_ele)


==========事件绑定：
addEventListener | 支持主流浏览器以及IE9以上，不需要on
attachEvent         | IE8下绑定方法，需要on
obj['on'+enevt_type] = fn | 早期绑定方法


==========事件移除：
removeEventListener | 对应于addEventListener绑定的事件
detachEvent         | 对应于attachEvent绑定的事件
obj['on'+enevt_type] = null | 对应于obj['on'+enevt_type] = fn绑定的事件




==========事件绑定方法：
try {
obj.addEventListener(type, handle, false);
} catch(e) {
try {
obj.attachEvent('on'+type, handle);
} catch(e) {
obj['on'+type] = handle;
}
}


==========事件移除方法：
try {
obj.removeEventListener(type, handle, false);
} catch(e) {
try {
obj.detachEvent('on'+type, handle);
} catch(e) {
obj['on'+type] = null;
}
}


==========取消浏览器的默认动作：例如点击a标签时浏览器默认跳转到href指向的地址页面
document.getElementByTagName('a').onclick = function( e ) {
var eve = e || window.enevt;
try {
erv.preventDefault(); //标准浏览器
} cache(e) {
eve.returnValue = false; //IE8.0以下版本
}
}




==========鼠标坐标获取：
clientX/Y         | 鼠标指针相对客户端（即浏览器文档区域）的坐标
screenX/Y | 鼠标指针相对计算机屏幕的水平坐标




=========网页的大小：
document.body.clientWidth/clientHeight
document.documentElement.clientWidth/clientHeight


或者
document.body.scrollWidth/scrollHeight
document.documentElement.scrollWidth/scrollHeight




=========获取网页元素的绝对位置：
offsetLeft
offsetTop


=========获取滚动条滚动的距离：
document.body.scrollTop
document.documentElement.scrollTop




=========获取元素的实际大小：
offsetWidth
offsetHeight




=========另外一种获取元素位置的方法：始终相对于浏览器而言


                        | top
getBoundingClientRect() | right bottom
                        | left


===========等效方案：

document.getElementByTagName('body')[0] = document.body