(例えば、)はてなブログで特定の要素を抽出したい

色々試行錯誤をされて解説していただいたエントリー。

記事中でも「3つ目のh3の前」などと指定ができるので、これを記事一覧でもできないか考えて改善していきたい。最終的には他人のgithubコードを利用せずに、DOMオブジェクト生成して、自分で場所を決めて出力したいな。
はてなブログのトップページ記事一覧にアドセンスを挿入する方法 - ゼロツク

そもそもドキュメントが足りていなかったという部分と、技術的に可能であるという実証で止まっているコードであった為に、試行錯誤する事になってしまったので、もう少し何とかしたいと考えています。

※「何か」は独立したコードになります。

さて、引用している部分の解説を一つ。

querySelectorAllを使う

jQueryにも似たようなものがありますが、最近のブラウザで一般的に利用できるquerySelectorAllを使います。

document.querySelectorAll(".entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6")

ザックリと説明すると、このように利用します。

例えば、Proxy Hacking Protectionの紹介エントリーにて、ブラウザの「F12」キーを押してデベロッパーツールを開き、上記コードを実行すると、

psn.hatenablog.jp

document.querySelectorAll(".entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6")
/*
[<h3 id="Proxy-Hacking-Protection">Proxy Hacking Protection</h3>,
 <h4 id="機能と特徴">機能と特徴</h4>,
 <h5 id="Webサイト上のコンテンツを複製されることによる検索順位低下を防止">Webサイト上のコンテンツを複製されることによる検索順位低下を防止</h5>,
 <h4 id="優位性">優位性</h4>,
 <h4 id="動作条件">動作条件</h4>,
 <h3 id="導入要件">導入要件</h3>,
 <h3 id="インストール">インストール</h3>,
 <h4 id="はてなブログ版">…</h4>,
 <h4 id="WordPress版のProxy-Hacking-Protection">…</h4>,
 <h3 id="サポート免責事項">サポート・免責事項</h3>,
 <h3 id="ライセンス等">ライセンス等</h3>,
 <h3 id="資料関連リンク">資料・関連リンク</h3>,
 <h4 id="ソースコード">…</h4>]
*/

このように、本文中の見出し(h1～h6)の一覧が取得できます。

また、スッキリと書きたい場合は

document.querySelectorAll(".entry-content")[0].querySelectorAll("h1,h2,h3,h4,h5,h6")
// documentから「.entry-content」一覧を抽出して、抽出した一覧の「0番目(一番最初)」から「h1,h2,h3,h4,h5,h6」を抽出する

このように書くこともできます。

指定して、その下に追加したい

希望する要素の一覧が取得できました。それでは次に、insertAdjacentHTMLを利用して新しい要素を追加してみましょう。

例えば、この見出しの上に広告が表示されていますが、これと同じことができます。*1

一例として、このように利用します。

var _entrys = document.querySelectorAll(".entry-content")[0].querySelectorAll("h1,h2,h3,h4,h5,h6")
_entrys[0].insertAdjacentHTML('afterend','<h1>追加された要素です</h1>');

この例の場合は、「最初に出てくるh1～h6の『下』に要素を追加」するよう動作します。

要素が追加されます