1.清除特定节点下面的空格的child
function clean(e)
{
var e||document;
var f=e.firstChild;
while(f!=null)
{
if(f.nodeType==3&& /\s/.test(f.nodeValue))//类型检测同时加上正则表达式检测Text_Node
{
e.removeChild(f);
}else if(f.nodeType==1)//如果是Element|元素Element Node
{
arguments.callee(f);//递归调用
}
f=f.nextSibling;//只要移动子元素的位置,父元素e的位置不用移动!
}
}
2.在IE中用nextSibling递归所有的子节点要比childNodes快,特别在IE6和IE7中的时候。因此,如果需要兼容IE6和IE7建议用nextSiblings
3.querySelectorAll返回的是一个NodeList,而不是一个HTML集合。另外一个方法querySelector可以返回符合查询条件的第一个节点;遍历children比chidNodes快,因为集合项更少,HTML空格是文本节点,因此不包括在children集合中
4.减少重拍版的三种方式:(1)先隐藏,然后修改,然后显示 (2)用文档片段documentFragment (4)创建更新节点的副本,然后在副本上操作,最后用新节点覆盖老节点
var computed,temp="", bodystyle=document.body.style;
if(document.body.currentStyle)//IE
{
computed=document.body.currentStyle;
}
else
{
computed=document.defaultView.getComputedStyle(document.body,"");
//第一个参数是DOM对象,第二个参数是获取那些属性,默认是所有属性。
}
//设置了属性后,调用getComputedStyle那么会导致刷新修改队列
bodystyle.color="#ccc";
bodystyle.width="100px";
//打印rgb(204, 204, 204)100px
console.log(computed.color+computed.width);
或者用下面方法
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
5.关于getComputedStyle的一个例子:
p > i:first-child {
font-weight:bold;
font-size:123px;
}
html部分
<p>some <i id="first">text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
通过getComputedStyle获取计算后的样式
var first=document.getElementById("first");
alert(window.getComputedStyle(first,":first-child")["font-weight"]);
//第二个参数是伪类,但是现在第二个伪类的参数已经不是必须的了,其它的伪类:active :visited,:hover :focus :link :lang
//通过点的方式来访问属性就是.fontWeight,采用驼峰写法,但是下标的方式还是["font-weight"]
//window.getComputedStyle也可以是document.defaultView.getComputedStyle