figcaptionとimgから図IDでアクセス

Question

私は本当にこのことを一人で見つけたいと思っていました...この質問をして申し訳ありません。私はちょうどHTML、CSS、JavaScriptを使い始めました。

数字のimgとfigcaptionには、図のidでしかアクセスしません。

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

私はdocument.getElementById("hg").childrenでそれを試してみましたが、それは私のために動作するようには思えません。たぶん私はそれを間違って使用している？

私もできることは可能ですか？私は本当にimgとfigcaption要素にid属性を与えたいとは思っていません。

Answer 1

あなたはqueryselectorを使用することができます。

document.querySelector('#hg img'); 

Answer 2

はライブHTMLCollectionはなく、単一の要素を返しますNode.childrendocument.getElementById("hg").firstElementChildまたはdocument.getElementById("hg").children[0]

を試してみてください。 MDN。

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>

割り当てられている指定された要素の子ノードのライブコレクションを返す

ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。ノードオブジェクトからデータを取得するには、そのプロパティを使用します（たとえば、elementNodeReference.childNodes[1].nodeName）。