diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/range | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/range')
-rw-r--r-- | files/ja/web/api/range/clonecontents/index.html | 59 | ||||
-rw-r--r-- | files/ja/web/api/range/collapsed/index.html | 27 | ||||
-rw-r--r-- | files/ja/web/api/range/commonancestorcontainer/index.html | 127 | ||||
-rw-r--r-- | files/ja/web/api/range/endcontainer/index.html | 57 | ||||
-rw-r--r-- | files/ja/web/api/range/endoffset/index.html | 61 | ||||
-rw-r--r-- | files/ja/web/api/range/index.html | 147 | ||||
-rw-r--r-- | files/ja/web/api/range/intersectsnode/index.html | 47 | ||||
-rw-r--r-- | files/ja/web/api/range/setstart/index.html | 112 | ||||
-rw-r--r-- | files/ja/web/api/range/startcontainer/index.html | 55 | ||||
-rw-r--r-- | files/ja/web/api/range/startoffset/index.html | 63 |
10 files changed, 755 insertions, 0 deletions
diff --git a/files/ja/web/api/range/clonecontents/index.html b/files/ja/web/api/range/clonecontents/index.html new file mode 100644 index 0000000000..27b7da2a93 --- /dev/null +++ b/files/ja/web/api/range/clonecontents/index.html @@ -0,0 +1,59 @@ +--- +title: Range.cloneContents() +slug: Web/API/Range/cloneContents +translation_of: Web/API/Range/cloneContents +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Range.cloneContents()</code></strong>は、{{ domxref("Range") }}に含まれる{{ domxref("Node") }}タイプのオブジェクトをコピーする{{ domxref("DocumentFragment") }}を返します。</p> + +<p>DOMイベントを使用して追加されたイベントリスナーは、複製中にコピーされません。 HTML属性イベントは、DOM Core cloneNodeメソッドの場合と同様に複製されます。 HTML id属性も複製されるため、複製によって無効なドキュメントが作成される可能性があります。</p> + +<p>部分的に選択されたノードには、ドキュメントフラグメントを有効にするために必要な親タグが含まれます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>documentFragment </em>= <em>range</em>.cloneContents(); +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">range = document.createRange(); +range.selectNode(document.getElementsByTagName("div").item(0)); +documentFragment = range.cloneContents(); +document.body.appendChild(documentFragment); +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-clonecontents', 'Range.cloneContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-cloneContents', 'Range.cloneContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Range.cloneContents")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/ja/web/api/range/collapsed/index.html b/files/ja/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..4d7f3ffe3c --- /dev/null +++ b/files/ja/web/api/range/collapsed/index.html @@ -0,0 +1,27 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Range/collapsed +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Summary</h3> +<p>range の始点と終点が同じ位置にあるか、boolean値を返します。</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval notranslate">isCollapsed = range.collapsed; +</pre> +<h3 id="Example" name="Example">Example</h3> +<pre class="eval notranslate">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +isCollapsed = range.collapsed; +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>range の始点と終点が DOM において同じ点にあるとき、true を返し、そうでないとき false を返します。</p> +<p>折り畳まれた range は空で、内容を含まず、DOM tree 内の1点を示しています。collapsed プロパティは読取専用です。range の折り畳みについては、<a href="ja/DOM/range.collapse"> collapse</a> メソッドを参照してください。</p> +<h3 id="Specification" name="Specification">Specification</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-collapsed">collapsed</a></p> +<p>{{ languages( { "en": "en/DOM/range.collapsed", "es": "es/DOM/range.collapsed" } ) }}</p> diff --git a/files/ja/web/api/range/commonancestorcontainer/index.html b/files/ja/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..114ebdc5d6 --- /dev/null +++ b/files/ja/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,127 @@ +--- +title: Range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +<div>{{ApiRef("DOM")}}</div> + +<div><code><strong>Range.commonAncestorContainer</strong></code> は読み込み専用のプロパティで、{{domxref("Range")}}の中の <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Position-h3">境界点</a> で最も深いもしくはドキュメントツリーから最も遠い両方を含む {{domxref("Node")}} を返します。つまり、{{domxref("Range.startContainer")}} と {{domxref("Range.endContainer")}} 両方が同じノードを参照する場合は、このノードは<strong>共通の祖先コンテナ</strong>です。</div> + +<div></div> + +<div><code>Range</code> は連続している必要はなく、ノードを部分的に選択する場合もあり、これは <code>Range</code> を囲っている <code>Node</code> を見つけるときに便利な方法です。</div> + +<div></div> + +<div>これは読み取り専用プロパティです。 <code>Node</code> の共通祖先コンテナを変更するため、<code>Range</code> の開始位置と終了位置をセットするため {{domxref("Range.setStart()")}} と {{domxref("Range.setEnd()")}} のような利用可能な様々なメソッドを利用することを検討します。</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>rangeAncestor</em> = <em>range</em>.commonAncestorContainer;</pre> + +<h2 id="使用例">使用例</h2> + +<p>この例ではリスト上の {{Event("pointerup")}} イベントを取り扱うためイベントリスナーを作ります。このリスナーは選択したテキスト共通祖先を取得して、それらをハイライトするアニメーションを引き起こします。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="CSS">CSS</h3> + +<p>作成した以下の <code>.highlight</code> クラスはフェードするアウトラインを動かすためのCSS {{cssxref("@keyframes")}} のセットを使用します。</p> + +<pre class="brush: css notranslate">.highlight { + animation: highlight linear 1s; +} + +@keyframes highlight { + from { outline: 1px solid #f00f; } + to { outline: 1px solid #f000; } +}</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + padding: 1px; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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); +}</pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example", 700, 190)}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-commonancestorcontainer', 'Range.commonAncestorContainer')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-commonParent', 'Range.commonAncestorContainer')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Range.commonAncestorContainer")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/ja/web/api/range/endcontainer/index.html b/files/ja/web/api/range/endcontainer/index.html new file mode 100644 index 0000000000..0c64e17548 --- /dev/null +++ b/files/ja/web/api/range/endcontainer/index.html @@ -0,0 +1,57 @@ +--- +title: Range.endContainer +slug: Web/API/Range/endContainer +translation_of: Web/API/Range/endContainer +--- +<div>{{ApiRef("DOM")}}</div> + +<p>The <strong><code>Range.endContainer</code></strong> は読み取り専用プロパティで、{{domxref("Range")}} 終了位置の中の{{domxref("Node")}} を返します。ノードの終了位置を変更するために {{domxref("Range.setEnd()")}} または同様のメソッドを利用します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>endRangeNode</em> = <em>range</em>.endContainer; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">var range = document.createRange(); + +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +endRangeNode = range.endContainer; + +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-endcontainer', 'Range.endContainer')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-endParent', 'Range.endContainer')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Range.endContainer")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/ja/web/api/range/endoffset/index.html b/files/ja/web/api/range/endoffset/index.html new file mode 100644 index 0000000000..b4583e85bb --- /dev/null +++ b/files/ja/web/api/range/endoffset/index.html @@ -0,0 +1,61 @@ +--- +title: Range.endOffset +slug: Web/API/Range/endOffset +translation_of: Web/API/Range/endOffset +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code><strong>Range.endOffset</strong></code> 読み取り専用プロパティは、 {{domxref("Range.endContainer")}} の {{domxref("Range")}} が終了する場所を表す数値を返します。</p> + +<p><code>endContainer</code>が {{domxref("Text")}}、{{domxref("Comment")}}、または{{domxref("CDATASection")}} タイプの{{domxref("Node")}}である場合、オフセットは終了コンテナの開始から{{domxref("Range")}}の境界点までの文字数です。</p> + +<p>他の「ノード」タイプの場合、<code>endOffset</code>は、<code>endContainer</code>の開始点と{{domxref("Range")}}の境界点の間の子ノードの数です。</p> + +<p>このプロパティは読み取り専用です。 {{domxref("Range")}}の<code>endOffset</code>を変更するには、{{domxref("Range.setEnd")}}メソッドのいずれかを使用します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>endRangeOffset</em> = <em>range</em>.endOffset; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">var range = document.createRange(); + +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +endRangeOffset = range.endOffset;</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-endoffset', 'Range.endOffset')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-endOffset', 'Range.endOffset')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Range.endOffset")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/ja/web/api/range/index.html b/files/ja/web/api/range/index.html new file mode 100644 index 0000000000..4edb6c4d41 --- /dev/null +++ b/files/ja/web/api/range/index.html @@ -0,0 +1,147 @@ +--- +title: Range +slug: Web/API/Range +tags: + - API + - DOM +translation_of: Web/API/Range +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Range</code></strong> インターフェイスは、ノードやテキストノードの部品を含むことができる文書の断片を表します。</p> + +<p>Range は {{domxref("document")}} オブジェクトの {{domxref("document.createRange", "createRange()")}} メソッドにより生成することができます。また、{{domxref("Selection")}} オブジェクトの {{domxref("Selection/getRangeAt", "getRangeAt()")}} メソッドや {{domxref("Document")}} オブジェクトの {{domxref("Document/caretRangeFromPoint", "caretRangeFromPoint()")}} メソッドにより取得することもできます。</p> + +<p>さらに、{{domxref("Range.Range()", "Range()")}} コンストラクターも使用できます。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>継承しているプロパティはありません。</em></p> + +<dl> + <dt>{{domxref("Range.collapsed")}} {{readonlyInline}}</dt> + <dd>Range の始点と終点が同じ位置にあるか否かを示す {{domxref("Boolean")}} を返す</dd> + <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt> + <dd><code>startContainer</code> と <code>endContainer</code> をともに含む、最も深い {{domxref("Node")}} を返す</dd> + <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt> + <dd><code>Range</code> の終点を含む {{domxref("Node")}} を返す</dd> + <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt> + <dd><code>endContainer</code> の中での <code>Range</code> の終点の位置を示す数字を返す</dd> + <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt> + <dd><code>Range</code> の始点を含む {{domxref("Node")}} を返す</dd> + <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt> + <dd><code>startContainer</code> の中での <code>Range</code> の始点の位置を示す数字を返す</dd> +</dl> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt> + <dd>始点および終点がグローバルな {{domxref("Document")}} である <code>Range</code> オブジェクトを返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>継承しているメソッドはありません。</em></p> + +<dl> + <dt>{{ domxref("Range.setStart()")}}</dt> + <dd><code>Range</code> の始点を設定</dd> + <dt>{{ domxref("Range.setEnd()")}}</dt> + <dd><code>Range</code> の終点を設定</dd> + <dt>{{ domxref("Range.setStartBefore()")}}</dt> + <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の始点を設定</dd> + <dt>{{ domxref("Range.setStartAfter()")}}</dt> + <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の始点を設定</dd> + <dt>{{ domxref("Range.setEndBefore()")}}</dt> + <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の終点を設定</dd> + <dt>{{ domxref("Range.setEndAfter()")}}</dt> + <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の終点を設定</dd> + <dt>{{ domxref("Range.selectNode()")}}</dt> + <dd><code>Range</code> を、ある {{domxref("Node")}} とその内容を含むように設定</dd> + <dt>{{ domxref("Range.selectNodeContents()")}}</dt> + <dd><code>Range</code> を、ある {{domxref("Node")}} の内容を含むように設定</dd> + <dt>{{ domxref("Range.collapse()")}}</dt> + <dd><code>Range</code> をその端点の一方へ折りたたむ</dd> + <dt>{{ domxref("Range.cloneContents()")}}</dt> + <dd><code>Range</code> の中身をコピーした {{domxref("DocumentFragment")}} を返す</dd> + <dt>{{ domxref("Range.deleteContents()")}}</dt> + <dd><code>Range</code> の中身を {{domxref("Document")}} から削除</dd> + <dt>{{ domxref("Range.extractContents()")}}</dt> + <dd><code>Range</code> の中身をドキュメントツリーから {{domxref("DocumentFragment")}} に移動</dd> + <dt>{{ domxref("Range.insertNode()")}}</dt> + <dd><code>Range</code> の始点に {{domxref("Node")}} を挿入</dd> + <dt>{{ domxref("Range.surroundContents()")}}</dt> + <dd><code>Range</code> の中身を新しい {{domxref("Node")}} の中に移動</dd> + <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt> + <dd>2 つの <code>Range</code> の端点の位置を比較</dd> + <dt>{{ domxref("Range.cloneRange()")}}</dt> + <dd>元の <code>Range</code> と同じ端点を持つ <code>Range</code> オブジェクトを返す</dd> + <dt>{{ domxref("Range.detach()")}}</dt> + <dd>パフォーマンスを改善するために、 <code>Range</code> を使用状態から開放</dd> + <dt>{{ domxref("Range.toString()")}}</dt> + <dd><code>Range</code> の内容を文字列として返す</dd> + <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt> + <dd>{{domxref("Node")}} が range の前、後、中、外のうちのいずれの場所にあるかを示す定数を返す</dd> + <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt> + <dd>指定された点が <code>Range</code> の前、中、後のうちのいずれの場所にあるかを -1、0、1 で示す</dd> + <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt> + <dd>渡された文字列から生成した {{domxref("DocumentFragment")}} を返す</dd> + <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt> + <dd><code>Range</code> の内容の全体に結びつく {{domxref("DOMRect")}} オブジェクトを返します。これは、{{domxref("Range.getClientRects()")}} が返すすべての長方形の集合体です。</dd> + <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt> + <dd><code>Range</code> 内のすべての要素について、{{domxref("Element.getClientRects()")}} の結果をまとめた {{domxref("DOMRect")}} オブジェクトのリストを返します。</dd> + <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt> + <dd>指定ノードの範囲が <code>Range</code> と交差するか否かを示す <code>boolean</code> を返す</dd> + <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt> + <dd>与えられた点が <code>Range</code> の中にあるか否かを示す <code>boolean</code> を返す</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>今後は <code>RangeException</code> は使用せず、代わりに <code>DOMException</code> を使用します。<br> + <code>collapse()</code> の第 2 引数を省略可能に変更。<br> + <code>isPointInRange()</code>, <code>comparePoint()</code>, <code>intersectsNode()</code> メソッドを追加。<br> + <code>Range()</code> コンストラクターを追加。</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td><code>createContextualFragment()</code> メソッドを追加。</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td><code>getClientRects()</code> および <code>getBoundingClientRect()</code> メソッドを追加。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>s初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Range")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/DOM/DOM_Reference" title="DOM/DOM_Reference">DOM インターフェイスの索引</a></li> +</ul> diff --git a/files/ja/web/api/range/intersectsnode/index.html b/files/ja/web/api/range/intersectsnode/index.html new file mode 100644 index 0000000000..3efd79b0a4 --- /dev/null +++ b/files/ja/web/api/range/intersectsnode/index.html @@ -0,0 +1,47 @@ +--- +title: range.intersectsNode +slug: Web/API/Range/intersectsNode +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Range/intersectsNode +--- +<div> + {{ApiRef}} {{Obsolete_header}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>指定ノードが range と交差するか否かを示すブール値を返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox notranslate">bool = range.intersectsNode( referenceNode ) +</pre> +<h3 id="Parameters" name="Parameters">引数</h3> +<dl> + <dt> + referenceNode</dt> + <dd> + <code>Range</code> と比較する <code>Node</code></dd> +</dl> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js notranslate">var range = document.createRange(); + +range.selectNode(document.getElementsByTagName("div").item(0)); +var bool = range.intersectsNode(document.getElementsByTagName("p").item(0));</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>このメソッドは廃止されました。代わりに W3C DOM Range メソッドを用います(※参照: <code><a href="/ja/docs/DOM/range.compareBoundaryPoints">compareBoundaryPoints()</a></code> )</p> +<div class="warning"> + <b>注意:</b> このメソッドは <a href="/en-US/docs/Gecko">Gecko</a> 1.9 より<a href="/ja/docs/Gecko_1.9_Changes_affecting_websites">削除されています</a>。もし既にこのメソッドを用いている場合、出来るだけ早く、 <code>compareBoundaryPoints()</code> に切り替えて下さい。</div> +<p>次の関数を代替として用いる事が出来ます。</p> +<pre class="brush:js notranslate">function rangeIntersectsNode(range, node) { + var nodeRange = node.ownerDocument.createRange(); + try { + nodeRange.selectNode(node); + } + catch (e) { + nodeRange.selectNodeContents(node); + } + + return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 && + range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1; +}</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>このメソッドは仕様書には含まれていません。</p> diff --git a/files/ja/web/api/range/setstart/index.html b/files/ja/web/api/range/setstart/index.html new file mode 100644 index 0000000000..602b195c6b --- /dev/null +++ b/files/ja/web/api/range/setstart/index.html @@ -0,0 +1,112 @@ +--- +title: Range.setStart +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +<p>{{ apiref("Range") }}</p> + +<p><strong><code>Range.setStart()</code></strong> メソッドは{{ domxref("Range") }}の開始位置を指定します。</p> + +<p><code>startNode</code> が <code>Text</code>, <code>Comment</code>, あるいは <code>CDATASection</code> タイプの {{ domxref("Node") }} であるとき、<code>startOffset</code>は<code>startNode</code>の開始位置からの文字数です。その他の<code>Node</code>タイプの場合、 <code>startOffset</code>は<code>startNode</code>からの子ノード数です。</p> + +<p>開始位置を終了位置よりも下(ドキュメントよりも下)に指定すると <code>ERROR_ILLEGAL_VALUE</code> {{domxref("DOMException")}} 例外が投げられます。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><em>startNode</em></dt> + <dd>{{ domxref("Range") }} を開始する {{ domxref("Node") }}</dd> + <dt><em>startOffset</em><code> </code></dt> + <dd>{{ domxref("Range") }}の開始位置を示す<code>startNode</code>オフセット(非負整数)</dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush: js notranslate">var range = document.createRange(); +var startNode = document.getElementsByTagName("p").item(2); +var startOffset = 0; +range.setStart(startNode,startOffset); +</pre> + +<h2 id="Specification" name="Specification">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/ja/web/api/range/startcontainer/index.html b/files/ja/web/api/range/startcontainer/index.html new file mode 100644 index 0000000000..9f9ca075e5 --- /dev/null +++ b/files/ja/web/api/range/startcontainer/index.html @@ -0,0 +1,55 @@ +--- +title: Range.startContainer +slug: Web/API/Range/startContainer +translation_of: Web/API/Range/startContainer +--- +<p>{{ApiRef("DOM")}}</p> + +<p><code><strong>Range.startContainer</strong></code>読み取り専用プロパティは、<code>Range</code>が開始する{{domxref("Node")}}を返します。ノードの開始位置を変更するには、{{domxref("Range.setStart()")}}メソッドのいずれかを使用します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>startRangeNode</em> = <em>range</em>.startContainer; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +startRangeNode = range.startContainer; +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-startcontainer', 'Range.endContainer')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-startParent', 'Range.startContainer')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Range.startContainer")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/ja/web/api/range/startoffset/index.html b/files/ja/web/api/range/startoffset/index.html new file mode 100644 index 0000000000..76bf050c65 --- /dev/null +++ b/files/ja/web/api/range/startoffset/index.html @@ -0,0 +1,63 @@ +--- +title: Range.startOffset +slug: Web/API/Range/startOffset +translation_of: Web/API/Range/startOffset +--- +<p>{{ApiRef("DOM")}}</p> + +<p><code><strong>Range.startOffset</strong></code>読み取り専用プロパティは、<code>startContainer</code>の<code>Range</code>の開始位置を表す数値を返します。</p> + +<p><code>startContainer</code>がタイプ{{domxref("Text")}}、{{domxref("Comment")}}、または{{domxref("CDATASection")}}の{{domxref("Node")}}である場合、オフセットは<code>startContainer</code>の開始から{{domxref("Range")}}.の境界点までの文字数です。他の{{domxref("Node")}}タイプの場合、<code>startOffset</code>は、<code>startContainer</code>の開始点と{{domxref("Range")}}の境界点の間の子ノードの数です。</p> + + + + + +<p>{{domxref("Range")}}の<code>startOffset</code>を変更するには、{{domxref("Range.setStart")}} メソッドを使用します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>startRangeOffset</em> = <em>range</em>.startOffset; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">var range = document.createRange(); +range.setStart(startNode,startOffset); +range.setEnd(endNode,endOffset); +var startRangeOffset = range.startOffset; +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-range-startoffset', 'Range.startOffset')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-startOffset', 'Range.startOffset')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Range.startOffset")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> |