Javascript 同じクラス名がついた複数要素から、特定の要素を取得する方法

javascript

例として親要素Boxesの中に3つのboxがあり、個々のboxにimage画像とtextを記述したhtmlを見てみる。

img属性はBoxクラスの最初の子要素であるため、children[0]で取得できる。（要素は0からカウント）

さらにその下のdiv要素は、Boxクラスの2番目の要素であるため、children[1]で取得できる。

index.html

<body>
  <div class="Boxes">
    <div class="Box">  //Boxes[0]で取得できる
      <img src="box0.png">  //Boxes[0].children[0]で取得できる
      <div class="box0">Box0</div>  //Boxes[0].children[1]で取得できる
    </div>
    <div class="Box">  //Boxes[1]で取得できる
      <img src="box1.png">  //Boxes[1].children[0]で取得できる
      <div class="box1">Box1</div>  //Boxes[1].children[1]で取得できる
    </div>
    <div class="Box">  //Boxes[2]で取得できる
      <img src="box2.png">  //Boxes[2].children[0]で取得できる
      <div class="box2">Box2</div>  //Boxes[2].children[1]で取得できる
    </div>
  </div>
</body>
<script src="main.js"></script>
</html>