通过图ID访问figcaption和img

时间:2017-10-28 19:59:07

标签: javascript html css figure

我真的很想独自找到这个...抱歉问这个问题。我刚开始学习HTML,CSS和JavaScript。

我想通过图img访问我的人物figcaptionid

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

我尝试使用 document.getElementById("hg").children ,但这似乎对我不起作用。也许我用错了?

我想做甚么可能吗?我真的不想给img和figcaption元素赋予id属性。

3 个答案:

答案 0 :(得分:1)

您可以使用queryselector:

document.querySelector('#hg img');

答案 1 :(得分:1)

尝试document.getElementById("hg").firstElementChilddocument.getElementById("hg").children[0]

Node.children返回实时HTMLCollection,而不是单个元素。 MDN

答案 2 :(得分:0)

您可以查看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获取名称