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：獲取離第一個定位父元素的上距離；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。