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 ");

无论如何;）