如何測試如果給定的元素是第一個孩子

Question

我想寫一個JavaScript函數來測試，如果一個元素是第一個孩子......

這是我的代碼：

$el = document.getElementsByClassName("b")[0]; 
$firstEl = $el.parentNode.getElementsByClassName("a").firstChild; 

http://jsfiddle.net/bf2ae5tt/

爲什麼它不起作用？

Answer 1

只需使用$firstEl = $el.parentNode.getElementsByClassName("a")[0]代替firstChild

Answer 2

如果我理解你，你要檢查的第一a，看看它是第一b的第一個孩子，那麼你就需要另一個[0]：

$el = document.getElementsByClassName("b")[0]; 
$firstEl = $el.parentNode.getElementsByClassName("a")[0].firstChild; 
// Here ---------------------------------------------^^^ 
if ($el === $firstEl) { 
    // .... 
} 

但我會用querySelector代替，它具有更好的支持（基本上，它在IE8，而getElementsByClassName不是）它返回它發現而不是尋找他們全部並返回一個列表中的第一個元素：

$el = document.querySelector(".b"); 
$firstEl = $el.parentNode.querySelector(".a").firstChild; 
if ($el === $firstEl) { 
    // .... 
} 

Answer 3

你能做到這樣

$el = document.getElementsByClassName("b")[0]; 

    if($el.parentNode.children.length > 0){ 
     $firstEl = $el.parentNode.children[0]; 
    } 

    console.log($el == $firstEl); 

使用firstChild

$el = document.getElementsByClassName("b")[0]; 

    $firstEl = $el.parentNode.firstChild; 

    console.log($el == $firstEl); 

會工作，如果你的dom是

<div class="p"><div class="a b"></div><div class="a"></div></div> 

不是當你的DOM是

<div class="p"> 
    <div class="a b"></div> 
    <div class="a"></div> 
    </div> 

因爲在標籤之間的任何空白將導致插入

node.firstChild