figcaption 및 그림 ID를 통한 img

Question

정말이 질문을 혼자서 찾으려했습니다 ...이 질문에 대해 유감스럽게 생각합니다. 방금 HTML, CSS 및 JavaScript에 들어가기 시작했습니다.

그림의 id을 통해서만 내 그림의 img 및 figcaption에 액세스하고 싶습니다.

<div id="grid"> 
    <figure id="hg"> 
     <img src="sml1.png"/> 
     <figcaption>0</figcaption> 
    </figure> 
</div> 

나는 document.getElementById("hg").children와 그것을 시도,하지만 나를 위해 작동하지 않는 것 같습니다. 어쩌면 내가 틀렸어?

내가 할 수있는 일이 가능한 것일까 요? img 및 figcaption 요소에 id 특성을 부여하고 싶지 않습니다.

document.querySelector('#hg img'); 

Answer 1

당신은 queryselector를 사용할 수 있습니다. MDN.

Answer 2

이 document.getElementById("hg").firstElementChild 또는 document.getElementById("hg").children[0]

Node.children 라이브 HTMLCollection 아닌 하나의 요소를 반환보십시오 :

Answer 3

Node.childNodes을보고 요소에 하위 항목이 있는지 확인할 수 있습니다.

Node.childNodes 읽기 전용 속성은 첫 번째 자식 노드는 인덱스 0

var myfigure = document.getElementById('hg'); 
 
// does you ID exists ? 
 
if (myfigure.hasChildNodes()) // has it got any child ? 
 
{ 
 
    var children = myfigure.childNodes; 
 
    // if it does, get them 
 
    for (var i = 0; i < children.length; i++) { 
 
    // go through all children 
 
    if (children[i].nodeName == 'IMG') { 
 
     // is it an img tag 
 
     children[i].style.border = "solid"; // apply some style or whatever else 
 
    } 
 
    // another test 
 
    if (children[i].nodeName == 'FIGCAPTION') { 
 
     children[i].style.color = "red"; 
 
    } 
 
    } 
 
}

<div id="grid"> 
 
    <figure id="hg"> 
 
    <img src="http://dummyimage.com/200&text=sml1.png" /> 
 
    <figcaption>caption</figcaption> 
 
    </figure> 
 
</div>

에게 할당 된 지정된 요소의 자식 노드의 라이브 컬렉션을 반환 노드 컬렉션의 항목은 객체가 아니라 문자열입니다. 노드 객체에서 데이터를 가져 오려면 해당 속성을 사용하십시오 (예 :).