获取非行内样式(兼容问题)

document.createElement() 创建一个元素节点

document.createTextNode()  创建一个文本节点

box.appendChild(node)  node节点插入到box的内部最后的位置

box.insertBefore(newNode, existNode)  newNode节点插入到exsitNode的前面

box.removeChild(node)  删除节点

obj.cloneNode( 复制节点,复制obj元素标签,可以传一个布尔值为参数,如果参数为true,连同obj子元素一起复制。如果为空(false)复制obj节点。

obj.replaceChild(新添加的节点(替换),被替换的节点);

offsetWidthoffsetHeightoffsetLeftoffsetTopoffsetParent

 文档碎片(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方法

getAttribute() 获取特定元素节点属性的值,某些低版本浏览器不支持.

setAttribute() 设置特定元素节点属性的值,IE低版本浏览器不支持这个方法

removeAttribute() 移除特定元素节点属性,某些低版本浏览器不支持

 outerHTML/innerText (W3C)

innerHTML 获取和设置元素节点里的内容,从对象的起始位置到终止位置的全部内容,不包括自身Html标签。

outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。

innerText:获取某个网页元素的文本内容

 childNodes/过滤空白节点

childNodes 获取当前元素节点的所有子节点,这里面包含空白节点,在IE9之前,IE浏览器会自动忽略空白节点

 高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling

firstChild 获取当前元素节点的第一个子节点

lastChild 获取当前元素节点的最后一个子节点

ownerDocument 获取该节点的文档根节点(document

parentNode 获取当前节点的父节点

previousElementSibling 获取当前节点的前一个兄弟节点Element解决兼容问题

nextSibling 获取当前节点的后一个兄弟节点