如果有img，则获取innerText+alt

Question

我有一个类似的跨度

<span class="message">blablabla <img src="smileys/saute.gif" alt="SAUTE"></span>

如果有，我想得到文本+图像的alt

我试过：

let el = document.getElementById(".message");
console.log(el.innerText)

但它只返回文本，我想要img的text+alt(就像我们在浏览器上用鼠标复制粘贴一样(

感谢

Answer 1

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>

---

如果您想在访问span和img标签的内容之前检查它们的存在，下面是它的代码：

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>

Answer 2

1. 不要使用getElementById。您希望querySelector使用CSS选择器来拾取带有消息类的元素。

2. 然后在该元素上再次使用querySelector来查找图像，并记录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>

Answer 3

首先，span元素没有任何ID，它有一个类，因此您可以通过querySelector:将其作为目标

document.querySelector('.message')请注意，querySelector返回它找到的第一个元素，querySelectorAll返回一个找到的元素数组。

然后，您可以使用找到的元素并转到firstElementChild/或使用children[0](子项的索引(。

您甚至可以使用：CCD_ 10来针对图像。

const el = document.querySelector('.message');
cosnole.log("Inner text: ", el.innerText);
const img = el.firstElementChild;
console.log("Img alt: ", img.alt);

Answer 4

您可以尝试以下方式：-

<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)
}