[JavaScript]querySelectorでヘッダの要素(metaタグ)を取得する
JavaScriptのquerySelectorでヘッダーの特定のmetaタグが取得できればなぁと思ったら出来たので備忘録を兼ねてメモです。
やりたいこと
htmlコードの<head></head>の中にはmetaタグと呼ばれる様々なタグがあります。
<meta property="og:site_name" content="サイト名"> <meta name="description" content="サイト説明">
こんな奴ですね。このmetaタグに記載されているcontent部分をquerySelectorで取得したかったので、コードを書いてみました。
querySelectorで特定のmetaタグを取得する
先にhtmlとJavaScriptのコードを載せます。(JSファイルは読み込んでください)
<html>
<head>
<meta property="og:site_name" content="サイト名">
<meta name="description" content="サイト説明">
</head>
<body>
</body>
</html>
var getMeta = document.head.querySelector("[name=description][content]").content;
console.log(getMeta)
=> サイト説明
document.headでヘッダー内の要素を取得し、querySelectorでどのmetaタグかを指定しています。
上記コードでは、metaタグのname=descriptionを指定。その中のcontentの値を取得しています。
:などの文字には注意
ちなみに引っかかり部分がありまして、og:siteのような:文字はコードが違うようで=で認識してくれません。
なので、前方一致や後方一致をすることで回避しました。
[JavaScript]DOMセレクタを取得する時の正規表現まとめ
:の文字コードを入力してもいいと思うんですけどね。面倒なのでとりあえずの回避策として。
