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

選択範囲内の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)でも使われてそう。