前端路上的各种问题-javascript—8

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