javascript08--获取元素内容

Posted 2020-10-17

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

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