http://uhyohyo.net/javascript/index.htmlがとっても詳しくていい感じ
ユーザが選択した範囲を取得するSelection
var selection = document.getSelection();ユーザがドラッグをして選択した範囲を示す。
これ自身を使うことはなさそう。
しかも開発途上でブラウザで実装が違う可能性があるらしい
https://developer.mozilla.org/ja/docs/Web/API/Selection
単一の選択範囲を取得するRange
Range = document.getSelection().getRangeAt(0);選択範囲が複数ある場合もあるからとかなんとか
Excelみたいなのを想定しているんだろうか？
基本的に0でいいはず。
主要なものを挙げると
range.collapsed // 選択範囲の始点と終点が同じものかどうか range.setStart(node, offset) // 始点を設定 range.setEnd(node, offset) // 終点を設定 range.collapse(boolean) // 始点と終点を同じにする 引数がtrueの場合始点を基準にする range.deleteContents() // 選択範囲削除 range.insertNode(node) // nodeを追加 range.surroundContents(HTMLElement) // タグで囲む range.toString() // 文字列として返す
insertNodeはtextContentが始点に挿入される模様。
詳細は以下
https://developer.mozilla.org/ja/docs/Web/API/range
タグを表す HTMLElement
htmlで指定できるものは大体保持している
Elementクラスを継承している
document.createElement("a") // こんな感じで作成可能
HTMLElement.style // スタイル指定が可能
HTMLElement.id // html上で指定されたidのこと
Element
Nodeを継承
HTMLElementとの違いがいまいちわからない
Element.id // ts上は存在しない。厳密には実装されないことになっているのかも Element.innerHTML // Element内部のHTMLを取得するhttps://developer.mozilla.org/ja/docs/Web/API/Element
Node
ノード構造を示す
document.createTextNode("自由な文字列") // こんな感じで作成可能
Node.textContent // 基本的にweb上で表示される値と同じと思っておけばOK
https://developer.mozilla.org/ja/docs/Web/API/Node
