-
相同點： 都是獲取父元素下的第一個節點對象
-
不同點：
-
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：獲取離第一個定位父元素的上距離；