原生js元素历遍

父元素：

parentNode;(没有兼容性问题);
offsetParent; (获取的是首个获得（绝对定位或者相对定位）的 元素；最终会找到html；)

子元素：

1、childNodes 属性。

       标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性 文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素  节点，2是属性节点，3是文本节点。   node.childNodes[0]  完全等价于  node.firstChild

2、children 属性

       非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。

第一个子元素：

1. 有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild属性。代码中第一个HTML节点前如果有换行，空格，那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }      
}

2. 可以使用children[0]来替代上面的getFirst函数。

3.或者利用兼容的写法： 


//IE
//obj.firstChild.style.background='red';
//FF
//obj.firstElementChild.style.background='red';
var oFirst=obj.firstElementChild || obj.firstChild;

最后一个子元素：

1. 模仿getFirst

function getLast(elem){
    var len=elem.childNodes.length;
    for(var i=len-1,e;e=elem.childNodes[i--];){
        if(e.nodeType==1)
            return e;
    }      
}

2. 可以使用 children[len-1] 来代替lastFirst

3. 或者利用兼容的写法：


var oLast=obj.lastElementChild || obj.lastChild;

上一个元素：

function prev(elem){
    do{
         elem = elem.previousSibling;
    }while(elem && elem.nodeType != 1);
   return elem;
}

或者：var  oPrev=obj.previousElementSibling ||obj.previousSibling ;

（previousSibling： IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用previousSibling便可读取到的上一个节点元素，在FF中就需要这样写：previousElementSibling了。）

下一个元素：

function next(elem){
    do{
         elem = elem.nextSibling;
    }while(elem && elem.nodeType != 1);
   return elem;
} 

或者：var oNext =obj.nextElementSibling ||obj.nextSibling;  （ie8以下有bug）

（nextSibling： IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。）

删除一个元素

obj.parentNode.removeChild(obj)  

插入到目标元素的前面：

obj.parentNode.insertBefore(newchild,obj)

appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。

插入到目标元素的后面：

function insertAfter(newchild,refchild){
    var oParent=refchild.parentNode;
    var oChilds=oParent.children;
    var len=oChilds.length;
    if(oChilds[len-1]==refchild){
       oParent.appendChild(newchild)
    }else{
      refchild= refchild.nextElementSibling || refchild.nextSibling;
      oParent.insertBefore(newchild,refchild);
    }