두 번째 자식 ID로 요소 가져 오기

Question

두 번째 ID "myDIV"두 번째 p 태그 (인덱스 4) 클래스 "자식"백 그라운드 색상을 변경하려고합니다. 하지만 제 스크립트가 작동하지 않습니다. 두 번째 자식 ID를 얻는 방법?

<div id="myDIV"> 
    <p class="child">First p element with class="child" in a div (index 0).</p> 
    <p class="child">Second p element with class="child" in a div (index 1).</p> 
    <p class="child">Third p element with class="child" in a div (index 2).</p> 
</div> 

<div id="myDIV"> 
    <p class="child">First p element with class="child" in a div (index 3).</p> 
    <p class="child">Second p element with class="child" in a div (index 4).</p> 
    <p class="child">Third p element with class="child" in a div (index 5).</p> 
</div> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 
    var x = document.getElementById("myDIV")[1]; 
    x.getElementsByClassName("child")[2].style.backgroundColor = "red"; 
} 
</script> 

Answer 1

요소 ID는 전체 문서 내에서 고유해야합니다.

당신은

그런 다음

<script> 
function myFunction() { 
var x = document.getElementsByClassName("myDIV")[1]; 
x.getElementsByClassName("child")[1].style.backgroundColor = "red"; 
} 
</script> 

<div class="myDIV"> 
 
    <p class="child">First p element with class="child" in a div (index 0).</p> 
 
    <p class="child">Second p element with class="child" in a div (index 1).</p> 
 
    <p class="child">Third p element with class="child" in a div (index 2).</p> 
 
</div> 
 

 
<div class="myDIV"> 
 
    <p class="child">First p element with class="child" in a div (index 3).</p> 
 
    <p class="child">Second p element with class="child" in a div (index 4).</p> 
 
    <p class="child">Third p element with class="child" in a div (index 5).</p> 
 
</div> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementsByClassName("myDIV")[1]; 
 
    x.getElementsByClassName("child")[1].style.backgroundColor = "red"; 
 
} 
 
</script>

로 스크립트를 변경 클래스 = "myDiv"로 ID = "myDIV"를 대체 할 수 있습니다