-
相同点： 都是获取父元素下的第一个节点对象
-
不同点：
-
firstChild: IE6、7、8 第一个元素节点; 非IE6、7、8：返回第一个元素节点或文本节点
-
firstElementChild： IE6、7、8不支持；非IE6、7、8，获取第一个元素节点
<script type="text/javascript">
/**
* @description: 获取父元素的第一个节点
* @param ele: 传入一个DOM元素
* */
function firstChild(ele) {
if(ele.nodeType) { // 存在nodeType属性，传进来的就是DOM元素
if(ele.firstElementChild) { // 非IE
return ele.firstElementChild;
}
return ele.firstChild; // IE
} else {
throw new Error("您传入的参数不是DOM元素！！！");
}
}
window.onload = function() {
var box = document.getElementById("box");
console.log(firstChild(box));// 不管什么浏览器永远返回1--也就是第一个元素节点，而非文本节点
console.log(box.firstChild.nodeType);// chrome下返回3
}
</script>
<body>
<div id="box"> q
<span>1</span>
<span>2</span>
<a href="">3</a>
</div>
</body>
lastChild与lastElementChild
相同点：获取父节点下的最后一个节点对象；
不同点：1、lastchild：IE6,7,8：最后一个元素节点；
非IE6,7,8：最后一个节点，文本节点或者元素节点；
2、lastElementChild：IE6,7,8：不支持；
非IE6,7,8：最后一个元素节点
nextSibling与nextElementChild
- 相同点：获取后一个兄弟节点对象；
- 不同点：1、nextSibling：IE6,7,8：后一个兄弟元素节点；
非IE6,7,8：后一个兄弟节点，文本节点或者元素节点；
2、lastElementChild：IE6,7,8：不支持；
非IE6,7,8：后一个兄弟元素节点；
previousSibling与previousElementChild
- 相同点：获取前一个兄弟节点对象；
-不同点：1、previousSibling：IE6,7,8：前一个兄弟元素节点；
非IE6,7,8：前一个兄弟节点，文本节点或者元素节点；
2、previousElementChild：IE6,7,8：不支持；
非IE6,7,8：前一个兄弟元素节点；
parentNode：获取父元素，不存在兼容性问题。
- offsetParent：获取第一个设置定位的父元素；
- offsetLeft：获取离第一个定位父元素的左距离；
-offsetTop：获取离第一个定位父元素的上距离；