ie6-ie8 不支持textContent支持innerText
chrome 支持textContent innerText
fireFox 仅支持textContent不支持innerText
<body> <div id="s1"> <p>ceshi </p> </div> </body> <script> var s1=document.getElementById('s1'); console.log(s1.innerHTML); //输出 <p>ceshi </p> console.log(s1.outerHTML); //输出<div id="s1"> <p>ceshi </p> </div> console.log(s1.innerText=s1.textContent); //输出ceshi console.log(s1.outerText=s1.textContent); //输出ceshi </script>
修改css样式
一般用js修改样式，都是获取id,如
var oDiv=document.getElementById("div1"); //alert(oDiv.style.width); //获取非行间样式
但是這是修改行间的属性，还记得style有优先级吗，有时候我想改的不是行间的代码，改的是style标签的代码
就需要用到以下的函数
//ie下 alert(oDiv.currentStyle.width); //chrome 和firefox下 alert(getComputedStyle(oDiv,false).width);
这就涉及到兼容性问题
解决此问题就最好用if语句
if(oDiv.currentStyle) { alert(oDiv.currentStyle.width); } else { alert(getComputedStyle(oDiv,false).width); }
childNodes,firstElementChild,firstChild
首先先看看childnodes
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
<script>
var oUl =document.getElementById("ul1");
for (var i=0;i<oUl.childNodes.length;i++)
{
if (oUl.childNodes[i].nodeType==1) //nodeType=3表示文本节点，即空格，=1就是标签节点
{
oUl.childNodes[i].style.background='red';
}
}
</script>
這里的childNodes.length为5
和我们想的2相差很大，原因是因为childnodes在ie可以正常显示为2，但是在谷歌和火狐浏览器中就显示5
因为谷歌和火狐浏览器把<li></li>前面的空格也当作一个childnode，叫文本节点。
为了避免這个问题
可以用children、
for (var i=0;i<oUl.children.length;i++)
{
oUl.children[i].style.background='green';
}
这是全兼容的，
获取第一个节点有ie和火狐也有不同的函数，为了兼容性，可以写成這样
if (oUl.firstElemenChild) //用于火狐和chrome { oUl.firstElementChild.style.background='black'; } else { oUl.firstChild.style.background="black"; //用于ie5-7 }