javascript08--获取元素内容

 获取非行内样式（兼容问题）

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.οnlοad=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 获取当前节点的后一个兄弟节点