標準ブラウザ DOM Range API（document.createRange()）のクイックリファレンスガイドです。
🔗 関連ドキュメント: DOM Selection API チートシート
Range の作成（Creating a Range）
const range = document.createRange();
境界位置の設定（Setting Boundaries）
// コンテナノードとオフセット値で開始点と終了点を指定
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// 周囲の要素を基準に境界を設定
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// ノード全体またはその子ノード群を一括選択
range.selectNode(node); // ノード自身を含めて選択
range.selectNodeContents(node); // ノード内のすべての子ノードを選択
境界の折りたたみ（Collapsing Boundaries）
range.collapse(true); // 範囲を開始点に折りたたむ（キャレットを開始位置に配置）
range.collapse(false); // 範囲を終了点に折りたたむ（キャレットを末尾に配置）
console.log(range.collapsed); // 開始点と終了点が同一の場合は true
コンテンツの操作（Content Manipulation）
// コピー：DOMを変更せずに DocumentFragment を返却
const fragment = range.cloneContents();
// 切り取り：DOMから選択範囲を切り出して DocumentFragment として返却
const extracted = range.extractContents();
// 削除：DOMから選択範囲の内容を完全に削除
range.deleteContents();
// 範囲の開始位置に新しい要素ノードを挿入
range.insertNode(newNode);
// 範囲の内容を指定の要素で囲む
range.surroundContents(document.createElement('mark'));
読み取り専用プロパティ（Read-Only Properties）
range.startContainer: 範囲が開始するノード。range.startOffset: startContainer 内のオフセット値。range.endContainer: 範囲が終了するノード。range.endOffset: endContainer 内のオフセット値。range.commonAncestorContainer: 開始ノードと終了ノードの共通の最も近い親ノード。range.toString(): 範囲内のテキスト内容を文字列として取得。