获取非行内样式(兼容问题)
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
n
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 获取当前节点的后一个兄弟节点