http://uhyohyo.net/javascript/index.htmlがとっても詳しくていい感じ
ユーザが選択した範囲を取得するSelection
1 | var selection = document.getSelection(); |
これ自身を使うことはなさそう。
しかも開発途上でブラウザで実装が違う可能性があるらしい
https://developer.mozilla.org/ja/docs/Web/API/Selection
単一の選択範囲を取得するRange
1 | Range = document.getSelection().getRangeAt(0); |
Excelみたいなのを想定しているんだろうか？
基本的に0でいいはず。
主要なものを挙げると
1 2 3 4 5 6 7 8 | 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クラスを継承している
1 2 3 | document.createElement("a") // こんな感じで作成可能HTMLElement.style // スタイル指定が可能HTMLElement.id // html上で指定されたidのこと |
Element
Nodeを継承
HTMLElementとの違いがいまいちわからない
1 2 | Element.id // ts上は存在しない。厳密には実装されないことになっているのかもElement.innerHTML // Element内部のHTMLを取得する |
Node
ノード構造を示す
1 2 | document.createTextNode("自由な文字列") // こんな感じで作成可能Node.textContent // 基本的にweb上で表示される値と同じと思っておけばOK |
