読者です 読者をやめる 読者になる 読者になる

ゆず日記

戦う Vimmer 兼 Dvorakユーザ 兼 Kinesisユーザ 兼 おぺらー が戦わないブログ

JavaScriptで選択範囲内のDOMを取得する

JavaScript

選択範囲内のDOMを取得するやりかた。


ここでは例として、

  • マウスドラッグでWebページ内のコンテンツを選択した際に、
  • 選択範囲内のDOMを取得して、
  • その中のa要素を一括取得し, 別タブで開く

という処理を実装してみる。

document.addEventListener('mouseup', function(){
  var selectionObject = window.getSelection(); // 選択範囲(selectionオブジェクト)の取得
  var selectionDOM = selectObject.getRangeAt(0).cloneContents(); // 1つ目の選択範囲のDocumentFragmentをコピー
  var links = selectionDOM.querySelectorAll('a');
  
  for(var i = 0, l = links.length; l > i; i++){
    window.open(links[i].href);
  }
  selectObject.removeAllRanges(); // 選択範囲の解除
}, false);


参考:
selection - Web API リファレンス | MDN
range - Web API リファレンス | MDN
Range.cloneContents - Web API リファレンス | MDN


Chrome Web Store - LinkMiner (Open all links)でも使われてそう。