原生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);
    }

你可能感兴趣的:(原生js元素历遍)