Estoy tratando de acceder a un botón directamente (no creo que haya una manera) en mi código JavaScript que se coloca en contenedores div anidados largos como se muestra a continuación. ¿Hay alguna manera fácil de encontrar mi elemento de botón con un nombre y no tengo que llamar a cada div para ir a mi botón?
<iframe allowfullscreen="true" title="myFile" style="width: 100%; height: 100%; border: 0px; display: block;"> <div class="1"> <div class="2"> <div class="3"> <div class="4"> <div class="5"> <div class="6"> <div class="7"> <div class="8"> <button class="myButton" type="button"> </button> </div> </div> </div> </div> </div> </div> </div> </div> </iframe>JS
function AccessButton() { var bt = document.getElementsByClassName("myButton"); } AccessButton();EDITAR: Lo siento, olvidé algo extremadamente importante. Todo el código está presente dentro de un iframe div.
Puede usar un querySelector aquí, encontrará el primer elemento en el documento que coincida con el selector CSS que se le pasó:
function AccessButton() { document.querySelector(".a1 .myButton").click(); } AccessButton(); <div class="a1"> <div class="a2"> <div class="a3"> <div class="a4"> <div class="a5"> <div class="a6"> <div class="a7"> <div class="a.a1 8"> <button class="myButton" type="button" onclick="console.log('clicked')">MyButton</button> </div> </div> </div> </div> </div> </div> </div> </div>Tenga en cuenta que las clases de CSS no deben comenzar con un número .