如何在 textContent 中包含图像的替代文本？答案

【问题标题】：How to include image's alternative text with textContent?如何在 textContent 中包含图像的替代文本？
【发布时间】：2020-11-08 20:33:09
【问题描述】：

我已经复制并粘贴了这个漂亮的小 JavaScript 表格排序脚本：

现在我还想让列按图片的替代文本排序。

AFAIK JavaScript 的textContent 方法用于读取单元格的内容：

a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim())

有没有办法在这里轻松地包含图像的alt 属性？

【问题讨论】：

【解决方案1】：

有没有办法在这里轻松地包含图像的 alt 属性？

是的，但不是textContent。你会使用querySelector:

a.cells[col].querySelector("img").alt.localeCompare(b.cells[col].querySelector("img").alt)

请注意，该代码假定：

如果 #1 不正确，您可能想给自己一个实用函数并使用它：

function getAlt(img) {
    return img ? img.alt : "";
}

或者，如果您可以依赖真正代码运行环境中存在的新功能，您可以使用 ES2020 中新增的可选链接运算符：

// ?. is new in ES2020
a.cells[col].querySelector("img")?.alt?.localeCompare(b.cells[col].querySelector("img")?.alt)

如果 #2 不正确，querySelector 接受完整的 CSS 选择器，因此您可以添加任何类等，这可能是缩小搜索范围所必需的。

【讨论】：