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

//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)

插入到目标元素的后面：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！