ブックマークレットなどからの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 タグに設定されます。この要素内の構造(iframe を作成して本文を表示している)は見直しを検討しているので、依存しないようにしてください。
  • 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
  };
}

他に取得したい要素がありましたら、以下のソーシャルアカウントまでお気軽にご相談ください。


Comments