?获取非行内样式（兼容问题）n?document.createElement() 创建一个元素节点
n?document.createTextNode() ?创建一个文本节点
n?box.appendChild(node) ?把node节点插入到box的内部最后的位置
n?box.insertBefore(newNode, existNode) ?把newNode节点插入到exsitNode的前面
n?box.removeChild(node) ?删除节点
n?obj.cloneNode(）?复制节点,复制obj元素标签，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起复制。如果为空（false）复制obj节点。
n?obj.replaceChild(新添加的节点（替换）,被替换的节点);
n?offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent
?文档碎片（createDocumentFragment）
文档碎片在理论上可以提高DOM操作的执行效率
?
var oDiv1=document.getElementsByTagName(‘div‘)[0];
//alert(oDiv1.style.width);//无法获取非行内样式,但可以用来接收值
//offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent
/*alert(oDiv1.offsetWidth);//border+paddding+width ?302
alert(oDiv1.offsetHeight);//302
alert(oDiv1.offsetLeft);//300 ?盒子绝对的位置
alert(oDiv1.offsetTop);//300
alert(oDiv1.offsetParent);//[object HTMLbodyElement] 如果父级没有定位，以body为基准，如果有定位父级，取带有定位的最近的那个盒子*/
//获取非行内样式：getComputedStyle(得到计算后的样式) ?chrome ff ie9-11标准浏览器
//alert(getComputedStyle(oDiv1)[‘width‘]);//100px
//alert(getComputedStyle(oDiv1)[‘backgroundColor‘]);//rgb(255,0,0)
//注意：background-color ?js转换成backgroundColor
//alert(getComputedStyle(oDiv1)[‘margin‘]);//100px
//非标准浏览器：ie8及以下???currentStyle(当前样式)
/*alert(oDiv1.currentStyle[‘width‘]);
alert(oDiv1.currentStyle[‘backgroundColor‘]);
alert(oDiv1.currentStyle[‘margin‘]);*/
/*if(oDiv1.currentStyle){
alert(oDiv1.currentStyle[‘width‘]);
alert(oDiv1.currentStyle[‘backgroundColor‘]);
alert(oDiv1.currentStyle[‘marginLeft‘]);
}else{
alert(getComputedStyle(oDiv1)[‘width‘]);//100px
alert(getComputedStyle(oDiv1)[‘backgroundColor‘]);//rgb(255,0,0)
alert(getComputedStyle(oDiv1)[‘marginLeft‘]);//100px
}*/
?自定义属性及getAttribute方法
n?getAttribute() 获取特定元素节点属性的值,某些低版本浏览器不支持.
n?<!-- ?//getAttribute() 获取特定元素节点属性的值.
n? ? n//setAttribute(属性名,属性值) 设置特定元素节点属性的值.
n? ? n//removeAttribute() 移除特定元素节点属性. -->
n? <!-- <script type="text/javascript">
n? ?window.onload=function(){
n? ? var oDiv1=document.getElementsByTagName(‘div‘)[0];
n? ? alert(oDiv1.getAttribute(‘class‘));//获取默认的或者自定义的元素属性
n? ? oDiv1.setAttribute(‘xxx‘,111);//设置自定义的元素属性
n? ? oDiv1.setAttribute(‘yyy‘,222);//设置自定义的元素属性
n? ? oDiv1.setAttribute(‘id‘,‘box‘);//设置自定义的元素属性
n? ? //oDiv1.id=‘box‘;//设置默认属性
n? ? oDiv1.xxx=111;//js代码设置的属性，不会显示元素里面。(IE8)
n? ? oDiv1.removeAttribute(‘xxx‘);//移除自定义的元素属性
n? ? oDiv1.removeAttribute(‘class‘);//移除默认的元素属性
n? ?}
n?<!-- innerHTML 获取和设置元素节点里的内容，从对象的起始位置到终止位置的全部内容,不包括自身Html标签。
n?outerHTML：除了包含innerHTML的全部内容外, 还包含对象标签本身。
n?innerText：获取某个网页元素的文本内容?-->
n?setAttribute() 设置特定元素节点属性的值，IE低版本浏览器不支持这个方法
n?removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持
?outerHTML/innerText (非W3C)
n?innerHTML 获取和设置元素节点里的内容，从对象的起始位置到终止位置的全部内容,不包括自身Html标签。
n?outerHTML：除了包含innerHTML的全部内容外, 还包含对象标签本身。
n?innerText：获取某个网页元素的文本内容
?childNodes/过滤空白节点
n?childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，在IE9之前，IE浏览器会自动忽略空白节点
?高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling
n?firstChild 获取当前元素节点的第一个子节点
n?lastChild 获取当前元素节点的最后一个子节点
n?ownerDocument 获取该节点的文档根节点（document）
n?parentNode 获取当前节点的父节点
n?previousElementSibling 获取当前节点的前一个兄弟节点Element解决兼容问题
n?nextSibling 获取当前节点的后一个兄弟节点
原文地址：http://blog.51cto.com/13507333/2048945
