javascript中childNodes与children的区别

1、childNodes：获取节点，不同浏览器表现不同；

　　IE：只获取元素节点；

　　非IE：获取元素节点与文本节点；

　　解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 

2、children：获取元素节点，浏览器表现相同。

　　因此建议使用children。

children 和  childNodes是偶区别的   

childNodes在高版本和低版本浏览器中均可使用

children值可以在高版本中使用

所以最好写  childrenNodes  在将文本和元素进行过滤  即兼容 就可以了

 function getChildren(childList) {
        var children = [];
        for (var i = 0; i < childList.length; i++) {
            var child = childList[i];
            if (child.nodeType == 1) {
                children.push(child);
            }
        }
        return children;
    }

3、firstChild与firstElementChild

　　相同点：获取父节点下的第一个节点对象；

　　不同点：1、firstchild：IE6,7,8：第一个元素节点；

　　　　　　　　　　　　   非IE6,7,8：第一个节点，文本节点或者元素节点；

　　　　　　2、firstElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　　　　　 非IE6,7,8：第一个元素节点；

function firstChild(obj){    if(obj.firstElementChild) return obj.firstElementChild;    return obj.firstChild}

4、lastChild与lastElementChild

　　相同点：获取父节点下的最后一个节点对象；

　　不同点：1、lastchild：IE6,7,8：最后一个元素节点；

　　　　　　　　　　　　   非IE6,7,8：最后一个节点，文本节点或者元素节点；

　　　　　　2、lastElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　　　　　 非IE6,7,8：最后一个元素节点；

5、nextSibling与nextElementChild

　　相同点：获取后一个兄弟节点对象；

　　不同点：1、nextSibling：IE6,7,8：后一个兄弟元素节点；

　　　　　　　　　　　　   非IE6,7,8：后一个兄弟节点，文本节点或者元素节点；

　　　　　　2、lastElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　　　　　 非IE6,7,8：后一个兄弟元素节点；

6、previousSibling与previousElementChild

　　相同点：获取前一个兄弟节点对象；

　　不同点：1、previousSibling：IE6,7,8：前一个兄弟元素节点；

　　　　　　　　　　　　   非IE6,7,8：前一个兄弟节点，文本节点或者元素节点；

　　　　　　2、previousElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　　　　　 非IE6,7,8：前一个兄弟元素节点；

7、parentNode：获取父元素，不存在兼容性问题。

8、offsetParent：获取第一个设置定位的父元素；

     offsetLeft：获取离第一个定位父元素的左距离；

     offsetTop：获取离第一个定位父元素的上距离；