From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/range/commonancestorcontainer/index.html | 127 +++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/ja/web/api/range/commonancestorcontainer/index.html (limited to 'files/ja/web/api/range/commonancestorcontainer/index.html') 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 +--- +
{{ApiRef("DOM")}}
+ +
Range.commonAncestorContainer は読み込み専用のプロパティで、{{domxref("Range")}}の中の 境界点 で最も深いもしくはドキュメントツリーから最も遠い両方を含む {{domxref("Node")}} を返します。つまり、{{domxref("Range.startContainer")}} と {{domxref("Range.endContainer")}} 両方が同じノードを参照する場合は、このノードは共通の祖先コンテナです。
+ +
+ +
Range は連続している必要はなく、ノードを部分的に選択する場合もあり、これは Range を囲っている Node を見つけるときに便利な方法です。
+ +
+ +
これは読み取り専用プロパティです。 Node の共通祖先コンテナを変更するため、Range の開始位置と終了位置をセットするため {{domxref("Range.setStart()")}} と {{domxref("Range.setEnd()")}} のような利用可能な様々なメソッドを利用することを検討します。
+ +

構文

+ +
rangeAncestor = range.commonAncestorContainer;
+ +

使用例

+ +

この例ではリスト上の {{Event("pointerup")}} イベントを取り扱うためイベントリスナーを作ります。このリスナーは選択したテキスト共通祖先を取得して、それらをハイライトするアニメーションを引き起こします。

+ +

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 クラスはフェードするアウトラインを動かすためのCSS {{cssxref("@keyframes")}} のセットを使用します。

+ +
.highlight {
+  animation: highlight linear 1s;
+}
+
+@keyframes highlight {
+  from { outline: 1px solid #f00f; }
+  to   { outline: 1px solid #f000; }
+}
+ + + +

JavaScript

+ +
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);
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 190)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-range-commonancestorcontainer', 'Range.commonAncestorContainer')}}{{Spec2('DOM WHATWG')}}変更なし
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-commonParent', 'Range.commonAncestorContainer')}}{{Spec2('DOM2 Traversal_Range')}}初期仕様
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Range.commonAncestorContainer")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf