recursal/MDN huggingface dataset:
Range: extractContents() メソッド
=============================

**`Range.extractContents()`** は `Range` の内容をこの文書ツリーから `DocumentFragment` へ移動させます。

DOM Events を使用して追加したイベントリスナーは、抽出時に維持されません。HTML 属性のイベントは、`Node.cloneNode()` メソッドの場合と同様に維持または複製されます。HTML の `id` 属性も複製されるため、部分的に選択されたノードが抽出され文書に追加された場合、無効な文書になる可能性があります。

部分的に選択されたノードは、文書フラグメントを有効にするために必要な親タグを含めて複製されます。

構文
--


```js
extractContents()
```

### 引数

なし。

### 返値

`DocumentFragment` オブジェクトです。

例
-

### 基本的な例


```js
const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
```

### コンテナー間でアイテムを移動

 この例では、 2 つのコンテナー間でアイテムを移動させます。 1 つ以上のアイテムを選択し
 をクリックすると、反対側のコンテナーに移動されます。

#### HTML


```html
<p id="list1">123456</p>
<button id="swap">選択されたアイテムを入れ替え</button>
<p id="list2">abcdef</p>
```


#### CSS


```css
body {
  pointer-events: none;
}

p {
  border: 1px solid;
  font-size: 2em;
  padding: 0.3em;
}

button {
  font-size: 1.2em;
  padding: 0.5em;
  pointer-events: auto;
}
```


#### JavaScript


```js
const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");
const button = document.getElementById("swap");

button.addEventListener("click", (e) => {
  selection = window.getSelection();

  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);

    if (
      range.commonAncestorContainer === list1 ||
      range.commonAncestorContainer.parentNode === list1
    ) {
      const documentFragment = range.extractContents();
      list2.appendChild(documentFragment);
    } else if (
      range.commonAncestorContainer === list2 ||
      range.commonAncestorContainer.parentNode === list2
    ) {
      const documentFragment = range.extractContents();
      list1.appendChild(documentFragment);
    }
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-extractcontents |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: getBoundingClientRect() メソッド
===================================

**`Range.getBoundingClientRect()`** メソッドは、範囲のコンテンツを囲む `DOMRect` オブジェクトを返します。これは、範囲内のすべての要素の外接長方形の和を囲む長方形です。

このメソッドは、テキストボックス内のカーソルまたは選択範囲のビューポート座標を決定するのに有益です。返値の詳細については `Element.getBoundingClientRect()` を参照してください。

構文
--


```js
getBoundingClientRect()
```

### 引数

なし。

### 返値

範囲内のすべての要素の外接長方形の和を囲む `DOMRect` オブジェクトです。

例
-

### HTML


```html
<div id="highlight"></div>
<p>
  この例では、範囲のコンテンツの後ろに「ハイライト」長方形を配置しています。
  範囲のコンテンツは<em>ここから始まり</em>、<em>ここで終わり</em>まで続きます。外接クライアント長方形は、範囲内で選択されたすべてのものを格納します。
</p>
```

### CSS


```css
#highlight {
  background: yellow;
  position: absolute;
  z-index: -1;
}

p {
  width: 200px;
}
```

### JavaScript


```js
const range = document.createRange();
range.setStartBefore(document.getElementsByTagName("em").item(0));
range.setEndAfter(document.getElementsByTagName("em").item(1));

const clientRect = range.getBoundingClientRect();
const highlight = document.getElementById("highlight");
highlight.style.left = `${clientRect.x}px`;
highlight.style.top = `${clientRect.y}px`;
highlight.style.width = `${clientRect.width}px`;
highlight.style.height = `${clientRect.height}px`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-range-getboundingclientrect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Range.getClientRects()` - 矩形以外の範囲（選択範囲が次の行に折り返される場合など）に対する、より細かい結果
* `Element.getBoundingClientRect()`
* `Document.caretPositionFromPoint()` - ビューポート座標から（ノード、オフセット）を取得
Range: insertNode() メソッド
========================

**`Range.insertNode()`** メソッドは `Range` の先頭にノードを挿入します。

新しいノードは `Range` の始まりの境界点に挿入されます。新しいノードがテキスト `Node` に追加される場合、その `Node` は挿入点で分割され、挿入は 2 つのテキストノードの間に行われます。

新しいノードが文書フラグメントの場合、代わりにその文書フラグメントの子が挿入されます。

構文
--


```js
insertNode(newNode)
```

### 引数

`newNode`

`Range` の先頭に挿入する `Node` です。

### 返値

なし (`undefined`)。

例
-


```js
range = document.createRange();
newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-insertnode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: setStart() メソッド
======================

**`Range.setStart()`** メソッドは、 `Range` の開始位置を設定します。

`startNode` の `Node` の型が `Text`, `Comment`, `CDataSection` のいずれかであるとき、 `startOffset` は `startNode` の開始位置からの文字数です。その他の `Node` 型の場合、 `startOffset` は `startNode` からの子ノード数です。

始点を終点より下（文書の下層側）に設定すると、始点と終点の両方が指定された開始位置に設定され、折りたたまれた範囲となります。

構文
--


```js
setStart(startNode, startOffset)
```

### 引数

`startNode`

`Range` を開始する `Node`。

`startOffset`

`startNode` の始点からの `Range` のオフセットを表す 0 以上の整数。

### 返値

なし (`undefined`)。

例
-

### 要素の一部を強調表示

この例では、 `Range.setStart()` と `Range.setEnd()` メソッドを使用して、住所の一部を範囲に追加しています。そして、選択された範囲は `Range.surroundContents()` を使用して強調表示します。

住所は、 5 つのテキストノードと、 4 つの `<br>` 要素の合計 9 つのノードを含んでいます。

#### HTML


```html
<p id="address">
  Wyatt Earp<br />
  101 E. Main St.<br />
  Dodge City, KS<br />
  67801<br />
  USA
</p>

<hr />
<p>Nodes in the original address:</p>
<ol id="log"></ol>
```


#### JavaScript


```js
const address = document.getElementById("address");
const log = document.getElementById("log");

// Log info
address.childNodes.forEach((node) => {
  const li = document.createElement("li");
  li.textContent = `${node.nodeName}, ${node.nodeValue}`;
  log.appendChild(li);
});

// Highlight the street and city
const startOffset = 2; // Start at third node: 101 E. Main St.
const endOffset = 5; // End at fifth node: Dodge City, KS
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);

const mark = document.createElement("mark");
range.surroundContents(mark);
```


#### 結果

### テキストノードから文字を取得する

この例では、`Range.setStart()` と `Range.setEnd()` メソッドを使用して、範囲の内容を定義しています。結果として得られる範囲は、テキストノード内の 1 文字目から 5 文字目を含んでいます。

#### HTML


```html
<p id="content">0123456789</p>
<p id="log"></p>
```


#### JavaScript


```js
const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;
```


#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setstart |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイスの索引
Range: cloneContents() メソッド
===========================

**`Range.cloneContents()`** は、 `Range` に含まれる `Node` 型のオブジェクトをコピーした `DocumentFragment` を返します。

`addEventListener()` を使用して追加されたイベントリスナーは、クローン作成中には複製されません。 HTML 属性のイベントは、 `Node.cloneNode()` メソッドの場合と同様に複製されます。メソッドと同じです。 HTML の `id` 属性も複製されますが、これは複製によって無効な文書になる可能性があります。

部分的に選択されたノードは、文書フラグメントを有効にするために必要な親タグが含まれます。

構文
--


```js
cloneContents()
```

### 引数

なし。

### 返値

`DocumentFragment` オブジェクトです。

例
-


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-clonecontents |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイスの索引
Range: collapse() メソッド
======================

**`Range.collapse()`** メソッドは、 `Range` を境界点の一つに折りたたみます。

折りたたまれた `Range` は空で、コンテンツを含まず、 DOM ツリーの単一の点を指定します。 `Range` が既に折りたたまれているかどうかを調べるには、 `Range.collapsed` プロパティを参照してください。

構文
--


```js
collapse()
collapse(toStart)
```

### 引数

`toStart` 省略可

論理値です。 `true` の場合は `Range` を先頭側に、`false` の場合は末尾側に折りたたみます。省略すると既定で `false` 
Experimental
 となります。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();

const referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-collapse |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: isPointInRange() メソッド
============================

**`Range.isPointInRange()`** メソッドは、指定されたこの点が `Range` 内にあるかどうかを示す論理値を返します。このメソッドは `ReferenceNode` 内の `offset` にある点（カーソル位置）がこの範囲内にある場合に `true` を返します。

構文
--


```js
isPointInRange(referenceNode, offset)
```

### 引数

`referenceNode`

`Range` と比較する `Node` です。

`offset`

`Range` と比較するこの点の `Node` 内のオフセットです。

### 返値

論理値です。

例
-


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
bool = range.isPointInRange(document.getElementsByTagName("p").item(0), 1);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-ispointinrange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: deleteContents() メソッド
============================

**`Range.deleteContents()`** メソッドは `Range` のコンテンツを `Document` から取り除きます。

`Range.extractContents()` とは異なり、このメソッドは削除されたコンテンツを含む `DocumentFragment` を返しません。

構文
--


```js
deleteContents()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.deleteContents();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-deletecontents |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: toString() メソッド
======================

**`Range.toString()`** メソッドは文字列化で、 `Range` のテキストを返します。

`Range` の内容を alert で表示すると、暗黙のうちに `toString()` を呼び出すので、アラートダイアログで範囲とテキストを比較しても効果がありません。

構文
--


```js
toString()
```

### 引数

なし。

### 返値

文字列です。

例
-

### HTML


```html
<p>
  This example logs <em>everything</em> between the emphasized <em>words</em>.
  Look at the output below.
</p>
<p id="log"></p>
```

### JavaScript


```js
const range = document.createRange();

range.setStartBefore(document.getElementsByTagName("em").item(0), 0);
range.setEndAfter(document.getElementsByTagName("em").item(1), 0);
document.getElementById("log").textContent = range.toString();
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-stringifier |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: setStartAfter() メソッド
===========================

**`Range.setStartAfter()`** メソッドは `Node` に対する `Range` の開始位置を設定します。 `Range` の開始位置の親 `Node` は `referenceNode` と同じになります。

構文
--


```js
setStartAfter(referenceNode)
```

### 引数

`referenceNode`

その後で `Range` を始める `Node` です。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setStartAfter(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setstartafter |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: commonAncestorContainer プロパティ
====================================

**`Range.commonAncestorContainer`** は読み取り専用のプロパティで、この `Range` の両方の境界点を含む、最も深い — または文書ツリー内で最も遠い — ノード (`Node`) を返します。つまり、`Range.startContainer` と `Range.endContainer` 両方が同じノードを参照する場合は、このノードは**共通の祖先コンテナー**です。

`Range` は連続している必要はなく、ノードを部分的に選択する場合もあり、これは `Range` を囲っている `Node` を見つけるときに便利な方法です。

このプロパティは読み取り専用です。 `Node` の共通の祖先コンテナーを変更するには、 `Range` の開始位置と終了位置を設定するために利用できるメソッド、例えば `Range.setStart()` と `Range.setEnd()` を使用することを検討してください。

値
-

`Node` オブジェクトです。

例
-

この例では、リスト上の `pointerup` イベントを取り扱うためイベントリスナーを作ります。このリスナーは選択したテキストの共通の祖先を取得して、それらを強調するアニメーションを起動します。

### HTML


```html
<ul>
  <li>
    Strings
    <ul>
      <li>Cello</li>
      <li>
        Violin
        <ul>
          <li>First Chair</li>
          <li>Second Chair</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Woodwinds
    <ul>
      <li>Clarinet</li>
      <li>Oboe</li>
    </ul>
  </li>
</ul>
```

### CSS

以下で作成した `.highlight` クラスは、フェードするアウトラインを動かすために一連の `@keyframes` を使用します。


```css
.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid #f00f;
  }
  to {
    outline: 1px solid #f000;
  }
}
```


```
body {
  padding: 1px;
}
```

### JavaScript


```js
document.addEventListener("pointerup", (e) => {
  const selection = window.getSelection();

  if (selection.type === "Range") {
    for (let i = 0; i < selection.rangeCount; i++) {
      const range = selection.getRangeAt(i);
      playAnimation(range.commonAncestorContainer);
    }
  }
});

function playAnimation(el) {
  if (el.nodeType === Node.TEXT\_NODE) {
    el = el.parentNode;
  }

  el.classList.remove("highlight");
  setTimeout(() => {
    el.classList.add("highlight");
  }, 0);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-commonancestorcontainer② |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: createContextualFragment() メソッド
======================================

**`Range.createContextualFragment()`** メソッドは、範囲の先頭ノード（選択されたノードの親）をコンテキストノードとして、 HTML フラグメント構文解析アルゴリズムまたは XML フラグメント構文解析アルゴリズムを呼び出して `DocumentFragment` を返します。 HTML フラグメント解釈アルゴリズムは、範囲が HTMLness ビットが設定された `Document` に属している場合に使用します。 HTML では、コンテキストノードが `html` である場合、歴史的な理由から、フラグメント解釈アルゴリズムは `body` をコンテキストとして呼び出されます。

構文
--


```js
createContextualFragment(tagString)
```

### 引数

`tagString`

文書フラグメントに変換するテキストとタグを格納するテキストです。

### 返値

`DocumentFragment` オブジェクトです。

例
-


```js
const tagString = "<div>I am a div node</div>";
const range = document.createRange();

// 文書内の最初の div の親をコンテキストノードにします。
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
```

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-range-createcontextualfragment-2 |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: cloneRange() メソッド
========================

**`Range.cloneRange()`** メソッドは、複製された `Range` と同じ境界点を持つ `Range` オブジェクトを返します。

返されるクローンは参照ではなく値でコピーされるので、どちらの `Range` を変更しても、もう一方に影響はありません。

構文
--


```js
cloneRange()
```

### 引数

なし。

### 返値

`Range` オブジェクトです。

例
-


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
clone = range.cloneRange();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-clonerange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: startContainer プロパティ
===========================

**`Range.startContainer`** は読み取り専用プロパティで、この `Range` が開始するノード (`Node`) を返します。ノードの開始位置を変更するには、 `Range.setStart()` 系メソッドのいずれかを使用してください。

値
-

`Node` オブジェクト。

例
-


```js
range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
startRangeNode = range.startContainer;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: setEndBefore() メソッド
==========================

**`Range.setEndBefore()`** メソッドは、 `Range` の終了位置を別の `Node` からの相対位置で設定します。 `Range` の終了位置の親 `Node` は `referenceNode` と同じになります。

構文
--


```js
setEndBefore(referenceNode)
```

### 引数

`referenceNode`

その前で `Range` を終わらせる `Node` です。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setEndBefore(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setendbefore |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: compareNode() メソッド
=========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`Range.compareNode()`** は `Node` の位置を示す定数を返します。

取りうる値は以下の通りです。

`NODE_BEFORE` (`0`)

Node はこの Range より前に始まる

`NODE_AFTER` (`1`)

Node はこの Range より後に終わる

`NODE_BEFORE_AND_AFTER` (`2`)

Node はこの Range より前に始まり、後に終わる

`NODE_INSIDE` (`3`)

Node はこの Range より後に始まり、前に終わる。すなわち、ノードは完全にこの Range に選択されている。


**警告:** このメソッドは Gecko 1.9 から削除され (en-US)、唯一実装していた Firefox の将来のバージョンでは存在しません。使用可能な限り早く `Range.compareBoundaryPoints()` に切り替えるべきです。

以下の関数が置き換えの関数として使用できます。


```js
function rangeCompareNode(range, node) {
  const nodeRange = node.ownerDocument.createRange();
  try {
    nodeRange.selectNode(node);
  } catch (e) {
    nodeRange.selectNodeContents(node);
  }
  const nodeIsBefore =
    range.compareBoundaryPoints(Range.START\_TO\_START, nodeRange) === 1;
  const nodeIsAfter =
    range.compareBoundaryPoints(Range.END\_TO\_END, nodeRange) === -1;

  if (nodeIsBefore && !nodeIsAfter) return 0;
  if (!nodeIsBefore && nodeIsAfter) return 1;
  if (nodeIsBefore && nodeIsAfter) return 2;

  return 3;
}
```

構文
--


```js
compareNode(referenceNode)
```

### 引数

`referenceNode`

この `Range` と比較する `Node` です。

### 返値

`Node` の位置を示す定数。

例
-


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
returnValue = range.compareNode(document.getElementsByTagName("p").item(0));
```

メモ
--

このメソッドは廃止されました。W3C DOM `Range.compareBoundaryPoints()` メソッドを使用しましょう。

仕様書
---

このメソッドは標準ではないため、どの仕様にも属しません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: setEnd() メソッド
====================

**`Range.setEnd()`** メソッドは `Range` の終了位置を指定されたノードの指定されたオフセットに設定します。 終点を始点より上（文書内の高い位置）に設定すると、始点と終点の両方が指定した終点位置に設定された、折りたたまれた範囲になります。

構文
--


```js
setEnd(endNode, endOffset)
```

### 引数

`endNode`

中で `Range` が終わる `Node` です。

`endOffset`

0 以上の整数で、 `endNode` の始点から `Range` の終点のオフセットを表します。

### 返値

なし (`undefined`)。

### 例外

`InvalidNodeTypeError` `DOMException`

`endNode` で指定されたノードは doctype ノードです。範囲の終点は doctype ノード内に配置することはできません。

`IndexSizeError` `DOMException`

`endOffset` で指定された値は、ノードの長さ以上であるか、 0 未満です。

使用上の注意
------

`endNode` が `Text`、`Comment`、`CDataSection` のいずれかの型の `Node` である場合、 `endOffset` は `endNode` の開始位置からの文字数です。他の型の `Node` である場合、 `endOffset` は `endNode` の始点からの子ノードの数を指定します。

例
-


```js
const range = document.createRange();
const endNode = document.getElementsByTagName("p").item(3);
const endOffset = endNode.childNodes.length;
range.setEnd(endNode, endOffset);
```


**メモ:** `setEnd()` は `setStart()` と組み合わせて使用するのが一般的です。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setend |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: compareBoundaryPoints() メソッド
===================================

**`Range.compareBoundaryPoints()`** メソッドは、 `Range` の境界点を別の範囲のものと比較します。

構文
--


```js
compareBoundaryPoints(how, sourceRange)
```

### 引数

`how`

定数で、比較メソッドを説明します。

* `Range.END_TO_END` は *sourceRange* の終わりの境界点と `Range` の終わりの境界点を比較します。
* `Range.END_TO_START` は *sourceRange* の終わりの境界点と `Range` の始まりの境界点を比較します。
* `Range.START_TO_END` は *sourceRange* の始まりの境界点と `Range` の終わりの境界点を比較します。
* `Range.START_TO_START` は *sourceRange* の始まりの境界点と `Range` の始まりの境界点を比較します。

`sourceRange`

範囲との境界点を比較するための `Range` です。

### 返値

`-1`, `0`, `1` のいずれかの数値で、 `Range` の対応する境界点が *sourceRange* の対応する境界点より前か、等しいか、後かを示します。

### 例外

`NotSupportedError` `DOMException`

`how` 引数の値が無効な場合に発生します。

例
-


```js
const range = document.createRange();
range.selectNode(document.querySelector("div"));
const sourceRange = document.createRange();
sourceRange.selectNode(document.getElementsByTagName("div")[1]);
const compare = range.compareBoundaryPoints(Range.START\_TO\_END, sourceRange);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-compareboundarypoints |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: detach() メソッド
====================

**`Range.detach()`** メソッドは何もしません。使用するのは `Range` オブジェクトを無効にして、ブラウザーが関連リソースを解放できるようにするためです。このメソッドは互換性のために維持されています。

構文
--


```js
detach()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();

range.selectNode(document.getElementsByTagName("div").item(0));
range.detach();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-detach |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: collapsed プロパティ
======================

**`Range.collapsed`** は読み取り専用プロパティで、 `Range` の開始点と終了点が同じ位置にあるかどうかを示す論理型フラグを返します。 `Range` の開始境界点と終了境界点が DOM 上で同じ位置であれば `true` を、そうでなければ `false` を返します。

折りたたまれた `Range` は空であり（内容を含まない）、 DOM ツリー内の 1 つの点を指定します。範囲を折りたたむには、 `Range.collapse()` メソッドを参照してください。

値
-

論理値。

例
-


```js
let range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
isCollapsed = range.collapsed;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引
Range: getClientRects() メソッド
============================

**`Range.getClientRects()`** メソッドは、範囲が占める画面の領域を表す `DOMRect` オブジェクトのリストを返します。これは、 `Element.getClientRects()` を呼び出した結果を集約して作成されます。

構文
--


```js
getClientRects()
```

### 引数

None.

### 返値

反復可能な `DOMRect` オブジェクトの並びです。

例
-

### 選択されたクライアント矩形のサイズのログ記録

#### HTML


```html
<div></div>
<pre id="output"></pre>
```


#### CSS


```css
div {
  height: 80px;
  width: 200px;
  background-color: blue;
}
```


#### JavaScript


```js
const range = document.createRange();
range.selectNode(document.querySelector("div"));
rectList = range.getClientRects();

const output = document.querySelector("#output");
for (const rect of rectList) {
  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-range-getclientrects |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Range`
Range: selectNode() メソッド
========================

The **`Range.selectNode()`** メソッドは `Range` に `Node` とその内容を格納するように設定します。 `Range` の始めと終わりの親 `Node` は *referenceNode* の親と同じになります。

構文
--


```js
selectNode(referenceNode)
```

### 引数

`referenceNode`

`Range` の中にある選択する `Node` です。

### 返値

なし (`undefined`)。

例
-


```js
let range = document.createRange();
let referenceNode = document.getElementsByTagName("div").item(0);

range.selectNode(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-selectnode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM インターフェイス索引