【JS】querySelectorでmeta要素を取得する方法

JavaScriptの勉強と自分の作業効率に役立てようとmeta属性を一覧化できるブックマークレットを作ろうと思ったのでちょっとずつ備忘録。

head内のmeta要素を取得したい。

やりたいことはhead内に設定されているmeta要素の取得。

<head>
<meta name="description" content="hoge1">
（中略）
<meta property="og:url" content="hoge2">
</head>

これをJavaScriptのquerySelectorでhead内のmeta要素を取得します。

var metaElmDesc = document.head.querySelector('[name=description][content]').content;

ちょっと手こずったのがproperty属性の取得。

property属性には「:」が含まれていて場合によってはjsがコロンを認識できないため正規表現を使って取得します。

今回は「後方一致（最後が特定の文字で終わる場合）」の正規表現を使いました。


var metaElmOgUrl = document.head.querySelector('[property$=url][content]').content;

querySelectorはhead内に限らずページ内の要素を取得するのに役立つメソッドです。

またjavascript（に限らずプログラミング言語）を習得するうえで正規表現も併せて覚えることをオススメします。