tengo un lapso como
<span class="message">blablabla <img src="smileys/saute.gif" alt="SAUTE"></span>quiero obtener el texto + el alt de la imagen si están ahí
Yo he tratado :
let el = document.getElementById(".message"); console.log(el.innerText)pero devuelve solo el texto, quiero texto + alt de img (como si copiamos y pegamos con el mouse en un navegador)
Gracias
const spanText = document.querySelector(".message").textContent; const spanImgAlt = document.querySelector(".message img").getAttribute("alt"); console.log("<span> Text:", spanText); console.log("<img> alt:", spanImgAlt); <span class="message">blablabla <img src="smileys/saute.gif" alt="SAUTE"></span> Si desea verificar la presencia de las etiquetas span e img antes de acceder a su contenido, aquí está el código:
const span = document.querySelector(".message"); if ( span ){ console.log("<span> Text:", span.textContent); const spanImg = span.querySelector("img"); if ( spanImg ){ console.log("<img> alt:", spanImg.alt); } } <span class="message">blablabla <img src="smileys/saute.gif" alt="SAUTE"></span>No use getElementById . Quiere que querySelector use un selector de CSS para seleccionar el elemento con la clase de mensaje.
Luego use querySelector nuevamente en ese elemento para encontrar la imagen y registre el atributo alt .
const el = document.querySelector(".message"); const img = el.querySelector('img'); console.log(el.innerText, img.alt); <span class="message">blablabla <img src="https://dummyimage.com/100x100/000/fff" alt="SAUTE" /></span>Puedes probar de esta manera: -
<span class="message">blablabla <img width="50px" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" ></span> let message = document.querySelector('.message').innerText console.log(message) let alt = document.querySelector('.message img').getAttribute('alt') if(alt != null){ console.log(alt) }