はじめに

サイトのタイトルは document.title で取得できるが、description は一発で取れない(専用の関数が無い)ので、簡単に取得する方法を調べた。

TL;DR

• Array.prototype.slice.call(document.head.children).find(t => t.tagName === "META" && t.name === "description") で取れる
  • Array.prototype.slice.call と組み合わせると、Array.prototype のメソッドも使える
  • tagName や name などを変更すると、他のタグも一撃で取れるはず
• Array.from(document.head.children).find(t => t.tagName === "META" && t.name === "description") でも良い
  • Array.from は IE 非対応なので注意

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
   1. Array.prototype.slice.call を使う
   2. Array.from を使う
   3. スプレッド構文を使う
5. まとめ
6. その他・メモ
7. 参考文献

環境・条件

• Google Chrome バージョン: 78.0.3904.70（Official Build） （64 ビット）

詳細

document.head.children で find や filter を使おうとしたらエラーになった。document.head.children の戻り値は Array ではなく HTMLCollection なので、find などは使えない。

Array.prototype.slice.call を使う

Array.prototype.slice.call を噛ませることで、find などの関数も使えるようになる。

1
2

Array.prototype.slice.call(document.head.children).find(t => t.tagName === "META" && t.name === "description");
// => <meta name="description" content="slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。">

Array.prototype の代わりに [] を使っても良い。

1

[].slice.call(document.head.children).find(t => t.tagName === "META" && t.name === "description");

Array.from を使う

IE を捨てて良いなら Array.from でも良い。

1

Array.from(document.head.children).find(t => t.tagName === "META" && t.name === "description");

参考: JavaScript built-in: Array: from - Can I use

スプレッド構文を使う

これも IE 非互換だが、スプレッド構文 でもいける。

1

[...document.head.children].find(t => t.tagName === "META" && t.name === "description");

参考: JavaScript operator: spread: Spread in array literals - Can I use

まとめ

• Array.prototype.slice.call(document.head.children).find(t => t.tagName === "META" && t.name === "description") で取れる
  • Array.prototype.slice.call と組み合わせると、Array.prototype のメソッドも使える
  • tagName や name などを変更すると、他のタグも一撃で取れるはず
• Array.from(document.head.children).find(t => t.tagName === "META" && t.name === "description") でも良い
  • Array.from は IE 非対応なので注意

その他・メモ

tagName === "META" でなく localName === "meta" の方がタイピング的に楽かも。

参考文献

• HTMLCollectionで配列メソッドを使う | ハックノート
• JavaScriptでNodeListやHTMLCollectionを配列に変換する方法
• HTMLCollectionを配列に変換して使う（ES2015+） - Qiita
• Array.prototype.slice() - JavaScript | MDN
• Array.from() - JavaScript | MDN
• スプレッド構文 - JavaScript | MDN
• ParentNode.children - Web API | MDN
• HTMLCollection - Web API | MDN

関連記事

• jQuery Select2 で、初期値の設定と選択状態のクリア
• JavaScript で画像をローカルにダウンロード
• JavaScript で複数画像を zip に圧縮してローカルにダウンロード
• HTML img タグで画像が 404 エラーのときに代替画像を表示する方法
• mailto リンクで 宛先/CC/BCC/件名/本文 を指定 (JavaScript サンプルあり)
• Chart.js(vue-chartjs) でツールチップの表示内容を変更
• JavaScript で URL のクエリパラメータを操作する方法
• axios で添付ファイルありのリクエスト(multipart/form-data の POST)