在javascript中获取元数据属性答案

【问题标题】：Get meta data attribute in javascript在javascript中获取元数据属性
【发布时间】：2015-05-21 09:16:01
【问题描述】：

我无法从元标记中检索信息。我正在尝试从网站获取 img src，但无法弄清楚。这是我正在尝试做的一个示例。

<meta property="og:image" content="http://foo.jpg">
var image = document.querySelector('meta[property="og:image"]').getAttribute('content');

我已经尝试过了，但它不起作用。有什么想法吗？

【问题讨论】：

<meta> 是一个元素，property 是一个属性。你会想要更像meta = document.getElementsByTagName('meta') 的东西，扫描你的 og:image 属性，然后获取相关的内容。
如果下面的答案回答了您的问题，Stack Overflow 的工作方式，您可以通过单击旁边的复选标记“接受”该答案； details here，它将它从未回答的问题列表中删除。如果没有，也许你可以澄清这个问题？

【解决方案1】：

meta元素并不特殊，你可以通过正常的方式查询它们并获取它们的属性。

在这种情况下，您可以通过以下方式从第一个 meta[property="og:image"] 元素中获取 content 属性值：

var element = document.querySelector('meta[property~="og:image"]');
var content = element && element.getAttribute("content");

所有现代浏览器都支持querySelector，也支持IE8。

注意content 属性也可用作反射属性，因此您可以只使用.content 而不是.getAttribute("content")：

var element = document.querySelector('meta[property~="og:image"]');
var content = element && element.content;

在现代 JavaScript 中，您可以使用可选的链接运算符 (?.) 来组合这两个语句：

const content = document.querySelector('meta[property~="og:image"]')?.content;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

如果没有找到该元素，content 将获得值undefined；否则，它将获取反射属性的值（即属性值）。

【讨论】：