Javascript選擇兒童的孩子？

Question

有沒有辦法在Javascript中而不是在jQuery中選擇子節點的子節點？ 例如，我要選擇偏移父級所在的<LI> 。

<li class="all_leagues"> ?

例：

    <li class="top_leagues">
     <h5>Top Ligen</h5>
     <ul class="games first">
     <ul class="games">
     <ul class="games">
    </li>
    <li class="all_leagues">
     <h5>Alle Ligen</h5>
     <ul class="games first">
      <li id="lg_chk_br_1_l_15231" class="league_check ">
      <li id="lg_chk_br_1_l_15175" class="league_check ">
      <li id="lg_chk_br_1_l_12214" class="league_check ">
    </ul>
    <ul class="games">
      <li id="lg_chk_br_1_l_16106" class="league_check ">
      <li id="lg_chk_br_1_l_13939" class="league_check ">
      <li id="lg_chk_br_1_l_16419" class="league_check ">
    </ul>
    <ul class="games">
      <li id="lg_chk_br_1_l_14823" class="league_check ">
      <li id="lg_chk_br_1_l_11940" class="league_check ">
    </ul>
   </li>

我該如何從返回的節點列表中選擇ID？ 實際上我得到li#lg_chk_br_1_l_14481.league_check

Answer 1

您可以使用Document.querySelectorAll（）

document.querySelectorAll('.all_leagues > ul > li')

注意： 瀏覽器兼容性 （適用於上述IE8 +）

要么

 var list = document.querySelectorAll('.all_leagues .league_check'); for (var i = 0, len = list.length; i < len; i++) { console.log(list[i].id) } 

 <ul> <li class="top_leagues"> <h5>Top Ligen</h5> <ul class="games first"></ul> <ul class="games"></ul> <ul class="games"></ul> </li> <li class="all_leagues"> <h5>Alle Ligen</h5> <ul class="games first"> <li id="lg_chk_br_1_l_15231" class="league_check "></li> <li id="lg_chk_br_1_l_15175" class="league_check "></li> <li id="lg_chk_br_1_l_12214" class="league_check "></li> </ul> <ul class="games"> <li id="lg_chk_br_1_l_16106" class="league_check "></li> <li id="lg_chk_br_1_l_13939" class="league_check "></li> <li id="lg_chk_br_1_l_16419" class="league_check "></li> </ul> <ul class="games"> <li id="lg_chk_br_1_l_14823" class="league_check "></li> <li id="lg_chk_br_1_l_11940" class="league_check "></li> </ul> </li> </ul> 

Answer 2

確定我固定它;）忘記該var list = document.getElementsByClassName("all_leagues")以便正確的選擇是返回一個數組var list = document.getElementsByClassName("all_leagues")[0];

完整代碼：

var list = document.getElementsByClassName("all_leagues")[0]; list.getElementsByClassName("league_check ");

無論如何;）