He reducido mi página a solo el contenido relevante. Ver código aquí:
let text = document.getElementById("apanelofcontent").firstChild.id; console.log(text); <div class="apanelofcontent" id="apanelofcontent"> <div class="panel1" id="panel1" name="panel1"> <p>Content goes here</p> </div> <div class="panel1link" id="panel1link"> <p><a href="#ex1" rel="modal:open">Open modal</a></p> </div> </div> Todo lo que quiero hacer es obtener el valor de id del primer div para que aparezca dentro del div con apanelofcontent como id .
Entonces, en el ejemplo anterior, quiero que la consola muestre el panel1 de texto 1, ya que esa es la id del primer div que aparece dentro del div con apanelofcontent como id .
Si ejecuto lo anterior, todo lo que obtengo en la ventana de alerta es undefined . ¿Qué estoy haciendo mal?
firstChild podría ser solo un nodo de texto, ese espacio antes del div , que no tiene una id . Podrías usar firstElementChild , que te da el primer nodo del elemento, así:
<html> <div class="apanelofcontent" id="apanelofcontent"> <div class="panel1" id="panel1" name="panel1"> <p>Content goes here</p> </div> <div class="panel1link" id="panel1link"> <p><a href="#ex1" rel="modal:open">Open modal</a></p> </div> <script> let text = document.getElementById("apanelofcontent").firstElementChild.id; window.alert(text); </script> </div> </html>Esto imprime panel1 en la consola:
let firstDivChildId = document.querySelector('div#apanelofcontent > div:first-of-type').id; //window.alert(firstDivChildId ); console.log(firstDivChildId ) <div class="apanelofcontent" id="apanelofcontent"> <div class="panel1" id="panel1" name="panel1"> <p>Content goes here</p> </div> <div class="panel1link" id="panel1link"> <p><a href="#ex1" rel="modal:open">Open modal</a></p> </div> </div>