获取内部文本 + alt 如果有 img

发布于 2025-01-20 05:06:41 字数 338 浏览 5 评论 0原文

我有一个跨度，就像

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

我想获得文本 +图像的alt一样，如果

我尝试过：

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

但是它仅返回文本，我想要img的文本 + alt（好像我们在浏览器上使用鼠标复制粘贴）

谢谢

原文

i have a span like

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

i want to get the text + the alt of image if are there

I have tried :

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

but it return just the text, i want text + alt of img (as if we copy paste with the mouse on a browser)

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞美少年 2025-01-27 05:06:41

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>

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>

If you want to check for the presence of the span and img tags before accessing their content, here's the code for it:

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>

回复收藏 0 原文

笔落惊风雨 2025-01-27 05:06:41

不要使用getElementById。您需要 querySelector使用 CSS 选择器来选取具有消息类的元素。
然后在该元素上再次使用 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>

Don't use getElementById. You want querySelector to use a CSS selector to pick up the element with the message class.
Then use querySelector again on that element to find the image, and log the alt attribute.

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>

回复收藏 0 原文

泼猴你往哪里跑 2025-01-27 05:06:41

首先，span 元素没有任何 ID，它有一个类，因此您可以通过 querySelector 定位它：

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

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

您甚至可以使用：
document.querySelector('.message > img') 来定位图像。

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

First of all the span element does not have any ID, it has a class so you can target it via querySelector:

document.querySelector('.message')
Note that querySelector returns the first element it finds, querySelectorAll returns an array of found elements.

Then you can use the element you found and go the the firstElementChild / or use children[0] (the index of the child).

You can even use:
document.querySelector('.message > img') to target the image.

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

回复收藏 0 原文

没有心的人 2025-01-27 05:06:41

你可以尝试这样：-

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

You can try this way :-

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

回复收藏 0 原文

~没有更多了~