Realmente quería descubrir esto solo ... perdón por hacer esta pregunta. Acabo de empezar a usar HTML, CSS y JavaScript.

Quiero acceder a la img y figcaption de mi figura solo a través de la id de la figura.

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

Lo probé con document.getElementById("hg").children , pero eso no parece funcionar para mí. Tal vez lo estoy usando mal?

¿Es posible lo que quiero hacer? Realmente no quiero darle a los elementos img y figcaption un atributo id.

1
user3566608 28 oct. 2017 a las 22:59

3 respuestas

La mejor respuesta

Puedes usar el queryselector:

document.querySelector('#hg img');
1
JiiB 28 oct. 2017 a las 20:03

Puede echar un vistazo a Node.childNodes para compruebe si su elemento tiene hijos.

La propiedad de solo lectura Node.childNodes devuelve una colección en vivo de nodos secundarios del elemento dado donde se asigna el primer nodo secundario índice 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>

Los elementos en la colección de nodos son objetos y no cadenas. Para obtener datos de objetos de nodo, use sus propiedades (por ejemplo, elementNodeReference.childNodes[1].nodeName para obtener el nombre

0
G-Cyrillus 28 oct. 2017 a las 20:32

Pruebe document.getElementById("hg").firstElementChild o document.getElementById("hg").children[0]

Node.children devuelve una colección HTMLC en vivo, no un solo elemento. MDN.

1
curveball 28 oct. 2017 a las 20:28