Tengo la siguiente estructura html:
<div> <div> <div> // 1 <div></div> </div> <div> // 2 <div></div> </div> ... <div> // n <div></div> </div> // <---- return this one </div> <div></div> </div> ¿Cómo puedo usar la consulta JS DOM para devolver el último elemento div marcado en la estructura anterior?
¡Interesante! Pruébelo de esta manera (usando xpath):
result = document.evaluate( '(//div//div[./div])[last()]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); alert(result.snapshotItem(0).outerHTML); <div> <div> <div> // 1 <div></div> </div> <div> // 2 <div></div> </div> ... <div> // return me <div>child of return me </div> </div> // ---- return this one </div> <div></div> </div>Puede probar algo como esto usando querySelector junto con lastElementChild . Agregué los id para que pueda ver que obtiene el elemento correcto, pero en realidad no necesita tener los id para hacer el trabajo.
let parent = document.querySelector('div > div'); console.log(parent.lastElementChild); console.log(parent.lastElementChild.innerText); <div> <div> <div id="first"> <div>First Text</div> </div> <div id="second"> <div>Second Text</div> </div> <div id="last"> <div>Last Text</div> </div> </div> <div></div> </div>