firstChild与firstElementChild

时间 2019-12-05

标签 firstchild firstelementchild 繁體版

原文原文链接

相同点：都是获取父元素下的第一个节点对象javascript
不一样点：html
firstChild: IE六、七、8 第一个元素节点; 非IE六、七、8：返回第一个元素节点或文本节点java
firstElementChild： IE六、七、8不支持；非IE六、七、8，获取第一个元素节点node

<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

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

　　不一样点：一、lastchild：IE6,7,8：最后一个元素节点；浏览器

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

　　　　　　二、lastElementChild：IE6,7,8：不支持；code

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

nextSibling与nextElementChild

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

　　- 不一样点：一、nextSibling：IE6,7,8：后一个兄弟元素节点；对象

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

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

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

previousSibling与previousElementChild

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

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

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

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

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

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

offsetParent：获取第一个设置定位的父元素；
offsetLeft：获取离第一个定位父元素的左距离； -offsetTop：获取离第一个定位父元素的上距离；