ブックマークレットなどからのDOM要素へのアクセス
ブックマークレットなどでページの表示内容にアクセスするため、一部の要素に固定の CSS クラスが振られています（現在のところ、デスクトップ版のみ）。以下、現在利用できる CSS クラスです。
- fd_itemlist
-
個々のアイテムを格納するコンテナ要素に設定されます。
- fd_item
-
アイテムリスト中の個々のフィードアイテムのルート要素です。
- fd_focus
-
キーボードフォーカスが付いているフィードアイテムのルート要素です。
- fd_expanded
-
展開中（本文表示中）のフィードアイテムのルート要素に設定されます。展開表示では、すべてのアイテムにこのクラスが設定されるので、ご注意ください。
- fd_url
-
フィードアイテムのリンク先を示す
Aタグに設定されます。href属性でリンク先 URL が取得できます。 - fd_title
-
フィードアイテムのタイトルを表示する要素に設定されます。
textContent（もしくはinnerText）でタイトル文字列が取得できます。 - fd_siteurl
-
フィードアイテム内の、配信元へのリンク（
Aタグ）に設定されます。href属性で配信元の URL が取得できます。 - fd_sitename
-
フィードアイテム内の、配信元サイト名を表示する要素に設定されます。
textContent（もしくはinnerText）でサイト名の文字列が取得できます。 - fd_body
-
記事本文を表示する
DIVタグに設定されます。この要素内の構造は見直しされる可能性が高いので、依存しないようにしてください。 - fd_feedlist
-
フィードツリー表示のラッパー要素です。
- fd_feed
-
フィードリストの各アイテム（フィード or グループ）のルート要素です。
- fd_feed_title
-
フィード or グループの名前を表示する要素です。
- fd_feed_count
-
フィード or グループの未読数を表示する要素です。
- fd_feed_focus
-
キーボードフォーカスが付いたフィードのルート要素です。
- fd_feed_select
-
現在表示中のフィードのルート要素です。
- fd_current_feed_title
-
現在表示中のフィードのタイトルを表示する要素です（常に存在する）。
なお、 fd_forcus や fd_feed_focus, fd_feed_select は、状況によっては存在しない可能性があります（まだキーボード操作をしていない場合や、選択したフィードの属するグループが閉じているときなど）。
以下は現在キーボードフォーカスが乗っているアイテムの情報を取得するコード例です。
var item = document.querySelector('.fd_focus');
var info = null;
if(item) {
info = {
url: item.querySelector('.fd_url').href,
title: item.querySelector('.fd_title').textContent,
siteurl: item.querySelector('.fd_siteurl').href,
sitename: item.querySelector('.fd_sitename').textContent
};
}
他に取得したい要素があれば、以下のソーシャルアカウントまでお気軽にご相談ください。
| Mastodon |