diff options
Diffstat (limited to 'files/ja/web/api/element')
91 files changed, 9774 insertions, 0 deletions
diff --git a/files/ja/web/api/element/accesskey/index.html b/files/ja/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..04c95baf10 --- /dev/null +++ b/files/ja/web/api/element/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<div><font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong>は、</font>ユーザが他の要素へジャンプする時に押す、<font face="Consolas, Monaco, Andale Mono, monospace">キーストロークを設定します。</font></div> + +<div> </div> + +<div class="note"> +<p><code>Element.accessKey</code> は、ブラウザの既定のキーバインディングと競合する為、めったに使われません。この競合を回避するために、ブラウザはアクセスキーの挙動を他の「最適な」キーと一緒に押されたときに動くように実装しています。（ <kbd>Alt</kbd> + アクセスキー、の様に。）</p> +</div> + +<h4 id="See_also">See also </h4> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">HTML Global attributes, accesskey</a></li> +</ul> diff --git a/files/ja/web/api/element/animate/index.html b/files/ja/web/api/element/animate/index.html new file mode 100644 index 0000000000..dc6e4a39aa --- /dev/null +++ b/files/ja/web/api/element/animate/index.html @@ -0,0 +1,202 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +translation_of: Web/API/Element/animate +--- +<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div> + +<p>{{domxref("Element")}} インターフェースの <strong><code>animate()</code></strong> メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>keyframes</code></dt> +</dl> + +<ol> + <li>列挙可能な値の配列をプロパティに持つ keyframes オブジェクト</li> + <li>keyframes オブジェクトから成る配列</li> +</ol> + +<dl> + <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd> + <dd> + <ol> + <li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト + <pre class="brush: js"><em>element.</em>animate({ + opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ] + color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ] +}, 2000); +</pre> + </li> + <li>CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列 + <pre class="brush: js"><em>element</em>.animate([ + { // フレーム 1 + opacity: 0, + color: "#fff" + }, + { // フレーム 2 + opacity: 1, + color: "#000" + } +], 2000);</pre> + </li> + </ol> + </dd> + <dt><code>options</code></dt> + <dd>アニメーションの再生時間を表す ms 単位の整数値、または <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd> +</dl> + +<h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4> + +<dl> + <dt><code>id</code></dt> + <dd>アニメーションを参照する文字列</dd> +</dl> + +<dl> + <dt><code>composite</code></dt> + <dd>Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は <code>replace</code> です。 + <ul> + <li><code>add</code> dictates an additive effect, where each successive iteration builds on the last. 例として <code>transform</code> <code>を挙げると</code>、<code>translateX(-200px)</code> は自身よりも前に指定されていた <code>rotate(20deg)</code> の値を上書きすることはありませんが、合成結果は <code>translateX(-200px) rotate(20deg)</code> になります。</li> + <li><code>accumulate</code> を指定した場合、<code>add</code> に似ていますがよりスマートな結果が得られ、<code>blur(2)</code> と <code>blur(5)</code> の合成結果は <code>blur(7)</code> になります（<code>blur(2) blur(5)</code> ではありません）。</li> + <li><code>replace</code> を指定した場合、前回の値は新しい値で上書きされます。</li> + </ul> + </dd> + <dt><code>iterationComposite</code></dt> + <dd>Defines the way animation values build from iteration to iteration. <code>accumulate</code> または <code>replace</code> を指定できます（上記参照）。デフォルト値は <code>replace</code> です。</dd> + <dt><code>spacing</code></dt> + <dd>アニメーションの再生時間内にわたって、時間軸上におけるキーフレームの配置方法を指定します。ただし、時間のオフセットは指定されていないものと仮定して計算が行われます。デフォルト値は <code>distribute</code> です。 + <ul> + <li><code>distribute</code> を指定した場合、キーフレーム間の時間間隔が等しくなるように配置されます。</li> + <li><code>paced</code> を指定した場合、キーフレーム間のアニメーションにおける時間変化の割合（下図におけるグラフの傾き）が等しくなるように配置されます。</li> + </ul> + + <p>以下の例では、CSS の left プロパティに関する 4 つのキーフレームを指定したアニメーションについて、spacing プロパティの働きを示しています（ここでは<a href="https://w3c.github.io/web-animations/#spacing-keyframes">仕様書の例</a>を参考にしています）。</p> + + <pre class="brush: js">/* 左のグラフ */ +elem.animate([ { left: '0px' }, + { left: '-20px' }, + { left: '100px' }, + { left: '50px' } + ], 1000); /* spacing はデフォルト値 "distribute" */ +</pre> + + <pre class="brush: js">/* 右のグラフ */ +elem.animate([ { left: '0px' }, + { left: '-20px' }, + { left: '100px' }, + { left: '50px' } + ], { duration: 1000, spacing: "paced(left)" });</pre> + + <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> + </dd> +</dl> + +<h3 id="戻り値">戻り値</h3> + +<p>{{domxref("Animation")}} を返します。</p> + +<h2 id="使用例">使用例</h2> + +<p><a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> のデモでは、上に向かって永遠に流れ続けるアニメーションが <code>#tunnel</code> 要素に施されています。ここでは、アニメーションを素早く作成して再生できる <code>animate()</code> メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。</p> + +<pre class="brush: js">document.getElementById("tunnel").animate([ + // keyframes + { transform: 'translate3D(0, 0, 0)' }, + { transform: 'translate3D(0, -300px, 0)' } +], { + // timing options + duration: 1000, + iterations: Infinity +}); +</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('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Editor's draft.</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome("39")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <p>基本サポート</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li>{{domxref("Animation")}}</li> +</ul> diff --git a/files/ja/web/api/element/attachshadow/index.html b/files/ja/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..360211b65a --- /dev/null +++ b/files/ja/web/api/element/attachshadow/index.html @@ -0,0 +1,166 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +tags: + - API + - Element + - Method + - Reference + - attachShadow + - shadow dom + - メソッド +translation_of: Web/API/Element/attachShadow +--- +<div>{{APIRef('Shadow DOM')}}</div> + +<p><strong><code>Element.attachShadow()</code></strong> メソッドは、シャドウ DOM ツリーを特定の要素に追加し、そのシャドウルート ({{domxref("ShadowRoot")}}) への参照を返します。</p> + +<h2 id="Elements_you_can_attach_a_shadow_to" name="Elements_you_can_attach_a_shadow_to">シャドウツリーを追加できる要素</h2> + +<p>シャドウルートは全ての要素に追加できるわけではありません。 ({{htmlelement("a")}} など) セキュリティ上の理由でシャドウ DOM を持てないものもあります。以下にシャドウルートを追加<strong>できる</strong>要素を列挙します。</p> + +<ul> + <li>任意のカスタム要素で<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">有効な名前</a>を持つもの</li> + <li>{{htmlelement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("body")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("h1")}}</li> + <li>{{htmlelement("h2")}}</li> + <li>{{htmlelement("h3")}}</li> + <li>{{htmlelement("h4")}}</li> + <li>{{htmlelement("h5")}}</li> + <li>{{htmlelement("h6")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("p")}}</li> + <li>{{htmlelement("section")}}</li> + <li>{{htmlelement("span")}}</li> +</ul> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>shadowroot</var> = <var>element</var>.attachShadow(<var>shadowRootInit</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>shadowRootInit</var></code></dt> + <dd><code>ShadowRootInit</code> ディクショナリで、以下のプロパティを含みます。 + <dl> + <dt><code>mode</code></dt> + <dd> + <p>文字列で、シャドウ DOM ツリーの<em>カプセル化モード</em>を指定します。以下のうちの一つを取ります。</p> + + <ul> + <li><code>open</code>: シャドウルートに外部の JavaScript からアクセスできます。例えば、 {{domxref("Element.shadowRoot")}} を使ってアクセスできます。<br> + + <pre>element.shadowRoot; // ShadowRoot オブジェクトを返します</pre> + </li> + <li><code>closed</code>: シャドウルートに外部の JavaScript からアクセスできません。<br> + + <pre>element.shadowRoot; // null を返します +</pre> + </li> + </ul> + </dd> + <dt><code>delegatesFocus</code></dt> + <dd>真偽値で、 <code>true</code> に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウホストは <code>:focus</code> のスタイルを利用することができます。</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{domxref("ShadowRoot")}} オブジェクトです。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">例外</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidStateError</code></td> + <td>shadow root を追加しようとしている要素は、すでに shadow host です。</td> + </tr> + <tr> + <td><code>NotSupportedError</code></td> + <td>shadow root を追加しようとしている要素は、HTML の名前空間外であるか、shadow DOM を持てない要素です(上記の通り)。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例は <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> のデモを使用しています(<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">実行例</a>)。 <code>attachShadow()</code> はコードの真ん中付近で shadow root を作るために使用されています。その後カスタム要素を追加しています。</p> + +<pre class="brush: js">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // count words in element's parent element + var wcParent = this.parentNode; + + function countWords(node){ + var text = node.innerText || node.textContent + return text.split(/\s+/g).length; + } + + var count = 'Words: ' + countWords(wcParent); + + // Create a shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Create text node and add word count to it + var text = document.createElement('span'); + text.textContent = count; + + // Append it to the shadow root + shadow.appendChild(text); + + // Update count when element content changes + setInterval(function() { + var count = 'Words: ' + countWords(wcParent); + text.textContent = count; + }, 200) + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</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-element-attachshadow', 'attachShadow()')}}</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.Element.attachShadow")}}</p> diff --git a/files/ja/web/api/element/attributes/index.html b/files/ja/web/api/element/attributes/index.html new file mode 100644 index 0000000000..f9f8199b7c --- /dev/null +++ b/files/ja/web/api/element/attributes/index.html @@ -0,0 +1,122 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributes + - DOM + - Element + - Property + - プロパティ + - リファレンス + - 属性 +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Element.attributes</code></strong> プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 <code><strong>Array</strong></code> ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 <code><strong>attributes</strong></code> はその属性に関するあらゆる情報を表す文字列のキーと値の組です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Basic_examples" name="Basic_examples">基本的な例</h3> + +<pre class="brush: js">// ドキュメント内の最初の <p> 要素を取得する +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes;</pre> + +<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">要素の属性を列挙する</h3> + +<p>ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。<br> + 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // まず、最初の段落(p1)がなんらかの属性を持っているか確かめよう + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "No attributes to show"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Sample Paragraph</p> + <form action=""> + <p> + <input type="button" value="Show first attribute name and value" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></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-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>{{SpecName('DOM2 Core')}} から変更無し</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>{{SpecName('DOM1')}}から変更無し</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden"> +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> +</div> + +<p>{{Compat("api.Element.attributes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>返却される値のインターフェースである {{domxref("NamedNodeMap")}}</li> + <li><a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> におけるブラウザー間の互換性への配慮</li> +</ul> diff --git a/files/ja/web/api/element/blur_event/index.html b/files/ja/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..c5ab2b5687 --- /dev/null +++ b/files/ja/web/api/element/blur_event/index.html @@ -0,0 +1,142 @@ +--- +title: 'Element: blur イベント' +slug: Web/API/Element/blur_event +tags: + - API + - DOM + - Element + - Event + - FocusEvent + - Reference + - blur + - onblur + - イベント +translation_of: Web/API/Element/blur_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>blur</code></strong> イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 <code>focusout</code> が<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">バブリング</a>を行うのに対し <code>blur</code> は行わないことです。</p> + +<p><code>blur</code> の反対は {{domxref("Element/focus_event", "focus")}} です。</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("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onblur", "onblur")}}</td> + </tr> + <tr> + <th scope="row">同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th scope="row">Composed</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">簡単な例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html;"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const password = document.querySelector('input[type="password"]'); + +password.addEventListener('focus', (event) => { + event.target.style.background = 'pink'; +}); + +password.addEventListener('blur', (event) => { + event.target.style.background = ''; +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Simple_example", '100%', '50px')}}</p> + +<h3 id="Event_delegation" name="Event_delegation">イベント委譲</h3> + +<p>このイベントのイベント委譲を実装する方法は二つあります。 {{Event("focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の <code>useCapture</code> 引数に <code>true</code> を設定するかです。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">const form = document.getElementById('form'); + +form.addEventListener('focus', (event) => { + event.target.style.background = 'pink'; +}, true); + +form.addEventListener('blur', (event) => { + event.target.style.background = ''; +}, true);</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Event_delegation", '100%', '50px')}}</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("UI Events", "#event-type-blur")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-blur")}}</td> + <td>{{Spec2("DOM3 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.Element.blur_event")}}</p> + +<p>このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の <code>body</code> を設定します。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}}</li> + <li><code>Window</code> を対象としたこのイベント: {{domxref("Window/blur_event", "blur")}} イベント</li> +</ul> diff --git a/files/ja/web/api/element/classlist/index.html b/files/ja/web/api/element/classlist/index.html new file mode 100644 index 0000000000..b37e7751a8 --- /dev/null +++ b/files/ja/web/api/element/classlist/index.html @@ -0,0 +1,267 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - Read-only + - Reference + - プロパティ + - 読取専用 +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.classList</strong></code> は読み取り専用のプロパティで、生きた {{domxref("DOMTokenList")}} コレクションでその要素の <code>class</code> 属性を返します。これを使用してクラスリストを操作することができます。</p> + +<p><code>classList</code> を使用することは、 {{domxref("element.className")}} から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const <var>elementClasses</var> = <var>elementNodeReference</var>.classList; +</pre> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>{{domxref("DOMTokenList")}} で、その要素の <code>class</code> 属性を返します。 <code>class</code> 属性が設定されていない場合や空の場合は、空の <code>DOMTokenList</code> を返します。すなわち、 <code>DOMTokenList</code> の <code>length</code> プロパティが <code>0</code> になります。</p> + +<p><code>DOMTokenList</code> 自体は読み取り専用ですが、 {{domxref("DOMTokenList/add", "add()")}} や {{domxref("DOMTokenList/remove", "remove()")}} を用いてオブジェクトを変更することはできます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">const div = document.createElement('div'); +div.className = 'foo'; + +// 最初の状態: <div class="foo"></div> +console.log(div.outerHTML); + +// classList API を用いてクラスを除去、追加 +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// <div class="anotherclass"></div> +console.log(div.outerHTML); + +// visible が設定されていれば除去し、なければ追加 +div.classList.toggle("visible"); + +// i が 10 未満であるかどうかの条件によって visible を追加または除去 +div.classList.toggle("visible", i < 10 ); + +console.log(div.classList.contains("foo")); + +// 複数のクラスを追加または除去 +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); + +// spread syntax を使用したクラスの追加または除去 +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); + +// "foo" クラスを "bar" クラスで置き換え +div.classList.replace("foo", "bar");</pre> + +<div class="note"> +<p>Firefox 26 以前のバージョンでは、 add/remove/toggle メソッドでいくつかの引数の使用方法を実装していません。詳しくは <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a> を参照してください。</p> +</div> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>古い <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> イベントは、生きた <code>classList</code> のモックアップを作成することができますが、これは <code>Element.prototype.className</code> プロパティが変更されたときにこのイベントが発生するからです。</p> + +<p>以下のポリフィルは <code>classList</code> と <code>DOMTokenList</code> の両方のためのもので、 <code>Element.prototype.classList</code> のすべての標準メソッドおよびプロパティを<strong>完全に</strong>準拠 (カバー) することを保証します。 <strong>IE10</strong>-<strong>IE11</strong> ブラウザーに加えて、 <strong>IE 6-9</strong> で<em>ほぼ</em>同じ動作をします。</p> + +<pre class="brush: js">// 1. String.prototype.trim polyfill +if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; +(function(window){"use strict"; // prevent global namespace pollution +if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; +var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) { + if (V === "") throw new DOMException( + "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." ); + if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " + + "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens."); +} +// 2. Implement the barebones DOMTokenList livelyness polyfill +if (typeof DOMTokenList !== "function") (function(window){ + var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty; + var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0; + function DOMTokenList(){ + if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through + } + DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value}; + DOMTokenList.prototype.add = function(){ + a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) { + val = arguments[v] + "", checkIfValidClassListEntry("add", val); + for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i) + if (this[i] === val) continue a; else resStr += " " + this[i]; + this[Len] = val, proto.length += 1, proto.value = resStr; + } + skipPropChange = 1, ele.className = proto.value, skipPropChange = 0; + }; + DOMTokenList.prototype.remove = function(){ + for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) { + val = arguments[v] + "", checkIfValidClassListEntry("remove", val); + for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i) + if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } } + if (!is) continue; + delete this[Len], proto.length -= 1, proto.value = resStr; + } + skipPropChange = 1, ele.className = proto.value, skipPropChange = 0; + }; + window.DOMTokenList = DOMTokenList; + function whenPropChanges(){ + var evt = window.event, prop = evt.propertyName; + if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) { + var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop]; + var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"]; + var oldLen = protoObjProto.length; + a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){ + for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;} + resTokenList[cI-sub] = tokens[cI]; + } + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + if(prop !== "classList") return; + skipPropChange = 1, target.classList = resTokenList, target.className = strval; + skipPropChange = 0, resTokenList.length = tokens.length - sub; + } + } + function polyfillClassList(ele){ + if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation"); + ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop + allowTokenListConstruction = 1; + try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); } + finally { allowTokenListConstruction = 0 } + var protoObjProto = protoObj.prototype, resTokenList = new protoObj(); + a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){ + for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; } + this[cI-sub] = toks[cI]; + } + protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele; + if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM + enumerable: 1, get: function(){return resTokenList}, + configurable: 0, set: function(newVal){ + skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0; + var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length; + a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){ + for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;} + resTokenList[cI-sub] = toks[cI]; + } + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + } + }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype + enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype + }); defineProperty(protoObjProto, " uCL", { + enumerable: 0, configurable: 0, writeable: 0, value: ele + }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; } + ele.attachEvent( "onpropertychange", whenPropChanges ); + } + try { // Much faster & cleaner version for IE8 & IE9: + // Should work in IE8 because Element.prototype instanceof Node is true according to the specs + window.Object.defineProperty(window.Element.prototype, "classList", { + enumerable: 1, get: function(val){ + if (!hasOwnProp.call(this, "classList")) polyfillClassList(this); + return this.classList; + }, + configurable: 0, set: function(val){this.className = val} + }); + } catch(e) { // Less performant fallback for older browsers (IE 6-8): + window[" uCL"] = polyfillClassList; + // the below code ensures polyfillClassList is applied to all current and future elements in the doc. + document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=( + '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + // IE6 + '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8 + ); + } +})(window); +// 3. Patch in unsupported methods in DOMTokenList +(function(DOMTokenListProto, testClass){ + if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){ + function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]); + }; + if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){ + if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]); + var oldValue = this.value; + return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/); + }; + if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean") + DOMTokenListProto.replace = function(oldToken, newToken){ + checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken); + var oldValue = this.value; + return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true)); + }; + if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){ + for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true; + return false; + }; + if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){ + if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this); + else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this); + }; + if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true}; + }}; + }; + if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true}; + }}; + }; + if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true}; + }}; + }; +})(window.DOMTokenList.prototype, window.document.createElement("div").classList); +})(window); +</pre> + +<h3 id="Caveats" name="Caveats">注意事項</h3> + +<p>上記のポリフィルは機能が限定されています。現在、 IE 6-7 では、文書要素の外にある要素 (たとえば、 <code>document.createElement</code> によって作成された後、親ノードに追加される前の要素) を代替することができません。</p> + +<p>しかし、 IE9 では正常に動作するはずです。代替バージョンの <code>classList</code> と W3 の仕様書との主な違いは、 IE 6-8 においては不変オブジェクト (プロパティを直接変更できないオブジェクト) を生成する方法がないという点です。しかし IE9 では、プロトタイプを拡張し、可視オブジェクトを凍結し、ネイティブのプロパティメソッドを上書きすることで可能です。しかし、このような操作は IE6-IE8 では機能せず、 IE9 ではウェブページ全体のパフォーマンスを大幅に低下させるため、これらの修正はこのポリフィルでは完全に実行できません。</p> + +<p>IE6-7 の軽い注意事項ですが、このポリフィルは window オブジェクトの <code>window[" uCL"]</code> プロパティを使用して CSS の式とコミュニケーションを行い、 CSS の <code>x-uCLp</code> プロパティをすべての要素に付与し、 <code>element[" uCL"]</code> プロパティによってガーベジコレクションを行うことができるようにして性能を改善しています。すべてのポリフィルを使用したブラウザー (IE6-9) では、追加の <code>element[" uCLp"]</code> プロパティによって要素に標準に準拠したプロトタイピングを保証し、それぞれの <code>element["classList"]</code> オブジェクトに <code>DOMTokenList[" uCL"]</code> プロパティを追加することで、 DOMTokenList が自分自身の要素の範囲に収まることを保証します。</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-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</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.Element.classList")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> diff --git a/files/ja/web/api/element/classname/index.html b/files/ja/web/api/element/classname/index.html new file mode 100644 index 0000000000..00f15100e7 --- /dev/null +++ b/files/ja/web/api/element/classname/index.html @@ -0,0 +1,35 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/className +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> +<ul> + <li><var>cName</var> : クラス名（文字列）</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得 + +if (elm.className == "fixed") { + // 対象要素のクラス名が "fixed" であった場合の処理をここに記述 +}</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> +</ul> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/ja/web/api/element/click_event/index.html b/files/ja/web/api/element/click_event/index.html new file mode 100644 index 0000000000..f7f1871bc8 --- /dev/null +++ b/files/ja/web/api/element/click_event/index.html @@ -0,0 +1,160 @@ +--- +title: 'Element: click イベント' +slug: Web/API/Element/click_event +tags: + - API + - DOM + - Element + - Event + - Interface + - MouseEvent + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - UI + - click + - events + - mouse + - イベント + - インターフェイス + - マウス +translation_of: Web/API/Element/click_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code><strong>click</strong></code> イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td> + </tr> + </tbody> +</table> + +<p>ボタンが要素上で押された後、離される前に要素の外側に移動した場合は、イベントは両方の要素を含む最も近い祖先要素で発生します。</p> + +<p><code>click</code> は {{event("mousedown")}} および {{event("mouseup")}} イベントの後に、順番通りに発生します。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code>click</code> のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("Event.detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は <code>detail</code> が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。</p> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<p>Internet Explorer 8 と 9 は、 {{cssxref("background-color")}} の計算値が <a href="/ja/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> である要素が他の要素の上に重なった時、 <code>click</code> イベントを受け取らないというバグに悩まされていました。すべての <code>click</code> イベントはその下にある要素で発生していました。<a href="http://jsfiddle.net/YUKma/show/">このライブサンプル</a>を参照してください。</p> + +<p>このバグの知られている回避方法は以下の通りです。</p> + +<ul> + <li>IE9 のみの場合: + <ul> + <li>{{cssxref("background-color")}}<code>: <a href="/ja/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code> に設定する</li> + <li>{{cssxref("opacity")}}<code>: 0</code> に設定し、 {{cssxref("background-color")}} を明示的に <a href="/ja/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> 以外に設定する</li> + </ul> + </li> + <li>IE8 および IE9 の場合: <code><a href="http://msdn.microsoft.com/ja/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> に設定し、 {{cssxref("background-color")}} を明示的に <a href="/ja/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> 以外に設定する</li> +</ul> + +<h3 id="Safari_Mobile">Safari Mobile</h3> + +<p>Safari Mobile 7.0 以降では (おそらくそれ以前のバージョンも) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">悩ましいバグ</a>があり、通常は対話型ではない要素 ({{HTMLElement("div")}} など) で、イベントリスナーが要素自身に直接設定されていない場合 (つまり、 <a href="http://davidwalsh.name/event-delegate">イベントの委譲</a>が使用されている場合) に <code>click</code> イベントが発生しません。デモは<a href="http://jsfiddle.net/cvrhulu/k9t0sdnf/show/">このライブ例</a>を参照してください。 <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">Safari's docs on making elements clickable</a> および <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">definition of "clickable element"</a> も参照してください。</p> + +<p>このバグの知られている回避策は以下のとおりです。</p> + +<ul> + <li>要素およびそのすべての祖先に {{cssxref("cursor")}}<code>: pointer;</code> を設定する。</li> + <li>要素または {{HTMLElement("body")}} 以外の祖先のいずれかに、ダミーの <code>onclick="void(0)"</code> 属性を設定する。</li> + <li>通常は対話型になる要素 (例えば {{HTMLElement("a")}}) を、通常は対話型でない要素 (例えば {{HTMLElement("div")}}) の代わりに使用する。</li> + <li><code>click</code> <a href="https://davidwalsh.name/event-delegate">イベントの委譲</a>の使用をやめる。</li> +</ul> + +<p>Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。</p> + +<ul> + <li>{{HTMLElement("a")}} (ただし <code>href</code> があるものに限る)</li> + <li>{{HTMLElement("area")}} (ただし <code>href</code> があるものに限る)</li> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("img")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("label")}} (ただしフォームコントロールに関連付けられているものに限る)</li> + <li>{{HTMLElement("textarea")}}</li> + <li><em>このリストは不完全です。試験や調査を行って展開することで MDN にご協力ください。</em></li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は {{HtmlElement("button")}} を連続してクリックした数を表示します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><button>Click</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const button = document.querySelector('button'); + +button.addEventListener('click', event => { + button.innerHTML = `Click count: ${event.detail}`; +});</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>高速にするために、繰り返してボタンをクリックするとクリックカウントを増加させます。クリック間に休みが入った場合は、カウントがリセットされます。</p> + +<p>{{EmbedLiveSample("Examples")}}</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('UI Events', '#event-type-click')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td> + <td>{{Spec2('DOM2 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.Element.click_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{event("auxclick")}}</li> + <li>{{event("contextmenu")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("pointerdown")}}</li> + <li>{{event("pointerup")}}</li> +</ul> diff --git a/files/ja/web/api/element/clientheight/index.html b/files/ja/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..bf23c374d9 --- /dev/null +++ b/files/ja/web/api/element/clientheight/index.html @@ -0,0 +1,69 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - API + - CSSOM View + - NeedsMarkupWork + - Property + - Reference +translation_of: Web/API/Element/clientHeight +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.clientHeight</code></strong> は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。</p> + +<p><code>clientHeight</code> は CSS <code>height</code> + CSS <code>padding</code> - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。</p> + +<p><code>clientHeight</code> がルート要素 (<code><html></code> 要素) (または文書が後方互換モードである場合は <code><body></code>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">これは <code>clientHeight</code> の特例です</a>。</p> + +<div class="note"> +<p><strong>注:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>intElemClientHeight</var> = <var>element</var>.clientHeight;</pre> + +<p><code><var>intElemClientHeight</var></code> は <code><var>element</var></code> の <code>clientHeight</code> をピクセル単位で表す整数値です。 <code>clientHeight</code> プロパティは読み取り専用です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></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('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">注</h3> + +<p><code>clientHeight</code> は 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> + +<p>{{Compat("api.Element.clientHeight")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> + <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> +</ul> diff --git a/files/ja/web/api/element/clientleft/index.html b/files/ja/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..29c8a2bd81 --- /dev/null +++ b/files/ja/web/api/element/clientleft/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientLeft +slug: Web/API/Element/clientLeft +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/clientLeft +--- +<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>要素の左ボーダーの幅のピクセル数です。 要素のテキストの方向が右から左である場合と、 オーバーフローにより左の縦スクロールバーがレンダリングされた場合の縦スクロールバーの幅を含みます。<code>clientLeft</code> は左マージン、または、左パディングを含んでいません。<code>clientLeft</code> は読み込み専用です。</p> +<p><a href="ja/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="ja/Firefox_3">Firefox 3</a>、{{ Bug(111207) }} で実装) から <code>clientLeft</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。 {{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft; +</pre> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p> +<p><img alt="layout.scrollbar.side プロパティが 1、または、3 に設定されたときの縦スクロールバーの位置"></p> +<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"> + <i> + layout.scrollbar.side</i> + プロパティ</a> が、1、あるいは、3 に設定されたときと、テキストの方向が右から左へ設定されたときは、<b> 縦スクロールバーは、左側に表示されます。</b> そして、これは、<code>clientLeft</code> が自動計算される方法に影響します。</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>W3C の仕様の一部ではありません。</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p> +<h3 id=".E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9" name=".E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9">リファレンス</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">MSDN's clientLeft definition</a>（<a class="external" href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientLeft.asp">日本語版</a>）</li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a class="external" href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li> +</ul> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.clientLeft", "es": "es/DOM/element.clientLeft", "fr": "fr/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p> diff --git a/files/ja/web/api/element/clienttop/index.html b/files/ja/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..da90253265 --- /dev/null +++ b/files/ja/web/api/element/clienttop/index.html @@ -0,0 +1,37 @@ +--- +title: element.clientTop +slug: Web/API/Element/clientTop +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/clientTop +--- +<div> + {{ApiRef}} {{Fx_minversion_header("3")}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p> +<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop; +</pre> +<h2 id="Example" name="Example">例</h2> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{mediawiki.external('endif')}}</span></div> +<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>W3C の仕様の一部ではありません。</p> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p> +<h2 id="References" name="References">リファレンス</h2> +<ul> + <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li> + <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li> +</ul> diff --git a/files/ja/web/api/element/clientwidth/index.html b/files/ja/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..b99155d883 --- /dev/null +++ b/files/ja/web/api/element/clientwidth/index.html @@ -0,0 +1,67 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - API + - CSSOM View + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/clientWidth +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.clientWidth</strong></code> プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。</p> + +<p><code>clientWidth</code> がルート要素 (<code><html></code> 要素) (または文書が後方互換モードである場合は <code><body></code>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">これは <code>clientWidth</code></a> の特例です。</p> + +<div class="note"> +<p><strong>メモ:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> + +<p><code><var>intElemClientWidth</var></code> は <code><var>element</var></code> の <code>clientWidth</code> をピクセル数で表す整数値です。 <code>clientWidth</code> プロパティは読み取り専用です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></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('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">メモ</h3> + +<p><code>clientWidth</code> は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。</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.Element.clientWidth")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> + <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> +</ul> diff --git a/files/ja/web/api/element/closest/index.html b/files/ja/web/api/element/closest/index.html new file mode 100644 index 0000000000..4f5ba93074 --- /dev/null +++ b/files/ja/web/api/element/closest/index.html @@ -0,0 +1,151 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference + - メソッド +translation_of: Web/API/Element/closest +--- +<div>{{APIRef('DOM')}}</div> + +<div><code><strong>closest()</strong></code> メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 <code>null</code> を返します。 + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>selectors</var></code> は {{domxref("DOMString")}} で、セレクターのリストを指定します。<br> + 例: <code>p:hover, .toto + q</code></li> +</ul> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<ul> + <li><code><var>closestElement</var></code> は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 <code>null</code> になることがあります。</li> +</ul> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<ul> + <li><code><var>selectors</var></code> が妥当なセレクターリストの文字列ではない場合、 {{exception("SyntaxError")}} が投げられます。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article> + <div id="div-01">Here is div-01 + <div id="div-02">Here is div-02 + <div id="div-03">Here is div-03</div> + </div> + </div> +</article></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var el = document.getElementById('div-03'); + +var r1 = el.closest("#div-02"); +// id=div-02 である要素を返す + +var r2 = el.closest("div div"); +// div の中にある div である直近の祖先、ここでは div-03 自身を返す + +var r3 = el.closest("article > div"); +// 親に article を持つ div である直近の祖先、ここでは div-01 を返す + +var r4 = el.closest(":not(div)"); +// div ではない直近の祖先、ここではもっとも外側の article を返す</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>Element.closest()</code> に対応していないブラウザーで、 <code>element.matches()</code> (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。</p> + +<pre class="brush: js">if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + + do { + if (Element.prototype.matches.call(el, s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +}</pre> + +<p>しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。</p> + +<pre class="brush: js">if (window.Element && !Element.prototype.closest) { + Element.prototype.closest = + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i, + el = this; + do { + i = matches.length; + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); + return el; + }; +} +</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-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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.Element.closest")}}</p> + +<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> + +<ul> + <li>Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 <code>document.createElement(tagName).closest(tagName)</code> が <code>null</code> を返します。</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element")}} インターフェイス</li> + <li> + <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div> + </li> + <li> + <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div> + </li> +</ul> +</div> diff --git a/files/ja/web/api/element/compositionend_event/index.html b/files/ja/web/api/element/compositionend_event/index.html new file mode 100644 index 0000000000..24d23c7f7b --- /dev/null +++ b/files/ja/web/api/element/compositionend_event/index.html @@ -0,0 +1,146 @@ +--- +title: 'Element: compositionend イベント' +slug: Web/API/Element/compositionend_event +tags: + - Event + - Reference +translation_of: Web/API/Element/compositionend_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>compositionend</code></strong> イベントは、 {{glossary("input method editor", "IME")}} などのテキスト編集システムが現在の編集セッションを完了またはキャンセルした時に発生します。</p> + +<p>例えば、このイベントは、ユーザーが <a href="https://ja.wikipedia.org/wiki/ピン音">ピン音</a> IME を使用して漢字の入力を完了した後に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); + +inputElement.addEventListener('compositionend', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> + +<h3 id="Live_example" name="Live_example">実行例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="control"> + <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</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('UI Events', '#event-type-compositionend')}}</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.Element.compositionend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/compositionstart_event", "compositionstart")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}。</li> +</ul> diff --git a/files/ja/web/api/element/compositionstart_event/index.html b/files/ja/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..2ec0201161 --- /dev/null +++ b/files/ja/web/api/element/compositionstart_event/index.html @@ -0,0 +1,151 @@ +--- +title: 'Element: compositionstart イベント' +slug: Web/API/Element/compositionstart_event +tags: + - Element + - Event + - Input method + - Reference + - compositionstart + - イベント + - 入力メソッド +translation_of: Web/API/Element/compositionstart_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>compositionstart</code></strong> イベントは、 {{glossary("input method editor", "IME")}} などのテキスト変換システムが新しい変換セッションを開始した時に発生します。</p> + +<p>例えば、このイベントは、ユーザーが<a href="https://ja.wikipedia.org/wiki/ピン音">ピン音</a> IME を使用して漢字の入力を開始した後に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); + +inputElement.addEventListener('compositionstart', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> + +<h3 id="Live_example" name="Live_example">実行例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="control"> + <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</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('UI Events', '#event-type-compositionstart')}}</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.Element.compositionstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}。</li> +</ul> diff --git a/files/ja/web/api/element/compositionupdate_event/index.html b/files/ja/web/api/element/compositionupdate_event/index.html new file mode 100644 index 0000000000..f806699c0e --- /dev/null +++ b/files/ja/web/api/element/compositionupdate_event/index.html @@ -0,0 +1,149 @@ +--- +title: 'Element: compositionupdate イベント' +slug: Web/API/Element/compositionupdate_event +tags: + - Element + - Event + - Input method + - Reference + - compositionupdate +translation_of: Web/API/Element/compositionupdate_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>compositionupdate</code></strong> イベントは、 {{glossary("input method editor", "IME")}} などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。</p> + +<p>例えば、このイベントは、ユーザーが<a href="https://ja.wikipedia.org/wiki/ピン音">ピン音</a> IME を使用して漢字の入力をしている最中に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); + +inputElement.addEventListener('compositionupdate', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> + +<h3 id="Live_example" name="Live_example">実行例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="control"> + <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</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('UI Events', '#event-type-compositionupdate')}}</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.Element.compositionupdate_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/compositionstart_event", "compositionstart")}}, {{domxref("Element/compositionend_event", "compositionend")}}。</li> +</ul> diff --git a/files/ja/web/api/element/copy_event/index.html b/files/ja/web/api/element/copy_event/index.html new file mode 100644 index 0000000000..c437cde9a8 --- /dev/null +++ b/files/ja/web/api/element/copy_event/index.html @@ -0,0 +1,113 @@ +--- +title: 'Element: copy イベント' +slug: Web/API/Element/copy_event +tags: + - API + - Clipboard API + - Element + - Event + - Reference + - Web + - イベント +translation_of: Web/API/Element/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>このイベントの既定の動作は、 (もしあれば) 選択範囲をクリップボードへコピーすることです。</p> + +<p>このイベントのハンドラーは、 {{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を<em>変更</em>したり、 {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用してイベントの既定の動作を取り消したりすることができます。</p> + +<p>ただし、ハンドラーがクリップボードのデータを<em>読み取る</em>ことはできません。</p> + +<p><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">仮想の</a> <code>copy</code> イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。</p> + +<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="source" contenteditable="true">Try copying text from this box...</div> +<div class="target" contenteditable="true">...and pasting it into this one</div> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +}</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const source = document.querySelector('div.source'); + +source.addEventListener('copy', (event) => { + const selection = document.getSelection(); + event.clipboardData.setData('text/plain', selection.toString().toUpperCase()); + event.preventDefault(); +}); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '100px') }}</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('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.Window.copy_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/copy_event", "copy")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/copy_event", "copy")}}</li> +</ul> diff --git a/files/ja/web/api/element/cut_event/index.html b/files/ja/web/api/element/cut_event/index.html new file mode 100644 index 0000000000..ca5279af27 --- /dev/null +++ b/files/ja/web/api/element/cut_event/index.html @@ -0,0 +1,119 @@ +--- +title: 'Element: cut イベント' +slug: Web/API/Element/cut_event +tags: + - API + - Clipboard API + - Cut + - Element + - Event + - Reference + - Web + - イベント +translation_of: Web/API/Element/cut_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>cut</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。</span></p> + +<p>ユーザーが編集不可能なコンテンツに対して切り取りをしようとすると、 <code>cut</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("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> +</table> + +<p>イベントの既定のアクションは、 (もしあれば) 選択範囲をクリップボードへコピーして文書からその部分を取り除くことです。</p> + +<p>このイベントのハンドラーは、 {{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を<em>変更</em>したり、 {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定の動作を取り消したりすることができます。</p> + +<p>なお、既定の動作を取り消すと、文書の更新が阻止されます。そのため、「切り取り」の既定の動作をエミュレートしたい場合は、イベントハンドラーでクリップボードを操作するとともに、文書から選択範囲を手動で取り除かなければなりません。</p> + +<p>このハンドラーがクリップボードのデータを<em>読み取る</em>ことはできません。</p> + +<p><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">仮想の</a> <code>cut</code> イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。</p> + +<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="source" contenteditable="true">Try cutting text from this box...</div> +<div class="target" contenteditable="true">...and pasting it into this one</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const source = document.querySelector('div.source'); + +source.addEventListener('cut', (event) => { + const selection = document.getSelection(); + event.clipboardData.setData('text/plain', selection.toString().toUpperCase()); + selection.deleteFromDocument(); + event.preventDefault(); +}); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '100px') }}</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('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.Window.cut_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/paste_event", "paste")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/cut_event", "cut")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/cut_event", "cut")}}</li> +</ul> diff --git a/files/ja/web/api/element/dblclick_event/index.html b/files/ja/web/api/element/dblclick_event/index.html new file mode 100644 index 0000000000..4f6bd3ee7e --- /dev/null +++ b/files/ja/web/api/element/dblclick_event/index.html @@ -0,0 +1,122 @@ +--- +title: 'Element: dblclick イベント' +slug: Web/API/Element/dblclick_event +tags: + - API + - DOM + - Double Click + - Double-Click + - Element + - Event + - Input + - Interface + - MouseEvent + - Reference + - button + - dblclick + - events + - mouse + - イベント +translation_of: Web/API/Element/dblclick_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>dblclick</code></strong> イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く二回クリックされたときに発生します。</span></p> + +<p><code>dblclick</code> は二回の {{domxref("Element/click_event", "click")}} イベントの後 (展開すると、2組の {{domxref("Element.mousedown_event", "mousedown")}} および {{domxref("Element.mouseup_event", "mouseup")}} の後) に発生します。</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、カードをダブルクリックするたびに寸法が切り替わります。</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const card = document.querySelector('aside'); + +card.addEventListener('dblclick', function (e) { + card.classList.toggle('large'); +});</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><aside> + <h3>My Card</h3> + <p>Double click to resize this object.</p> +</aside></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">aside { + background: #fe9; + border-radius: 1em; + display: inline-block; + padding: 1em; + transform: scale(.9); + transform-origin: 0 0; + transition: transform .6s; +} + +.large { + transform: scale(1.3); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 700, 200)}}</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("api.Element.dblclick_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/auxclick_event", "auxclick")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/pointerdown_event", "pointerdown")}}</li> + <li>{{domxref("Element/pointerup_event", "pointerup")}}</li> +</ul> diff --git a/files/ja/web/api/element/domactivate_event/index.html b/files/ja/web/api/element/domactivate_event/index.html new file mode 100644 index 0000000000..1bc8c4589b --- /dev/null +++ b/files/ja/web/api/element/domactivate_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'Element: DOMActivate イベント' +slug: Web/API/Element/DOMActivate_event +tags: + - API + - DOM + - Deprecated + - Element + - Event + - Input + - Mouse Events + - MouseEvent + - Reference + - activate event + - onactivate +translation_of: Web/API/Element/DOMActivate_event +--- +<p>{{APIRef}}</p> + +<div>{{Deprecated_Header}}</div> + +<p><code><strong>DOMActivate</strong></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("MouseEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" + xmlns:ev="http://www.w3.org/2001/xml-events" + width="6cm" height="5cm" viewBox="0 0 600 500"> + + <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc> + + <!-- ECMAScript to change the radius --> + <script type="application/ecmascript"><![CDATA[ + function change(evt) { + var circle = evt.target; + var currentRadius = circle.getFloatTrait("r"); + if (currentRadius == 100) + circle.setFloatTrait("r", currentRadius * 2); + else + circle.setFloatTrait("r", currentRadius * 0.5); + } + ]]></script> + + <!-- Act on each DOMActivate event --> + <circle cx="300" cy="225" r="100" fill="red"> + <handler type="application/ecmascript" ev:event="DOMActivate"> change(evt); </handler> + </circle> + + <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> + Activate the circle to change its size + </text> +</svg> +</pre> + +<p>{{EmbedLiveSample("Examples", 640, 200)}}</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('UI Events', '#event-type-DOMActivate', 'DOMActivate')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.DOMActivate_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> +</ul> diff --git a/files/ja/web/api/element/error_event/index.html b/files/ja/web/api/element/error_event/index.html new file mode 100644 index 0000000000..6eaf035dc0 --- /dev/null +++ b/files/ja/web/api/element/error_event/index.html @@ -0,0 +1,150 @@ +--- +title: 'Element: error イベント' +slug: Web/API/Element/error_event +tags: + - Audio + - DOM + - Error Handling + - Errors + - Event + - Media + - Reference + - UI + - UI Events + - UIEvent + - Video + - Web + - events + - イベント +translation_of: Web/API/Element/error_event +--- +<div>{{APIRef}}</div> + +<p><code>error</code> イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合に {{domxref("Element")}} オブジェクトに発生します。例えば、スクリプトの実行エラーがあったり、画像が見つからないか無効であった場合などです。</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")}} または {{domxref("UIEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<p>イベントオブジェ久は、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。</p> + +<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="img-error" type="button">Generate image error</button> + <img class="bad-img" /> +</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; +} + +button { + height: 2rem; + margin: .5rem; +} + +img { + width: 0; + height: 0; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); + +const badImg = document.querySelector('.bad-img'); +badImg.addEventListener('error', (event) => { + log.textContent = log.textContent + `${event.type}: Loading image\n`; + console.log(event) +}); + +const imgError = document.querySelector('#img-error'); +imgError.addEventListener('click', () => { + badImg.setAttribute('src', 'i-dont-exist'); +}); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</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('UI Events', '#event-type-error')}}</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.HTMLMediaElement.error_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code>Window</code> を対象としたこのイベント: {{domxref("Window/error_event", "error")}} イベント</li> +</ul> diff --git a/files/ja/web/api/element/focus_event/index.html b/files/ja/web/api/element/focus_event/index.html new file mode 100644 index 0000000000..da072e26d8 --- /dev/null +++ b/files/ja/web/api/element/focus_event/index.html @@ -0,0 +1,139 @@ +--- +title: 'Element: focus イベント' +slug: Web/API/Element/focus_event +tags: + - API + - DOM + - Element + - Event + - Focus + - FocusEvent + - Reference + - イベント +translation_of: Web/API/Element/focus_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>focus</code></strong> イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと {{domxref("Element/focusin_event", "focusin")}} との違いは、 <code>focusin</code> がバブリングを行うのに対し <code>focus</code> は行わないことです。</p> + +<p><code>focus</code> の反対は {{domxref("Element/blur_event", "blur")}} です。</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("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onfocus", "onfocus")}}</td> + </tr> + <tr> + <th scope="row">同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th scope="row">Composed</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">簡単な例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const password = document.querySelector('input[type="password"]'); + +password.addEventListener('focus', (event) => { + event.target.style.background = 'pink'; +}); + +password.addEventListener('blur', (event) => { + event.target.style.background = ''; +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Simple_example", '100%', '50px')}}</p> + +<h3 id="Event_delegation" name="Event_delegation">イベント委譲</h3> + +<p>このイベントのイベント委譲を実装する方法は二つあります。 {{Event("focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の <code>useCapture</code> 引数に <code>true</code> を設定するかです。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">const form = document.getElementById('form'); + +form.addEventListener('focus', (event) => { + event.target.style.background = 'pink'; +}, true); + +form.addEventListener('blur', (event) => { + event.target.style.background = ''; +}, true);</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Event_delegation", '100%', '50px')}}</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("UI Events", "#event-type-focus")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-focus")}}</td> + <td>{{Spec2("DOM3 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.Element.focus_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/blur_event", "blur")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}}</li> + <li><code>Window</code> を対象としたこのイベント: {{domxref("Window/focus_event", "focus")}} イベント</li> +</ul> diff --git a/files/ja/web/api/element/focusin_event/index.html b/files/ja/web/api/element/focusin_event/index.html new file mode 100644 index 0000000000..cd6d134821 --- /dev/null +++ b/files/ja/web/api/element/focusin_event/index.html @@ -0,0 +1,111 @@ +--- +title: 'Element: focusin イベント' +slug: Web/API/Element/focusin_event +tags: + - API + - DOM + - Element + - Event + - FocusEvent + - Reference + - focusin + - イベント +translation_of: Web/API/Element/focusin_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>focusin</code></strong> イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと {{domxref("Element/focus_event", "focus")}} との主な違いは、 <code>focusin</code> がバブリングを行うのに対し <code>focus</code> は行わないことです。</p> + +<p><code>focusin</code> の反対は {{domxref("Element/focusout_event", "focusout")}} です。</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("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onfocusin", "onfocusin")}}</td> + </tr> + <tr> + <th scope="row">同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th scope="row">Composed</th> + <td>はい</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"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const form = document.getElementById('form'); + +form.addEventListener('focusin', (event) => { + event.target.style.background = 'pink'; +}); + +form.addEventListener('focusout', (event) => { + event.target.style.background = ''; +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Live_example", '100%', '50px')}}</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("UI Events", "#event-type-focusin")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-focusin")}}</td> + <td>{{Spec2("DOM3 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.Element.focusin_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/blur_event", "blur")}}, {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusout_event", "focusout")}}</li> +</ul> diff --git a/files/ja/web/api/element/focusout_event/index.html b/files/ja/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..26364b50c0 --- /dev/null +++ b/files/ja/web/api/element/focusout_event/index.html @@ -0,0 +1,112 @@ +--- +title: 'Element: focusout イベント' +slug: Web/API/Element/focusout_event +tags: + - API + - DOM + - Element + - Event + - FocusEvent + - Reference + - focusout + - onfocusout + - イベント +translation_of: Web/API/Element/focusout_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>focusout</code></strong> イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと {{domxref("Element/blur_event", "blur")}} との主な違いは、 <code>focusout</code> が<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">バブリング</a>を行うのに対し <code>blur</code> は行わないことです。</p> + +<p><code>focusout</code> の反対は {{domxref("Element/focusin_event", "focusin")}} です。</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("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onfocusout", "onfocusout")}}</td> + </tr> + <tr> + <th scope="row">同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th scope="row">Composed</th> + <td>はい</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"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const form = document.getElementById('form'); + +form.addEventListener('focusin', (event) => { + event.target.style.background = 'pink'; +}); + +form.addEventListener('focusout', (event) => { + event.target.style.background = ''; +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Live_example", '100%', '50px')}}</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("UI Events", "#event-type-focusout")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-focusout")}}</td> + <td>{{Spec2("DOM3 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.Element.focusout_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/blur_event", "blur")}}, {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusin_event", "focusin")}}</li> +</ul> diff --git a/files/ja/web/api/element/fullscreenchange_event/index.html b/files/ja/web/api/element/fullscreenchange_event/index.html new file mode 100644 index 0000000000..739e8437d0 --- /dev/null +++ b/files/ja/web/api/element/fullscreenchange_event/index.html @@ -0,0 +1,110 @@ +--- +title: 'Element: fullscreenchange イベント' +slug: Web/API/Element/fullscreenchange_event +tags: + - API + - Fullscreen API + - Fullscreen events + - events + - fullscreen + - fullscreenchange + - イベント + - 全画面 API + - 全画面イベント +translation_of: Web/API/Element/fullscreenchange_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>fullscreenchange</code> イベントは、ある要素 ({{domxref("Element")}}) が全画面モードに切り替わったり、終了したりした直後に発生します。</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("Element.onfullscreenchange", "onfullscreenchange")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントは、全画面モードへ移行または終了する要素 (<code>Element</code>) へ送られます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、 <code>fullscreenchange</code> イベントのハンドラーは、 ID が <code>fullscreen-div</code> である要素に追加されます。</p> + +<p>ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 <code>click</code> ハンドラーが <code>div</code> の全画面モードを切り替えます。もし <code>document.fullscreenElement</code> に値があれば、全画面モードを終了します。そうでなければ、 div は全画面モードに移行します。</p> + +<p><code>fullscreenchange</code> イベントが処理されたとき、要素の状態はすでに変化していることを思い出してください。よって、全画面モードへ変化した場合は、 <code>document.fullscreenElement</code> が全画面モードになった要素を指します。一方、 <code>document.fullscreenElement</code> が null の場合は、全画面モードが取り消されています。</p> + +<p>すなわち、この例のコードでは、要素が現在全画面モードである場合、 <code>fullscreenchange</code> ハンドラーはコンソールへ全画面の要素の <code>id</code> をログ出力します。 <code>document.fullscreenElement</code> が null の場合は、このコードは全画面モードが終了した旨をログ出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"> <h1>fullscreenchange event example</h1> + <div id="fullscreen-div"> + <button id="toggle-fullscreen">Toggle Fullscreen Mode</button> + </div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (event) => { + // document.fullscreenElement will point to the element that + // is in fullscreen mode if there is one. If not, the value + // of the property is null. + if (document.fullscreenElement) { + console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`); + } else { + console.log('Leaving full-screen mode.'); + } +}); + +document.getElementById('toggle-fullscreen').addEventListener('click', (event) => { + if (document.fullscreenElement) { + // exitFullscreen is only available on the Document object. + document.exitFullscreen(); + } else { + document.getElementById('fullscreen-div').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><a class="external external-icon" href="https://fullscreen.spec.whatwg.org/" rel="noopener" title="The 'Fullscreen API' specification">Fullscreen API</a></td> + <td><span class="spec-Living">Living Standard</span></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.fullscreenchange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Document/fullscreenchange_event">Document: fullscreenchange イベント</a></li> + <li><a href="/ja/docs/Web/API/Element/fullscreenerror_event">Element: fullscreenerror イベント</a></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/element/fullscreenerror_event/index.html b/files/ja/web/api/element/fullscreenerror_event/index.html new file mode 100644 index 0000000000..69ebc20d1b --- /dev/null +++ b/files/ja/web/api/element/fullscreenerror_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'Element: fullscreenerror イベント' +slug: Web/API/Element/fullscreenerror_event +tags: + - API + - Element + - Reference + - events + - fullscreenerror + - イベント +translation_of: Web/API/Element/fullscreenerror_event +--- +<div>{{APIRef}}</div> + +<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("Element.onfullscreenerror", "onfullscreenerror")}}</td> + </tr> + </tbody> +</table> + +<p>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}} イベントと同様に、2つの <code>fullscreenerror</code> イベントが発生します。1つ目はモード切替に失敗した {{domxref("Element")}} に送られ、2つ目はその要素を含む {{domxref("Document")}} に送られます。</p> + +<p>全画面モードへの切り替えが失敗する理由の一部は、 <a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API のガイド</a>をお読みください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">const requestor = document.querySelector('div'); + +requestor.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.Element.fullscreenerror_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></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/element/getattribute/index.html b/files/ja/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..587cbc829e --- /dev/null +++ b/files/ja/web/api/element/getattribute/index.html @@ -0,0 +1,83 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Element + - Method + - Reference + - メソッド +translation_of: Web/API/Element/getAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>getAttribute()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。</span>指定された属性が存在しない場合、値は <code>null</code> か <code>""</code> (空文字列) のどちらかになります。詳しくは<a href="#Non-existing_attributes">属性が存在しない場合</a>を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">let <var>attribute</var> = <var>element</var>.getAttribute(<var>attributeName</var>); +</pre> + +<p>ここで、</p> + +<ul> + <li><code><var>attribute</var></code> は <code><var>attributeName</var></code> の値を持つ文字列です。</li> + <li><code><var>attributeName</var></code> は値を取得したい属性の名前です。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush:js">const div1 = document.getElementById('div1'); +const align = div1.getAttribute('align'); + +alert(align); // id="div1" の要素の align の値を表示します。</pre> + +<h2 id="Description" name="Description">解説</h2> + +<h3 id="Lower_casing" name="Lower_casing">小文字化</h3> + +<p>HTML 文書である DOM の HTML 要素に対して呼び出すと、 <code>getAttribute()</code> は処理前に引数を小文字化します。</p> + +<h3 id="Non-existing_attributes" name="Non-existing_attributes">属性が存在しない場合</h3> + +<p>基本的にはすべてのウェブブラウザー (限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など) は、指定された要素に指定された属性が存在しない場合は <code>null</code> を返します。これは<a href="http://dom.spec.whatwg.org/#dom-element-getattribute">現在の DOM 仕様書の草稿</a>で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には<em>空文字列</em>となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 <code>getAttribute()</code> の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから <code>getAttribute()</code> を呼び出すべきでしょう。</p> + +<h3 id="Retrieving_nonce_values" name="Retrieving_nonce_values">ノンス値の受け取り</h3> + +<p>セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た <a href="/ja/docs/Web/HTTP/CSP">CSP</a> のノンスと、 <code>.getAttribute("nonce")</code> の呼び出しは隠蔽されます。</p> + +<pre class="brush: js example-bad">let nonce = script.getAttribute('nonce'); +// 空文字列が返される +</pre> + +<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/en-US/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p> + +<pre class="brush: js">let nonce = script.nonce;</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-element-attachshadow', 'attachShadow()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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.Element.getAttribute")}}</p> +</div> diff --git a/files/ja/web/api/element/getattributenames/index.html b/files/ja/web/api/element/getattributenames/index.html new file mode 100644 index 0000000000..0b08900da0 --- /dev/null +++ b/files/ja/web/api/element/getattributenames/index.html @@ -0,0 +1,72 @@ +--- +title: Element.getAttributeNames() +slug: Web/API/Element/getAttributeNames +tags: + - API + - DOM + - Element + - getAttributeNames + - メソッド + - 属性 +translation_of: Web/API/Element/getAttributeNames +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Element")}} インターフェースの <strong><code>getAttributeNames()</code></strong> メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。</p> + +<p><code>getAttributeNames()</code> を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>let attributeNames</em> = element.getAttributeNames(); +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">// 要素の属性に対して反復処理する +for(let name of element.getAttributeNames()) { + let value = element.getAttribute(name); + console.log(name, value); +} +</pre> + +<h2 id="Polyfill" name="Polyfill">代替モジュール</h2> + +<pre class="brush:js notranslate">if (Element.prototype.getAttributeNames == undefined) { + Element.prototype.getAttributeNames = function () { + var attributes = this.attributes; + var length = attributes.length; + var result = new Array(length); + for (var i = 0; i < length; i++) { + result[i] = attributes[i].name; + } + return result; + }; +}</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-element-getattributenames", "Element.getAttributeNames")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div> +<div class="hidden">このページの互換表は構造化データで作成されました。データに貢献したい方は、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.Element.getAttributeNames")}}</p> +</div> diff --git a/files/ja/web/api/element/getattributenode/index.html b/files/ja/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..ad04bffcdc --- /dev/null +++ b/files/ja/web/api/element/getattributenode/index.html @@ -0,0 +1,62 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/getAttributeNode +--- +<p>{{ APIRef("DOM") }}</p> + +<p>{{ 英語版章題("Summary") }}</p> + +<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> + +<p>指定の要素の指定の属性を <code>Attr</code> ノードとして返します。</p> + +<p>{{ 英語版章題("Syntax") }}</p> + +<h2 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h2> + +<pre class="eval"><em>var attrNode</em> = <em>element</em>.getAttributeNode(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrNode</code> は指定の属性に対する <code>Attr</code> ノードです。</li> + <li><code>attrName</code> は属性の名前を表す文字列です。</li> +</ul> + +<p>{{ 英語版章題("Example") }}</p> + +<h2 id=".E4.BE.8B" name=".E4.BE.8B">例</h2> + +<pre>// html: <div id="top" /> +var t = document.getElementById("top"); +var idAttr = t.getAttributeNode("id"); +alert(idAttr.value == "top") + +</pre> + +<p>{{ 英語版章題("Notes") }}</p> + +<h2 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h2> + +<p>HTML ドキュメントとしてフラグが立てられた DOM 内の HTML 要素で呼び出された場合、<code>getAttributeNode</code> は処理を進める前に引数を小文字にします。</p> + +<p><code>Attr</code> ノードは <code>Node</code> から継承されますが、ドキュメント・ツリーの一部と考えることはできません。<a href="/ja/docs/Web/API/Node/parentNode">parentNode</a> や <a href="/ja/docs/Web/API/Node/previousSibling">previousSibling</a>、<a href="/ja/docs/Web/API/Node/nextSibling">nextSibling</a> のような一般の <code>Node</code> 属性は <code>Attr</code> ノードについては <code>null</code> です。しかしながら、<code>ownerElement</code> プロパティでは属性が属している要素を取得することができます。</p> + +<p>要素の属性の値を取得するためには通常 <code>getAttributeNode</code> の代わりに <a href="/ja/docs/Web/API/Element/getAttribute">getAttribute</a> を使用します。</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<p>{{ 英語版章題("Specification") }}</p> + +<h2 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core: getAttributeNode</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/ja/web/api/element/getattributenodens/index.html b/files/ja/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..f56fd71658 --- /dev/null +++ b/files/ja/web/api/element/getattributenodens/index.html @@ -0,0 +1,37 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/getAttributeNodeNS +--- +<p>{{ ApiRef("DOM") }}<span class="comment">== Summary ==</span></p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><span class="comment">Returns the <code>Attr</code> node for the attribute with the given namespace and name.</span> getAttributeNodeNS は指定の名前空間と名前の属性に対する Attr ノードを返します。<span class="comment">== Syntax ==</span></p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>, <em>nodeName</em>) +</pre> + +<p><span class="comment">* <code>attributeNode</code> is the node for specified attribute. * <code>namespace</code> is a string specifying the namespace of the attribute. * <code>nodeName</code> is a string specifying the name of the attribute.</span></p> + +<ul> + <li><code>attributeNode</code> は指定された属性に対するノードです。</li> + <li><code>namespace</code> は属性の名前空間を特定する文字列です。</li> + <li><code>nodeName</code> は属性の名前を指定する文字列です。<span class="comment">== Example == == 例 == TBD The example needs to be fixed TBD この例は修正の必要があります。 <pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" </pre>== Notes</span></li> +</ul> + +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> + +<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode" title="ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS" title="ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> + +<p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p> diff --git a/files/ja/web/api/element/getattributens/index.html b/files/ja/web/api/element/getattributens/index.html new file mode 100644 index 0000000000..974483920a --- /dev/null +++ b/files/ja/web/api/element/getattributens/index.html @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/getAttributeNS +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><code>getAttributeNS</code> は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は <code>null</code> または <code>""</code>(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。</p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>) +</pre> + +<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> + +<ul> + <li><code><em>attrVal</em> </code> は指定の属性の文字列値です。</li> + <li><code><em>namespace</em> </code> は指定の属性の名前空間です。</li> + <li><code><em>name</em> </code> は指定の属性の名前です。</li> +</ul> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre class="eval">var div1 = document.getElementById("div1"); +var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/", + "special-align"); +alert(a); // div の align 属性の値を表示します。 +</pre> + +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> + +<p><code>getAttributeNS</code> は <a href="ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p> + +<p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p> diff --git a/files/ja/web/api/element/getboundingclientrect/index.html b/files/ja/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..f94d494111 --- /dev/null +++ b/files/ja/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,114 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Client + - Containing + - DOM + - Element + - Enclosing + - Method + - Minimum + - Rectangle + - Reference + - Smallest + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight + - メソッド +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.getBoundingClientRect()</strong></code> メソッドは、要素の寸法と、そのビューポートに対する位置を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> の各プロパティを持つ、要素全体を含む最小の矩形です。 <code>width</code> と <code>height</code> 以外のプロパティは、<strong>"<em>ビューポート</em></strong><em>の左上を基準</em>"としています。</p> + +<p style="display: block;"><img alt="DOMRect 値の説明" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p> + +<p>空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 <code>width</code> と <code>height</code> が 0 で、 <code>top</code> と <code>left</code> は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。</p> + +<p>境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) が変更されることを意味しています。</p> + +<p>もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する <code>top</code> と <code>left</code> プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。</p> + +<h3 id="Cross-browser_fallback" name="Cross-browser_fallback">クロスブラウザーの代替</h3> + +<p>高いクロスブラウザーの互換性を必要とするスクリプトでは、 <code>window.scrollX</code> と <code>window.scrollY</code> の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。</p> + +<pre class="brush: js notranslate">// For scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft +// For scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollTop == 'number' ? t : document.body).scrollTop +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト +var rect = obj.getBoundingClientRect(); +</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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">メモ</h3> + +<p>モダンブラウザーでは返された <code>DOMRect</code> オブジェクトを変更することが可能ですが、これは <code>DOMRectReadOnly</code> を返す古いバージョンには該当しません。IE と Edge では、返された <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"> <code>ClientRect</code></a> オブジェクトに対し、見過ごされたプロパティを追加することができず、<code>x</code> と <code>y</code> を補填することができません。</p> + +<p>互換性問題 (下記参照) のため、 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> のみに頼ることが最も安全です。</p> + +<p>返された <code>DOMRect</code> オブジェクトのプロパティは、自身のプロパティではありません。<code>in</code> 演算子や <code>for...in</code> では返されたプロパティを見つけますが、他の <code>Object.keys()</code> のような API では失敗します。さらに予期しないことに、 <code>Object.assign()</code> のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。</p> + +<pre class="brush: js notranslate">rect = elt.getBoundingClientRect() +// emptyObj の結果は {} +emptyObj = Object.assign({}, rect) +emptyObj = { ...rect } +{width, ...emptyObj} = rect +</pre> + +<p><code>DOMRect</code> の <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</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.Element.getBoundingClientRect")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li> +</ul> diff --git a/files/ja/web/api/element/getclientrects/index.html b/files/ja/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..9042d5d96c --- /dev/null +++ b/files/ja/web/api/element/getclientrects/index.html @@ -0,0 +1,233 @@ +--- +title: Element.getClientRects() +slug: Web/API/Element/getClientRects +tags: + - API + - CSSOM View + - Element + - Method + - Reference + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight +translation_of: Web/API/Element/getClientRects +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>getClientRects()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 境界ボックス</a>の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。</p> + +<p>多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行の<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a> (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>rectCollection</var> = <var>object</var>.getClientRects();</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <code><svg></code> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <code><svg></code> が確立したビューポートになります (明確にするために、矩形は外部の <code><svg></code> の <code>viewBox</code> 変形によっても変換されます)。</p> + +<p>本来、Microsoft はこのメソッドがテキストの各行に対して <code>TextRectangle</code> オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。</p> + +<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}}</p> + +<p>矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。</p> + +<p>返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。</p> + +<p>HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 <code>display:none</code> の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。</p> + +<p>CSS ボックスで境界ボックスが空であっても矩形が返されます。 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各座標はなお意味を持っています。</p> + + + +<p>小数のピクセルオフセットが可能です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 <code>withClientRectsOverlay</code> クラスを介してマークアップに接続されていることに注意してください。</p> + +<h3 id="HTML">HTML</h3> + +<p>例 1: このHTMLは、 <code><span></code> 要素を含む3つの段落を生成し、それぞれを <code><div></code> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <code><span></code> 要素には、クライアントの矩形が描画されます。</p> + +<pre class="brush: html notranslate"><h3>A paragraph with a span inside</h3> +<p>Both the span and the paragraph have a border set. The + client rects are in red. Note that the p has onlyone border + box, while the span has multiple border boxes.</p> + +<div> + <strong>Original</strong> + <p> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>p's rect</strong> + <p class="withClientRectsOverlay"> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>span's rect</strong> + <p> + <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span> + </p> +</div></pre> + +<p>例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <code><ol></code> と 3 番目のブロックの各 <code><li></code> 要素に対してクライアントの矩形が描かれています。</p> + +<pre class="brush: html notranslate"><h3>A list</h3> +<p>Note that the border box doesn't include the number, so + neither do the client rects.</p> + +<div> + <strong>Original</strong> + <ol> + <li>Item 1</li> + <li>Item 2</li> + </ol> +</div> + +<div> + <strong>ol's rect</strong> + <ol class="withClientRectsOverlay"> + <li>Item 1</li> + <li>Item 2</li> + </ol> +</div> + +<div> + <strong>each li's rect</strong> + <ol> + <li class="withClientRectsOverlay">Item 1</li> + <li class="withClientRectsOverlay">Item 2</li> + </ol> +</div></pre> + +<p>例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <code><table></code> で描画されます。</p> + +<pre class="brush: html notranslate"><h3>A table with a caption</h3> +<p>Although the table's border box doesn't include the + caption, the client rects do include the caption.</p> + +<div> + <strong>Original</strong> + <table> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div> + +<div> + <strong>table's rect</strong> + <table class="withClientRectsOverlay"> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>CSS は、最初の例では各 <code><div></code> ブロック内の段落と <code><span></code> の周りに、2番目の例では <code><ol></code> と <code><li></code> の周りに、3番目の例では <code><table></code>, <code><th></code>, <code><td></code> の各要素の周りに境界線を描画します。</p> + +<pre class="brush: css notranslate">strong { + text-align: center; +} +div { + display: inline-block; + width: 150px; +} +div p, ol, table { + border: 1px solid blue; +} +span, li, th, td { + border: 1px solid green; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>JavaScriptコードは、 CSS のクラス <code>withClientRectsOverlay</code> が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。</p> + +<pre class="brush: js notranslate">function addClientRectsOverlay(elt) { + /* Absolutely position a div over each client rect so that its border width + is the same as the rectangle's width. + Note: the overlays will be out of place if the user resizes or zooms. */ + var rects = elt.getClientRects(); + for (var i = 0; i != rects.length; i++) { + var rect = rects[i]; + var tableRectDiv = document.createElement('div'); + tableRectDiv.style.position = 'absolute'; + tableRectDiv.style.border = '1px solid red'; + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; + tableRectDiv.style.margin = tableRectDiv.style.padding = '0'; + tableRectDiv.style.top = (rect.top + scrollTop) + 'px'; + tableRectDiv.style.left = (rect.left + scrollLeft) + 'px'; + // We want rect.width to be the border width, so content width is 2px less. + tableRectDiv.style.width = (rect.width - 2) + 'px'; + tableRectDiv.style.height = (rect.height - 2) + 'px'; + document.body.appendChild(tableRectDiv); + } +} + +(function() { + /* Call function addClientRectsOverlay(elt) for all elements with + assigned class "withClientRectsOverlay" */ + var elt = document.getElementsByClassName('withClientRectsOverlay'); + for (var i = 0; i < elt.length; i++) { + addClientRectsOverlay(elt[i]); + } +})();</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples', 680, 650)}}</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("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">補足</h3> + +<p><code>getClientRects()</code> は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。</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.Element.getClientRects")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li> +</ul> diff --git a/files/ja/web/api/element/getelementsbyclassname/index.html b/files/ja/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..c3f8291d18 --- /dev/null +++ b/files/ja/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,115 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Classes + - Element + - Method + - Reference + - getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>getElementsByClassName()</code></strong> メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 </span></p> + +<p>{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>names</code></dt> + <dd>マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>names</code> で指定したすべてのクラスを持つすべての要素のリストである <em>live</em> な {{ domxref("HTMLCollection") }} です。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>この関数が返すコレクションは常に <em>live</em> です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で <code>names</code> にマッチする新しい要素が追加されたり、サブツリー上にある <code>names</code> にマッチしなかった要素が <code>names</code> にマッチするよう変更された場合、すぐにこのコレクションに追加されます。</p> + +<p>逆もしかりです。<code>names</code> にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。</p> + +<div class="note"> +<p>クラス名は<a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モード</a>では大文字・小文字を区別されず、それ以外では区別されます。</p> +</div> + +<h2 id="Syntax" name="Syntax">例</h2> + +<h3 id="Matching_a_single_class" name="Matching_a_single_class">単一のクラスとマッチさせる</h3> + +<p>単一の指定されたクラスを含む要素を探すには、 <code>getElementsByClassName()</code> を呼び出す際にそのクラス名を指定するだけです。</p> + +<pre class="brush: js notranslate">element.getElementsByClassName('test');</pre> + +<p>この例は <code>main</code> の <code>id</code> を持つ要素の子孫の中で、<code>test</code> クラスをもつ全要素を見つけます。</p> + +<pre class="brush: js notranslate">document.getElementById('main').getElementsByClassName('test');</pre> + +<h3 id="Matching_multiple_classes" name="Matching_multiple_classes">複数のクラスとマッチさせる</h3> + +<p><code>red</code> と <code>test</code> 両方のクラスを含んだ要素を見つけます。</p> + +<pre class="brush: js notranslate">element.getElementsByClassName('red test');</pre> + +<h3 id="Examining_the_results" name="Examining_the_results">結果を調査する</h3> + +<p>標準の配列構文や、<code>HTMLCollection</code> の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、<strong><u>次の例はうまく動作しないでしょう</u></strong>。<code>colorbox</code> クラスを外した際に、<code>matches</code> がすぐに変更されてしまうからです。</p> + +<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox'); + +for (var i=0; i<matches.length; i++) { + matches[i].classList.remove('colorbox'); + matches.item(i).classList.add('hueframe'); +} +</pre> + +<p>別の手段を使いましょう。例えば、</p> + +<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox'); + +while (matches.length > 0) { + matches.item(0).classList.add('hueframe'); + matches[0].classList.remove('colorbox'); +}</pre> + +<p>このコードは、<code>"colorbox"</code> クラスを持つ子孫要素を見つけ、<code>item(0)</code>を呼び出して <code>"hueframe"</code> クラスを追加し、（配列表記で） <code>"colorbox"</code> を削除します。その後、（もし残っていれば）別の要素が <code>item(0)</code> になります。</p> + +<h3 id="Filtering_the_results_using_array_methods" name="Filtering_the_results_using_array_methods">Arrayメソッドで結果を抽出する</h3> + +<p>このメソッドの戻り値を <code>this</code> 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で <code>Array</code> メソッドを使うことができます。次の例では <code>test</code> クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。</p> + +<pre class="brush: js notranslate">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<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.Element.getElementsByClassName")}}</p> diff --git a/files/ja/web/api/element/getelementsbytagname/index.html b/files/ja/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..c8e6024316 --- /dev/null +++ b/files/ja/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,55 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - DOM + - Gecko +translation_of: Web/API/Element/getElementsByTagName +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p>指定された <a href="ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>) +</pre> + +<ul> + <li><code>elements</code> は見つかった要素の「生」の <code>NodeList</code> で、サブツリー内に出現した順番になります。</li> + <li><code>element</code> は検索を開始する要素です。この要素の子孫要素のみが検索に含まれ、この要素自体は検索対象とならないことに注意してください。</li> + <li><code>tagName</code> は検索条件とするタグ名です。特別な文字列 <code>"*"</code> はすべての要素を表します。</li> +</ul> + +<div class="note"> +<p>Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。</p> + +<p>複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。</p> +</div> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre class="brush: js">// テーブル内のセルの数だけ反復処理します +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagName("td"); +for (var i = 0; i < cells.length; i++) { + status = cells[i].getAttribute("status"); + if ( status == "open") { + // データを取得します + } +} +</pre> + +<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3> + +<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p> + +<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}</p> diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.html b/files/ja/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..8bfa3bec21 --- /dev/null +++ b/files/ja/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,50 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Gecko +translation_of: Web/API/Element/getElementsByTagNameNS +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p>与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。</p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>) +</pre> + +<ul> + <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li> + <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li> + <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li> + <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="ja/DOM/element.localName">element.localName</a></code> 参照)。</li> +</ul> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre class="brush: js">// XHTML 文書の table の多くのセルの配列をチェック。 +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); +for (var i = 0; i < cells.length; i++) { + axis = cells[i].getAttribute("axis"); + if ( axis == "year") { + // データを取得 + } +} +</pre> + +<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3> + +<p><code>element.getElementsByTagNameNS</code> は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。</p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}</p> diff --git a/files/ja/web/api/element/hasattribute/index.html b/files/ja/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..1999a7a802 --- /dev/null +++ b/files/ja/web/api/element/hasattribute/index.html @@ -0,0 +1,49 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - DOM + - DOM Element Methods + - Gecko +translation_of: Web/API/Element/hasAttribute +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>hasAttribute</p> + +<p>は指定の要素が指定の属性を持つか否かを示す真偽値を返します。</p> + +<p> </p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>var result</var> = <var>element</var>.hasAttribute(<var>attName</var>); +</pre> + +<ul> + <li><code>result</code> : true または false の戻り値を保有</li> + <li><code>attName</code> : 属性の名前を表す文字列を指定</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>対象属性の存在をチェックし、無い場合にのみ属性を設定する例を以下に示します。</p> + +<pre class="brush:js;highlight:[4]">var d = document.getElementById("div1"); // 対象要素を取得 + +if ( !d.hasAttribute("align") ) { + d.setAttribute("align", "center"); +}</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttr">DOM Level 2 Core: hasAttribute</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-ElHasAttr">DOM Level 3 Core: hasAttribute</a></li> +</ul> diff --git a/files/ja/web/api/element/hasattributens/index.html b/files/ja/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..68833414be --- /dev/null +++ b/files/ja/web/api/element/hasattributens/index.html @@ -0,0 +1,44 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/hasAttributeNS +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><code>hasAttributeNS</code> は現在の要素が指定した属性を所有するか否かを示す boolean 値を返します。</p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>result</em> =<em>element</em>.hasAttributeNS(<em>namespace</em>,<em>localName</em>) +</pre> + +<ul> + <li><code>result</code> は <code>true</code> もしくは <code>false</code> の boolean 値です。</li> + <li><code>namespace</code> は属性の名前空間を特定する文字列です。</li> + <li><code>localName</code> は属性の名前です。</li> +</ul> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre>// 値をセットする前に属性が存在しているか検証します。 +var d = document.getElementById("div1"); +if (d.hasAttributeNS( + "http://www.mozilla.org/ns/specialspace/", + "special-align")) { + d.setAttribute("align", "center"); +} +</pre> + +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS</a></p> diff --git a/files/ja/web/api/element/hasattributes/index.html b/files/ja/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..e221ac44d9 --- /dev/null +++ b/files/ja/web/api/element/hasattributes/index.html @@ -0,0 +1,85 @@ +--- +title: Element.hasAttributes() +slug: Web/API/Element/hasAttributes +tags: + - API + - DOM + - Element + - Method + - Reference + - メソッド +translation_of: Web/API/Element/hasAttributes +--- +<div>{{ApiRef("DOM")}}</div> + +<p> <strong><code>hasAttributes()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、現在の要素が属性を持っているか否かを {{jsxref("Boolean")}} で返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>result</var> = <var>element</var>.hasAttributes();</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<dl> + <dt><code><var>result</var></code></dt> + <dd>返値を <code>true</code> または <code>false</code> で保持します。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">let foo = document.getElementById('foo'); +if (foo.hasAttributes()) { + // Do something with 'foo.attributes' +} +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush:js">;(function(prototype) { + prototype.hasAttributes = prototype.hasAttributes || function() { + return (this.attributes.length > 0); + } +})(Element.prototype); +</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-element-hasattributes", "Element.hasAttributes()")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> {{domxref("Node")}} インターフェイスからもっと具体的な {{domxref("Element")}} インターフェイスへ移動した</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td> {{SpecName("DOM2 Core")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td> {{domxref("Node")}} インターフェイス上で初回定義</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.Element.hasAttributes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.attributes")}}</li> + <li>{{domxref("Element.hasAttribute()")}}</li> +</ul> diff --git a/files/ja/web/api/element/haspointercapture/index.html b/files/ja/web/api/element/haspointercapture/index.html new file mode 100644 index 0000000000..7b5b0c8ece --- /dev/null +++ b/files/ja/web/api/element/haspointercapture/index.html @@ -0,0 +1,93 @@ +--- +title: Element.hasPointerCapture() +slug: Web/API/Element/hasPointerCapture +tags: + - API + - DOM + - Element + - Method + - PointerEvent + - Reference + - hasPointerCapture +translation_of: Web/API/Element/hasPointerCapture +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} インターフェイスの <strong><code>hasPointerCapture()</code></strong> メソッドは、それを呼び出した要素が、与えられたポインタ ID によって識別されるポインタに対するポインタキャプチャを持つかどうかを示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>targetElement</em>.hasPointerCapture(<em>pointerId</em>);</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>pointerId</code></dt> + <dd>{{domxref("PointerEvent")}} オブジェクトの {{domxref("PointerEvent.pointerId", "pointerId")}}。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{jsxref("Boolean")}} の値 — 要素がポインタキャプチャを持っている場合は <code>true</code>、持っていない場合は <code>false</code> です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><html> + <script> + function downHandler(ev) { + const el = document.getElementById("target"); + // 要素 'target' はそれ以上のイベントを受信/キャプチャします + el.setPointerCapture(ev.pointerId); + + /* ... */ + + // 要素にまだポインタキャプチャがあるかどうかを確認します + let pointerCap = el.hasPointerCapture(ev.pointerId); + if(pointerCap) { + // まだポインタキャプチャがあります + } else { + // おっと、ポインタキャプチャを失いました！ + } + } + + function init() { + const el = document.getElementById("target"); + el.onpointerdown = downHandler; + } + </script> + <body onload="init();"> + <div id="target">この要素をポインタでタッチします。</div> + </body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-element-haspointercapture', 'hasPointerCapture()')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.Element.hasPointerCapture")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ domxref("Element.setPointerCapture()")}}</li> + <li>{{ domxref("Element.releasePointerCapture()")}}</li> + <li>{{ domxref("Pointer_events","Pointer Events") }}</li> +</ul> diff --git a/files/ja/web/api/element/id/index.html b/files/ja/web/api/element/id/index.html new file mode 100644 index 0000000000..46cf1c1a9e --- /dev/null +++ b/files/ja/web/api/element/id/index.html @@ -0,0 +1,57 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Gecko +translation_of: Web/API/Element/id +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>要素の 識別子 (identifier) を取得 / 設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>idStr</var> =<em>element</em>.id; // 取得 +<em>element</em>.id = <var>idStr</var>; // 設定 +</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 <code>id</code> の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。</p> + +<p>document によっては(特に <a href="/ja/docs/Web/HTML">HTML</a> 、 <a href="/ja/docs/XUL">XUL</a> 、<a href="/ja/docs/SVG">SVG</a>)、要素の <code>id</code> は次のような要素の属性として指定することができます: <code><div id="part_3"></code>.</p> + +<p>但しカスタム XML 文書に於いては、<code>id</code> 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『<a href="http://blog.bitflux.ch/wiki/GetElementById_Pitfalls">getElementById Pitfalls (getElementById の落とし穴)</a>』をご覧下さい。</p> + +<p><code>id</code> 属性は、<a href="/ja/docs/CSS">スタイルシート</a>でスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した <code>id</code> 属性値の先頭に <code>#</code> を付けます。</p> + +<pre class="brush:css">#thisID { + background: darkblue; + color; ghostwhite; +}</pre> + +<p><code>id</code> 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "<code>thisID</code>" と "<code>ThisID</code>" は別の <code>id</code> として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : <a href="/ja/docs/Case_Sensitivity_in_class_and_id_Names">class 属性 / id 属性 / name 属性はケースセンシティブである</a>)</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('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ja/web/api/element/index.html b/files/ja/web/api/element/index.html new file mode 100644 index 0000000000..570f7221d2 --- /dev/null +++ b/files/ja/web/api/element/index.html @@ -0,0 +1,487 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - Reference + - Web API + - インターフェイス +translation_of: Web/API/Element +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Element</code></strong> は {{DOMxRef("Document")}} の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが <code>Element</code> を継承します。</span>例えば HTML 要素には {{DOMxRef("HTMLElement")}} インターフェイス、SVG 要素には {{DOMxRef("SVGElement")}} インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。</p> + +<p>XUL の <code>XULElement</code> インターフェイスのようなウェブプラットフォームの枠外の言語もまた、<code>Element</code> インターフェイスを通じて要素を実装しています。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のプロパティを実装しています。</em></p> + +<dl> + <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> + <dd>対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。</dd> + <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> + <dd>class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。</dd> + <dt>{{DOMxRef("Element.className")}}</dt> + <dd>{{DOMxRef("DOMString")}} 型であり、要素のクラスを表します。</dd> + <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> + <dd>要素の内部の高さを表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> + <dd>要素の左境界の幅を表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> + <dd>要素の上境界の幅を表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dd>要素の内部の幅を表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。</dd> + <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>特定の要素に適用された ARIA ロールを含む {{DOMxRef("DOMString")}} を返します。</dd> + <dt>{{DOMxRef("Element.id")}}</dt> + <dd>{{DOMxRef("DOMString")}} 型であり、要素の id を表します。</dd> + <dt>{{DOMxRef("Element.innerHTML")}}</dt> + <dd>{{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。</dd> + <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> + <dd>要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。</dd> + <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>要素の名前空間の URI。名前空間がない場合は <code>null</code> になります。 + <div class="note"> + <p><strong>注:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 名前空間内に存在します。{{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ <code>null</code>。</dd> + <dt>{{DOMxRef("Element.outerHTML")}}</dt> + <dd>{{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。</dd> + <dt>{{DOMxRef("Element.part")}}</dt> + <dd>要素のパート識別子 (すなわち、 <code>part</code> 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。</dd> + <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> + <dd>要素の名前空間プレフィックスを表す {{DOMxRef("DOMString")}}。プレフィックスが指定されていない場合は <code>null</code>。</dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ <code>null</code>。</dd> + <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dd>要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.scrollLeft")}}</dt> + <dd>{{jsxref("Number")}} 型であり、要素の左スクロールオフセット値を表します。</dd> + <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>要素で可能な左スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.scrollTop")}}</dt> + <dd>文書の上端が垂直方向にスクロールされた量をピクセル数で表す {{jsxref("Number")}} です。</dd> + <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>要素で可能な上スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dd>要素のスクロールビュー幅を表す {{jsxref("Number")}} を返します。</dd> + <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> + <dd>要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。</dd> + <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>オープン・クローズに関係なく、要素が所持している Shadow Root を返します。<strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> に限り使用できます。</strong></dd> + <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> + <dd>要素が挿入されている shadow DOM スロットの名前を返します。</dd> + <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> + <dd>{{jsxref("Boolean")}} 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。</dd> + <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> + <dd>要素のタグ名を {{jsxref("String")}} で返します。</dd> + <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> + <dd>要素に関連する {{DOMxRef("UndoManager")}} を返します。</dd> + <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> + <dd>{{jsxref("Boolean")}} 型であり、要素が undo scope を提供しているか否かを示します。</dd> +</dl> + +<div class="note"> +<p><strong>注:</strong> DOM Level 3 では、{{DOMxRef("Node")}} インターフェスで <code>namespaceURI</code>、<code>localName</code>、<code>prefix</code> を定義しています。これらは DOM4 で <code>Element</code> に移動されました。</p> + +<p>この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。</p> +</div> + +<h3 id="Properties_included_from_Slotable" name="Properties_included_from_Slotable">Slotable に含まれるプロパティ</h3> + +<p><em><code>Element</code> インターフェイスは、{{DOMxRef("Slotable")}} ミックスインで定義された以下のプロパティを含んでいます。</em></p> + +<dl> + <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> + <dd>ノードが挿入されている {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。</dd> +</dl> + +<h3 id="Handlers" name="Handlers">イベントハンドラー</h3> + +<dl> + <dt>{{domxref("Element.onfullscreenchange")}}</dt> + <dd>要素が全画面モードに入ったり出たりしたときに送られる {{event("fullscreenchange")}} イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。</dd> + <dt>{{domxref("Element.onfullscreenerror")}}</dt> + <dd>全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のメソッドを実装しています。</em></p> + +<dl> + <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> + <dd>要素に特定のイベント型を扱うイベントハンドラーを登録します。</dd> + <dt>{{DOMxRef("Element.attachShadow()")}}</dt> + <dd>指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。</dd> + <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> + <dd>要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。</dd> + <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dd>引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。</dd> + <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>要素で <a href="/ja/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> を作成します。その要素は Shadow Host になります。また、{{DOMxRef("ShadowRoot")}} を返します。</dd> + <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> + <dd>{{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。</dd> + <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> + <dd>DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>要素でアクティブな Animation オブジェクトの配列を返します。</dd> + <dt>{{DOMxRef("Element.getAttribute()")}}</dt> + <dd>現在ノードから指定された名前の付いた属性値を取得して、{{jsxref("Object")}} を返します。</dd> + <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> + <dd>現在の要素の属性名の配列を返します。</dd> + <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> + <dd>現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。</dd> + <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> + <dd>要素のサイズと、ビューポートにおける位置を返します。</dd> + <dt>{{DOMxRef("Element.getClientRects()")}}</dt> + <dd>クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。</dd> + <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> + <dd>現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ {{DOMxRef("HTMLCollection")}} を返します。</dd> + <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> + <dd>現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd> + <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> + <dd>現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd> + <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> + <dd>要素が指定された指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> + <dd>要素が指定された名前空間内に指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> + <dd>要素が現在 1 つ以上の属性をもっているかを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> + <dd>呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。</dd> + <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> + <dd>メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。</dd> + <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> + <dd>テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。</dd> + <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> + <dd>メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。</dd> + <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dd>要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt> + <dd>指定された擬似要素セレクターに一致するこの擬似要素を表す {{DOMxRef("CSSPseudoElement")}} を返します。</dd> + <dt>{{DOMxRef("Element.querySelector()")}}</dt> + <dd>要素に対して、指定したセレクターにマッチする最初の {{DOMxRef("Node")}} を返します。</dd> + <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> + <dd>要素に対して、指定したセレクターにマッチするノードの {{DOMxRef("NodeList")}} を返します。</dd> + <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> + <dd>以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}} 向けに設定したポインターキャプチャーを解放 (停止) します。</dd> + <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>親要素の子リストから、要素を取り除きます。</dd> + <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> + <dd>現在ノードから，指定された名前を持つ属性を取り除きます。</dd> + <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> + <dd>現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。</dd> + <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> + <dd>要素からイベントリスナーを取り除きます。</dd> + <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。</dd> + <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>指定した要素でポインターをロックするよう、非同期的に要求できます。</dd> + <dt>{{domxref("Element.scroll()")}}</dt> + <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd> + <dt>{{domxref("Element.scrollBy()")}}</dt> + <dd>指定された量だけ要素をスクロールします。</dd> + <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> + <dd>要素がビューの内側に来るまでページをスクロールします。</dd> + <dt>{{domxref("Element.scrollTo()")}}</dt> + <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd> + <dt>{{DOMxRef("Element.setAttribute()")}}</dt> + <dd>現在ノードに、指定された名前を持つ属性値を設定します。</dd> + <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> + <dd>現在ノードに、指定された名前と名前空間を持つ属性値を設定します。</dd> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dd>すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。</dd> + <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> + <dd>以降の <a href="/ja/docs/Web/API/Pointer_events">pointer イベント</a> のキャプチャー対象とする、特定の要素を指定します。</dd> + <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dd>指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。</dd> + <dt> + <h3 id="廃止されたメソッド">廃止されたメソッド</h3> + </dt> + <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>現在ノードから指定された名前の属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>現在ノードから、指定された名前を持つ属性のノード表現を取り除きます。</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>現在ノードに、指定された名前を持つ属性値のノード表現を設定します。</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>現在ノードに、指定された名前と名前空間を持つ属性値のノード表現を設定します。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかします。</p> + +<dl> + <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> + <dd>ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。<br> + {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/error_event", "error")}}</dt> + <dd>リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。<br> + {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> + <dd>文書のビューまたは要素がスクロールしたときに発生します。<br> + {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/select_event", "select")}}</dt> + <dd>いくらかのテキストが選択されたときに発生します。<br> + {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/show_event", "show")}}</dt> + <dd>{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <code><a href="/ja/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code> 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}<br> + {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/wheel_event","wheel")}}</dt> + <dd>ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。<br> + {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。</dd> +</dl> + +<h3 id="Clipboard_events" name="Clipboard_events">クリップボードイベント</h3> + +<dl> + <dt>{{domxref("Element/copy_event", "copy")}}</dt> + <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。<br> + {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/cut_event", "cut")}}</dt> + <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。<br> + {{domxref("HTMLElement/oncut", "oncut")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/paste_event", "paste")}}</dt> + <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。<br> + {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。</dd> +</dl> + +<h3 id="Composition_events" name="Composition_events">構成イベント</h3> + +<dl> + <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> + <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。</dd> + <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> + <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。</dd> + <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> + <dd>{{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。</dd> +</dl> + +<h3 id="Focus_events" name="Focus_events">フォーカスイベント</h3> + +<dl> + <dt>{{domxref("Element/blur_event", "blur")}}</dt> + <dd>要素がフォーカスを失ったときに発生します。<br> + {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/focus_event", "focus")}}</dt> + <dd>要素がフォーカスを受け取ったときに発生します。<br> + {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> + <dd>要素がフォーカスを受け取ろうとしているときに発生します。</dd> + <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> + <dd>要素がフォーカスを失おうとしているときに発生します。</dd> +</dl> + +<h3 id="Fullscreen_events" name="Fullscreen_events">全画面イベント</h3> + +<dl> + <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> + <dd>全画面モードへの移行時または終了時に、 {{domxref("Document")}} または {{domxref("Element")}} に送られます。</dd> + <dd>{{domxref("Element.onfullscreenchange", "onfullscreenchange")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt> + <dd>全画面モードへの移行または終了を試みている中でエラーが発生したときに、 <code>Document</code> または <code>Element</code> に送られます。</dd> + <dd>{{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。</dd> +</dl> + +<h3 id="Keyboard_events" name="Keyboard_events">キーボードイベント</h3> + +<dl> + <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> + <dd>キーが押されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティから利用することもできます。</dd> + <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt> + <dd>文字の値を発生させるキーが押されたときに発生します。 {{deprecated_inline}}<br> + {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティから利用することもできます。</dd> + <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt> + <dd>キーが離されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。</dd> +</dl> + +<h3 id="Mouse_events" name="Mouse_events">マウスイベント</h3> + +<dl> + <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> + <dd>ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/click_event", "click")}}</dt> + <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> + <dd>ユーザーがコンテキストメニューを開こうとしたときに発生します。<br> + {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> + <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。<br> + {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt> + <dd>要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。</dd> + <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> + <dd>ポインティングデバイスのボタンが要素上で押されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> + <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。<br> + {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> + <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。<br> + {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> + <dd>ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。<br> + {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> + <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。<br> + {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> + <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。<br> + {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> + <dd>ポインティングデバイスのボタンが要素の上で離されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> + <dd>trackpadtouchscreen の上の圧力が変化するたびに発生します。</dd> + <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> + <dd>「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。</dd> + <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> + <dd>{{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発生します。</dd> + <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> + <dd>「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。</dd> +</dl> + +<h3 id="Touch_events" name="Touch_events">タッチイベント</h3> + +<dl> + <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> + <dd>1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。<br> + {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> + <dd>1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。<br> + {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> + <dd>1つ以上のタッチ点がタッチ面上で移動したときに発生します。<br> + {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティから利用することもできます。</dd> + <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> + <dd>1つ以上のタッチ点がタッチ面に配置されたときに発生します。<br> + {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。</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("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td> + <td>{{Spec2("CSS4 Pseudo-Elements")}}</td> + <td><code>pseudo()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td><code>getAnimations()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td><code>undoScope</code> と <code>undoManager</code> プロパティを追加した。</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>イベントハンドラーを追加: <code>ongotpointercapture</code>, <code>onlostpointercapture</code><br> + メソッドを追加: <code>setPointerCapture()</code>, <code>releasePointerCapture()</code></td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>イベントハンドラーを追加: <code>ongotpointercapture</code>, <code>onlostpointercapture</code><br> + メソッドを追加: <code>setPointerCapture()</code>, <code>releasePointerCapture()</code></td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>メソッドを追加: <code>querySelector()</code>, <code>querySelectorAll()</code></td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td><code>requestPointerLock()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td><code>requestFullscreen()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>プロパティを追加: <code>innerHTML</code>, <code>outerHTML</code><br> + メソッドを追加: <code>insertAdjacentHTML()</code></td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extension-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>プロパティを追加: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, <code>clientHeight</code><br> + メソッドを追加: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>{{DOMxRef("ElementTraversal")}} インターフェイスのインスタンスを追加。</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>メソッドを追加: <code>closest()</code>, <code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code><br> + Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>メソッドを削除: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, <code>setIdAttributeNode()</code><br> + <code>getElementsByTag()</code> および <code>getElementsByTagNS()</code> の返値を変更。<br> + <code>schemaTypeInfo</code> プロパティを削除。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>メソッドを追加: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, <code>setIdAttributeNode()</code>。これらのメソッドは実装されず、のちの仕様書で削除されました。<br> + <code>schemaTypeInfo</code> プロパティを追加。このプロパティは実装されず、後の仕様で削除されました。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td><code>normalize()</code> メソッドを {{DOMxRef("Node")}} に移動。</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</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.Element")}}</p> diff --git a/files/ja/web/api/element/innerhtml/index.html b/files/ja/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..cce92d169e --- /dev/null +++ b/files/ja/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM 解析 + - Element + - HTML 解析 + - Reference + - innerHTML + - プロパティ +translation_of: Web/API/Element/innerHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} オブジェクトの <strong><code>innerHTML</code></strong> プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。</span></p> + +<div class="note"><strong>メモ: </strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&)</code>, <code>(<)</code>, <code>(>)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;"</code>, <code>"&lt;"</code>, <code>"&gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div> + +<p>要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; + +<var>element</var>.innerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 <code>innerHTML</code> に値を設定すると、要素のすべての子孫を削除して、 <var>htmlString</var> の文字列で与えられた HTML を解析して構築されたノードに置き換えます。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code>innerHTML</code> プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。</p> + +<h3 id="要素の_HTML_コンテンツの読み取り">要素の HTML コンテンツの読み取り</h3> + +<p><code>innerHTML</code> を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。</p> + +<pre class="brush: js">let contents = myElement.innerHTML;</pre> + +<p>これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。</p> + +<div class="note"> +<p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p> +</div> + +<h3 id="Replacing_the_contents_of_an_element" name="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3> + +<p><code>innerHTML</code> の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。</p> + +<p>例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。</p> + +<pre class="brush: js">document.body.innerHTML = "";</pre> + +<p>この例は文書の現在の HTML マークアップを走査し、 <code>"<"</code> の文字を HTML エンティティの <code>"&lt;"</code> に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 <code>innerHTML</code> の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。</p> + +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> + +<h4 id="Operational_details" name="Operational_details">Operational details</h4> + +<p><code>innerHTML</code> に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。</p> + +<ol> + <li>指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。</li> + <li>中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <code><template></code> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい <code>DocumentFragment</code> で置き換えます。</li> + <li>その他の要素はすべて、要素の内容を新しい <code>DocumentFragment</code> のノードで置き換えます。</li> +</ol> + +<h3 id="Security_considerations" name="Security_considerations">セキュリティの考慮事項</h3> + +<p>ウェブページにテキストを挿入するために <code>innerHTML</code> を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。</p> + +<pre class="brush: js">const name = "John"; +// 'el' を HTML の DOM 要素と想定します +el.innerHTML = name; // この場合は無害 + +// ... + +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // この場合は無害</pre> + +<p>これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では <code>innerHTML</code> で挿入された {{HTMLElement("script")}} タグは<a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">実行するべきではない</a>と定義しているからです。</p> + +<p>しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために <code>innerHTML</code> を使用するたびに、セキュリティリスクは残ります。</p> + +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // アラートが表示される</pre> + +<p>このため、プレーンテキストを挿入するときには <code>innerHTML</code> を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。</p> + +<div class="warning"> +<p><strong>警告:</strong> プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 <code>innerHTML</code> は多くの場合、コードが拒絶される結果になります。例えば、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>の中で <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code> を使用した場合</a>、拡張機能を <a href="https://addons.mozilla.org/">addons.mozilla.org</a> に提出すると、自動レビュープロセスを通過できないでしょう。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は <code>innerHTML</code> を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Logging mouse events inside this container..."); +</pre> + +<p><code>log()</code> 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから <code>"log"</code> クラスのボックスにメッセージを追加します。</p> + +<p>{{domxref("MouseEvent")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。</p> + +<pre class="brush: js">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</pre> + +<p>それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。</p> + +<pre class="brush: js">var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</pre> + +<h3 id="HTML">HTML</h3> + +<p>この例の HTML はとても単純です。</p> + +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> + +<p><code>"box"</code> クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが <code>"log"</code> である <code><div></code> は、ログテキスト自身のコンテナーです。</p> + +<h3 id="CSS">CSS</h3> + +<p>以下の CSS が例の内容をスタイル付けします。</p> + +<pre class="brush: css">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。</p> + +<p>{{EmbedLiveSample("Example", 640, 350)}}</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 Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</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.Element.innerHTML")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("Node.textContent")}} および {{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li> + <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li> +</ul> diff --git a/files/ja/web/api/element/insertadjacenthtml/index.html b/files/ja/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..94caa67346 --- /dev/null +++ b/files/ja/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,134 @@ +--- +title: element.insertAdjacentHTML +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - DOM + - DOM Element Methods + - Gecko + - Method + - Reference +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>insertAdjacentHTML()</code> は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 <code>innerHTML</code> への代入による直接的な操作よりもはるかに高速な動作となります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<p><code>position</code> には <code>element</code> に対する相対位置を、以下に示す文字列の1つで指定します。</p> + +<dl> + <dt><code style="color: red;">'beforebegin'</code></dt> + <dd>element の直前に挿入</dd> + <dt><code style="color: green;">'afterbegin'</code></dt> + <dd><code>element</code> 内部の、最初の子要素の前に挿入</dd> + <dt><code>'beforeend'</code></dt> + <dd><code style="color: blue;">element</code> 内部の、最後の子要素の後に挿入</dd> + <dt><code style="color: magenta;">'afterend'</code></dt> + <dd><code>element</code> の直後に挿入</dd> +</dl> + +<p><code>text</code><em> </em>には HTML または XML としてパースし DOM ツリーに挿入することが可能な文字列を指定します。</p> + +<h3 id="Visualization_of_position_names" name="Visualization_of_position_names">ポジション名の可視化</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>注記:</strong> <code>beforebegin</code> および <code>afterend</code> の位置指定で動作するのは、ノードがツリー内にあり、かつ親要素が存在する場合のみとなります。</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// 挿入位置および挿入後の構造は、以下のようになります。 +// <div id="one">one</div><div id="two">two</div></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 Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </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>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</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>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>Henri Sivonen 氏による <a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org へのゲストポスト</a><span class="external"> には、幾つかのケースでは insertAdjacentHTML がより速い方法であることを示すベンチマークが含まれています。</span></li> +</ul> diff --git a/files/ja/web/api/element/insertadjacenttext/index.html b/files/ja/web/api/element/insertadjacenttext/index.html new file mode 100644 index 0000000000..7b13ef97b8 --- /dev/null +++ b/files/ja/web/api/element/insertadjacenttext/index.html @@ -0,0 +1,147 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +translation_of: Web/API/Element/insertAdjacentText +--- +<p>{{APIRef("DOM")}}</p> + +<p><code>insertAdjacentText()</code> メソッドは、与えられたテキストノードを、メソッドを実行した要素に対する相対的な位置に挿入します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre> + +<h3 id="パラメーター">パラメーター</h3> + +<dl> + <dt>position</dt> + <dd><code>element</code> に対する相対的な位置を {{domxref("DOMString")}} 表現で指定します。次の文字列のうち1つを取ります。 + <ul> + <li><code style="color: red;">'beforebegin'</code>: <code>element</code> 本体の前。</li> + <li><code style="color: green;">'afterbegin'</code>: <code>element</code> のすぐ内側の、最初の子要素の前。</li> + <li><code style="color: blue;">'beforeend'</code>: <code>element</code> のすぐ内側の、最後の子要素の後。</li> + <li><code style="color: magenta;">'afterend'</code>:<code>element</code> 本体の後。</li> + </ul> + </dd> + <dt>element</dt> + <dd>DOM ツリーに挿入するテキストの {{domxref("DOMString")}} 表現。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>Void。</p> + +<h3 id="例外">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">例外</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td><code>position</code> として指定した文字列が認識できない値だった。</td> + </tr> + </tbody> +</table> + +<h3 id="ポジション名の視覚的な表現">ポジション名の視覚的な表現</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>注記:</strong> <code>beforebegin</code> および <code>afterend</code> の positions が使えるのは、対象ノードがツリーの中にあって、親要素を持つ時に限られます。</div> + +<pre class="brush: js">beforeBtn.addEventListener('click', function() { + para.insertAdjacentText('afterbegin',textInput.value); +}); + +afterBtn.addEventListener('click', function() { + para.insertAdjacentText('beforeend',textInput.value); +});</pre> + +<p>私たちが GitHub に用意した <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> デモを見てください。(同時に <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a> も読んでください。) ここにはシンプルなパラグラフが1つあります。フォーム要素に好きなテキストを入力してから、<em>Insert before</em> または <em>Insert after</em> ボタンを押すと、<code>insertAdjacentText()</code> が、入力したテキストをパラグラフのテキストの前または後に挿入します。すでにあるテキストノードにテキストが追加されるのではなく、新しい追加テキストが含まれる別のテキストノードが生成されて、それが追加されることに注意してください。</p> + +<p><strong style="color: #4d4e53; font-size: 2.14286rem; font-weight: 700; letter-spacing: -1px;">仕様</strong></p> + +<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-element-insertadjacenttext', 'insertAdjacentText()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </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>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("48.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatGeckoMobile("48.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> +</ul> diff --git a/files/ja/web/api/element/localname/index.html b/files/ja/web/api/element/localname/index.html new file mode 100644 index 0000000000..a785fc58f3 --- /dev/null +++ b/files/ja/web/api/element/localname/index.html @@ -0,0 +1,146 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +translation_of: Web/API/Element/localName +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.localName</code></strong> 読み取り専用プロパティは、要素の修飾名のローカル部分を返します。</p> + +<div class="note"> +<p>DOM4 より前、この API は {{domxref("Node")}} の中で定義されていました。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName +</pre> + +<h3 id="返り値">返り値</h3> + +<p>要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}}。</p> + +<h2 id="例">例</h2> + +<p><code>（text/xml</code> や <code>application/xhtml+xml</code> のような、XML のコンテンツタイプで送出される必要があります。）</p> + +<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <script type="application/javascript"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" + width="100px" height="100px" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +</pre> + +<h2 id="注">注</h2> + +<p>ノードのローカル名は、ノードの修飾名の、コロンの後に続く部分です。修飾名は一般に、XML において、特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p> + +<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> + +<div class="note"> +<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、HTML DOM における HTML要素では大文字で返します。</p> +</div> + +<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('DOM4', '#interface-element', 'Element.localName')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>初めての定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>基本サポート</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この API は以前、{{domxref("Node")}} API で利用可能でした。</p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.localName")}}</li> + <li>{{domxref("Node.localName")}}</li> +</ul> diff --git a/files/ja/web/api/element/matches/index.html b/files/ja/web/api/element/matches/index.html new file mode 100644 index 0000000000..64ab126b2b --- /dev/null +++ b/files/ja/web/api/element/matches/index.html @@ -0,0 +1,120 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Element + - Method + - Reference + - msMatchesSelector + - webkitMatchesSelector +translation_of: Web/API/Element/matches +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>matches()</code></strong> メソッドは、その要素 ({{domxref("Element")}}) が指定された <code><var>selectorString</var></code> によって選択されるかをチェックします。言い換えれば、要素「が」セレクターであることをチェックします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>result</var> = <var>element</var>.matches(<var>selectorString</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p><code><var>selectorString</var></code> は、テストするためのセレクターを表す文字列です。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code><var>result</var></code> は {{domxref("Boolean")}} です。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>指定されたセレクター文字列が無効である場合。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate"><ul id="birds"> + <li>Orange-winged parrot</li> + <li class="endangered">Philippine eagle</li> + <li>Great white pelican</li> +</ul> + +<script type="text/javascript"> + var birds = document.getElementsByTagName('li'); + + for (var i = 0; i < birds.length; i++) { + if (birds[i].matches('.endangered')) { + console.log('The ' + birds[i].textContent + ' is endangered!'); + } + } +</script> +</pre> + +<p>要素が実際に値 <code>endangered</code> 持つ <code>class</code> 属性を持つので、これは、コンソールのログに "The Philippine eagle is endangered!" と表示されます。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>Element.matches()</code> や <code>Element.matchesSelector()</code> には対応していないが、 <code>document.querySelectorAll()</code> には対応しているブラウザーには、ポリフィルが存在します。</p> + +<pre class="brush: js notranslate">if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.matchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector || + Element.prototype.oMatchesSelector || + Element.prototype.webkitMatchesSelector || + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; +}</pre> + +<p>しかし、古いブラウザーに対応することの実用性を考えると、実用的なケース (言い換えると IE9 以降の対応) ではほとんどの場合 (全部ではない)、次のもので十分です。</p> + +<pre class="brush: js notranslate">if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} +</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-element-matches', 'Element.prototype.matches')}}</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.Element.removeAttribute")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li> + <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div> + </li> + <li> + <div class="syntaxbox">セレクターを使用するその他のメソッド: {{domxref("element.querySelector()")}} および {{domxref("element.closest()")}}</div> + </li> +</ul> diff --git a/files/ja/web/api/element/mousedown_event/index.html b/files/ja/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..5c597f9155 --- /dev/null +++ b/files/ja/web/api/element/mousedown_event/index.html @@ -0,0 +1,93 @@ +--- +title: 'Element: mousedown イベント' +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Down + - Element + - Event + - Interface + - MouseEvent + - Press + - Reference + - UI + - button + - events + - mouse + - mousedown + - イベント +translation_of: Web/API/Element/mousedown_event +--- +<p>{{APIRef}}</p> + +<p><strong><code>mousedown</code></strong> イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたときに {{domxref("Element")}} に発行されます。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> {{domxref("Element/click_event", "click")}} イベントとの違いは、 <code>click</code> イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 <code>mousedown</code> はボタンが最初に押された時点で発行されます。</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}</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('UI Events', '#event-type-mousedown', 'mousedown')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.mousedown_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/mouseenter_event/index.html b/files/ja/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..f78dfa48da --- /dev/null +++ b/files/ja/web/api/element/mouseenter_event/index.html @@ -0,0 +1,162 @@ +--- +title: 'Element: mouseenter イベント' +slug: Web/API/Element/mouseenter_event +tags: + - API + - Cursor + - DOM + - Element + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mouseenter + - pointer + - イベント +translation_of: Web/API/Element/mouseenter_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>mouseenter</code></strong> イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code>mouseenter</code> は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、<a href="/ja/docs/Web/API/Event/bubbles">バブリング</a>しない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。</p> + +<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> +要素の階層に入った場合、それぞれの要素に1つずつ <code>mouseenter</code> が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。 + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> +DOM ツリーの最も深い要素に1つの <code>mouseover</code> イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。</div> + +<p>深い階層では、数多くの <code>mouseenter</code> イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は <code>mouseover</code> イベントを待ち受けした方が優れています。</p> + +<p>対応する (マウスがコンテンツ領域から出たときに要素に発生する) <code>mouseleave</code> と組み合わせると、 <code>mouseenter</code> イベントは CSS の {{cssxref(':hover')}} 疑似クラスととても似た方法で動作します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a href="/ja/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> のドキュメントには、 <code>mouseover</code> と <code>mouseenter</code> の間の違いを説明する例があります。</p> + +<h3 id="mouseenter">mouseenter</h3> + +<p>以下は端的な例ですが、 <code>mouseenter</code> イベントを使用して、マウスが割り当てられた空間に入ったときに <code>div</code> の境界を変化させます。そして、リストに <code>mouseenter</code> または <code>mouseleave</code> イベントの回数を示す項目を追加します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p><code>div</code> を整形してもっと目立つようにします。</p> + +<pre class="brush: css">#mouseTarget { + box-sizing: border-box; + width:15rem; + border:1px solid #333; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var enterEventCount = 0; +var leaveEventCount = 0; +const mouseTarget = document.getElementById('mouseTarget'); +const unorderedList = document.getElementById('unorderedList'); + +mouseTarget.addEventListener('mouseenter', e => { + mouseTarget.style.border = '5px dotted orange'; + enterEventCount++; + addListItem('This is mouseenter event ' + enterEventCount + '.'); +}); + +mouseTarget.addEventListener('mouseleave', e => { + mouseTarget.style.border = '1px solid #333'; + leaveEventCount++; + addListItem('This is mouseleave event ' + leaveEventCount + '.'); +}); + +function addListItem(text) { + // 指定されたテキストを使用して新しいテキストノードを生成する + var newTextNode = document.createTextNode(text); + + // 新しい li 要素を生成する + var newListItem = document.createElement("li"); + + // テキストノードを li 要素に追加する + newListItem.appendChild(newTextNode); + + // リストに新しく生成したリスト項目を追加する + unorderedList.appendChild(newListItem); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('mouseenter')}}</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('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("api.Element.mouseenter_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/mouseleave_event/index.html b/files/ja/web/api/element/mouseleave_event/index.html new file mode 100644 index 0000000000..e98bf28c3b --- /dev/null +++ b/files/ja/web/api/element/mouseleave_event/index.html @@ -0,0 +1,156 @@ +--- +title: 'Element: mouseleave イベント' +slug: Web/API/Element/mouseleave_event +tags: + - API + - DOM + - Element + - Event + - MouseEvent + - Reference + - events + - mouse + - mouseleave + - move +translation_of: Web/API/Element/mouseleave_event +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary"><strong><code>mouseleave</code></strong> イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td> + </tr> + </tbody> +</table> + +<p><code>mouseleave</code> と {{event('mouseout')}} はよく似ていますが、 <code>mouseleave</code> はバブリングしないのに対して <code>mouseout</code> はバブリングするという点が異なります。すなわち <code>mouseleave</code> はポインターがその要素<em>および</em>すべての子孫を出たときに発行されるのに対し、 <code>mouseout</code> はポインターがその要素<em>または</em>その要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。</p> + +<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div> + +<p>階層内のそれぞれの要素からポインターが出たとき、 <code>mouseleave</code> イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが4つの要素の階層にあるテキストから div が表す領域の外に出ると、4つのイベントが4つの要素に送られます。</p> + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div> + +<p>単一の <code>mouseout</code> イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a href="/ja/docs/Web/API/Element/mouseout_event#Examples"><code>mouseout</code></a> のドキュメントには、 <code>mouseout</code> と <code>mouseleave</code> との違いを説明する例があります。</p> + +<h3 id="mouseleave">mouseleave</h3> + +<p>次の例では <code>mouseenter</code> イベントを使用して、マウスが <code><div></code> に割り当てられた空間に入ったときにその境界線を変更しています。次に、 <code>mouseenter</code> イベントまたは <code>mouseleave</code> イベントの番号を指定してリストに項目を追加します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p><code><div></code> がもっと目立つようにスタイル付けします。</p> + +<pre class="brush: css notranslate">#mouseTarget { + box-sizing: border-box; + width:15rem; + border:1px solid #333; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var enterEventCount = 0; +var leaveEventCount = 0; +const mouseTarget = document.getElementById('mouseTarget'); +const unorderedList = document.getElementById('unorderedList'); + +mouseTarget.addEventListener('mouseenter', e => { + mouseTarget.style.border = '5px dotted orange'; + enterEventCount++; + addListItem('This is mouseenter event ' + enterEventCount + '.'); +}); + +mouseTarget.addEventListener('mouseleave', e => { + mouseTarget.style.border = '1px solid #333'; + leaveEventCount++; + addListItem('This is mouseleave event ' + leaveEventCount + '.'); +}); + +function addListItem(text) { + // 与えられたテキストで新しいテキストノードを生成する + var newTextNode = document.createTextNode(text); + + // 新しい li 要素を生成 + var newListItem = document.createElement("li"); + + // テキストノードを li 要素に追加 + newListItem.appendChild(newTextNode); + + // 新しく生成されたリスト項目をリストへ追加 + unorderedList.appendChild(newListItem); +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('mouseleave')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <thead> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </thead> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.mouseleave_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/mousemove_event/index.html b/files/ja/web/api/element/mousemove_event/index.html new file mode 100644 index 0000000000..aa0d3ccddc --- /dev/null +++ b/files/ja/web/api/element/mousemove_event/index.html @@ -0,0 +1,159 @@ +--- +title: 'Element: mousemove イベント' +slug: Web/API/Element/mousemove_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mousemove + - move + - pointer +translation_of: Web/API/Element/mousemove_event +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary"><code>mousemove</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、 {{domxref("Element/mousedown_event", "mousedown")}}, <code>mousemove</code>, and {{domxref("Element/mouseup_event", "mouseup")}} イベントを使って HTML5 の要素である <a href="/ja/docs/Web/API/Canvas_API">canvas</a> の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。</p> + +<p>ページが読み込まれると、定数 <code>myPics</code> と <code>context</code> が、それぞれ canvas と描画に使用する 2d context の参照を格納するために生成されます。</p> + +<p><code>mousedown</code> イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 <code>x</code> と <code>y</code> に格納され、フラグ <code>isDrawing</code> の値が true になります。</p> + +<p>ページ上でマウスを動かすと、 <code>mousemove</code> イベントが発行されます。 <code>isDrawing</code> が true である場合、 <code>drawLine</code> 関数を呼び出して <code>x</code> と <code>y</code> に格納された値から現在の位置まで線を引きます。</p> + +<p><code>drawLine()</code> 関数の返値は、座標を再調整して <code>x</code> と <code>y</code> に保存します。</p> + +<p><code>mouseup</code> イベントで線の最後の区間を描画し、 <code>x</code> と <code>y</code> をそれぞれを <code>0</code> に設定し、その後の描画を止めるために <code>isDrawing</code> を <code>false</code> に設定します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><h1>マウスイベントを使ったお絵かき</h1> +<canvas id="myPics" width="560" height="360"></canvas> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">canvas { + border: 1px solid black; + width: 560px; + height: 360px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">// isDrawing が真のとき、マウスを動かすと線を描く +let isDrawing = false; +let x = 0; +let y = 0; + +const myPics = document.getElementById('myPics'); +const context = myPics.getContext('2d'); + +// event.offsetX, event.offsetY はキャンバスの縁からのオフセットの (x,y) です。 + +// mousedown, mousemove, mouseup にイベントリスナーを追加 +myPics.addEventListener('mousedown', e => { + x = e.offsetX; + y = e.offsetY; + isDrawing = true; +}); + +myPics.addEventListener('mousemove', e => { + if (isDrawing === true) { + drawLine(context, x, y, e.offsetX, e.offsetY); + x = e.offsetX; + y = e.offsetY; + } +}); + +window.addEventListener('mouseup', e => { + if (isDrawing === true) { + drawLine(context, x, y, e.offsetX, e.offsetY); + x = 0; + y = 0; + isDrawing = false; + } +}); + +function drawLine(context, x1, y1, x2, y2) { + context.beginPath(); + context.strokeStyle = 'black'; + context.lineWidth = 1; + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.stroke(); + context.closePath(); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 640, 450)}}</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('UI Events', '#event-type-mousemove', 'mousemove')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.mousemove_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/mouseout_event/index.html b/files/ja/web/api/element/mouseout_event/index.html new file mode 100644 index 0000000000..a27a6f4f57 --- /dev/null +++ b/files/ja/web/api/element/mouseout_event/index.html @@ -0,0 +1,132 @@ +--- +title: 'Element: mouseout イベント' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mouseout + - move + - イベント + - マウス +translation_of: Web/API/Element/mouseout_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>mouseout</code></strong> イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。</span> <code>mouseout</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例は <code>mouseout</code> イベントの使い方を示しています。</p> + +<h3 id="mouseout_と_mouseleave">mouseout と mouseleave</h3> + +<p>以下の例は、 <code>mouseout</code> と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 <code>mouseleave</code> イベントを {{HTMLElement("ul")}} に追加し、マウスが <code><ul></code> を出るたびにリストを紫色に着色するようにします。 <code>mouseout</code> をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。</p> + +<p>これを試してみると、 <code>mouseout</code> はそれぞれのリスト項目に配信されるのに対し、 <code>mouseleave</code> は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <code><ul></code> を不明瞭にします。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">let test = document.getElementById("test"); + +// マウスが <ul> を出るとリストを一時的に紫色にします +// ときに1度だけ実行されます +test.addEventListener("mouseleave", function( event ) { + // mouseleave の対象を強調 + event.target.style.color = "purple"; + + // 少し待ってから色をリセット + setTimeout(function() { + event.target.style.color = ""; + }, 1000); +}, false); + +// マウスが出ると <li> を一時的にオレンジ色にします +test.addEventListener("mouseout", function( event ) { + // mouseout の対象を強調 + event.target.style.color = "orange"; + + // 少し待ってから色をリセット + setTimeout(function() { + event.target.style.color = ""; + }, 500); +}, false);</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <thead> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </thead> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.mouseout_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/mouseover_event/index.html b/files/ja/web/api/element/mouseover_event/index.html new file mode 100644 index 0000000000..d6354496f4 --- /dev/null +++ b/files/ja/web/api/element/mouseover_event/index.html @@ -0,0 +1,128 @@ +--- +title: 'Element: mouseover イベント' +slug: Web/API/Element/mouseover_event +tags: + - API + - Cursor + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mouseover + - move + - pointer +translation_of: Web/API/Element/mouseover_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>mouseover</code></strong> イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例は、 <code>mouseover</code> と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">let test = document.getElementById("test"); + +// このハンドラーは、カーソルが順序なしリストの上を移動した +// ときに1度だけ実行されます +test.addEventListener("mouseenter", function( event ) { + // mouseenter の対象を強調 + event.target.style.color = "purple"; + + // 少し待ってから色をリセット + setTimeout(function() { + event.target.style.color = ""; + }, 500); +}, false); + +// このハンドラーは異なるリスト項目の上を移動するごとに +// 実行されます +test.addEventListener("mouseover", function( event ) { + // mouseover の対象を強調 + event.target.style.color = "orange"; + + // 少し待ってから色をリセット + setTimeout(function() { + event.target.style.color = ""; + }, 500); +}, false);</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <thead> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </thead> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.mouseover_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/mouseup_event/index.html b/files/ja/web/api/element/mouseup_event/index.html new file mode 100644 index 0000000000..4259ea14b0 --- /dev/null +++ b/files/ja/web/api/element/mouseup_event/index.html @@ -0,0 +1,90 @@ +--- +title: 'Element: mouseup イベント' +slug: Web/API/Element/mouseup_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - Release + - UI + - Up + - button + - events + - mouse + - mouseup + - イベント + - マウス +translation_of: Web/API/Element/mouseup_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>mouseup</code></strong> イベントは、 {{domxref("Element")}} においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが話されたときに発生します。</span> <code>mouseup</code> イベントは {{domxref("Element.mousedown_event", "mousedown")}} イベントに対応します。</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("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <thead> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </thead> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.mouseup_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> + <li>{{domxref("Element/click_event", "click")}}</li> + <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> + <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> + <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> + <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> + <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> + <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> +</ul> diff --git a/files/ja/web/api/element/name/index.html b/files/ja/web/api/element/name/index.html new file mode 100644 index 0000000000..392f9d84f4 --- /dev/null +++ b/files/ja/web/api/element/name/index.html @@ -0,0 +1,57 @@ +--- +title: element.name +slug: Web/API/Element/name +translation_of: Web/API +--- +<p>{{ ApiRef() }}</p> +<h3 class="editable" id="概要" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>概要</span></h3> +<p><strong>name</strong> はDOM オブジェクトの<code>name</code> 属性を取得または設定します。</p> +<p>ただし、この属性が適用されるのは次の要素に限られます。</p> +<p>{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, {{ HTMLelement("textarea") }}.</p> +<p>name は、 {{ domxref("document.getElementsByName()") }} メソッドか、 <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> と <a href="/en/DOM/form.elements" title="en/DOM/form.elements">form.elements</a> のコレクションで使用することができます。 form や form.elements のコレクションで使われた場合、一つの要素かコレクションを返します。</p> +<h3 class="editable" id="構文" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>構文</span></h3> +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> +<h3 class="editable" id="例" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>例</span></h3> +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // form の最初の要素の参照を取得します。 + var formElement = document.forms['formA'].elements[0]; + + // name 属性を設定します。 + formElement.name = 'inputA'; + + // input の value を表示します。 + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> +<h3 class="editable" id="注記" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>注記</span></h3> +<p>Internet Explorer (IE)では、 {{ domxref("document.createElement()") }}を使って作成されたDOM オブジェクトの name 属性 は、設定および変更をすることができません。</p> +<h3 class="editable" id="仕様" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>仕様</span></h3> +<p>W3C DOM 2 HTML Specification:</p> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> +<p>{{ languages( { "en" :"en/DOM/element.name", "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}</p> diff --git a/files/ja/web/api/element/onfullscreenchange/index.html b/files/ja/web/api/element/onfullscreenchange/index.html new file mode 100644 index 0000000000..ff567ca433 --- /dev/null +++ b/files/ja/web/api/element/onfullscreenchange/index.html @@ -0,0 +1,95 @@ +--- +title: Element.onfullscreenchange +slug: Web/API/Element/onfullscreenchange +tags: + - API + - Element + - Event Handler + - Full + - Full-screen + - Fullscreen API + - Property + - Reference + - fullscreen + - onfullscreenchange + - screen + - イベントハンドラー + - プロパティ + - 全画面 + - 全画面モード +translation_of: Web/API/Element/onfullscreenchange +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} インターフェイスの <code><strong>onfullscreenchange</strong></code> プロパティは、 {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} イベントのイベントハンドラーで、要素が全画面モードへ移行するか、終了するときに発生します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>targetDocument</em>.onfullscreenchange = <em>fullscreenChangeHandler</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{event("fullscreenchange")}} イベントのイベントハンドラーで、要素が全画面モードへ移行または終了したことを示します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では <code>fullscreenchange</code> イベントのハンドラーである <code>handleFullscreenChange()</code> を作成します。この関数は {{domxref("event.target")}} のチェックしてどの要素に対して呼び出されたのかを判別し、文書の {{domxref("Document.fullscreenElement", "fullscreenElement")}} の値と要素を比較して、同じノードであるかどうかを確認します。</p> + +<p>これを <code>isFullscreen</code> の値に設定して <code>adjustMyControls()</code> という関数に渡し、これがウィンドウ内が全画面モードで表示されているときにアプリのユーザーインターフェイスが最適に表示されるように調整する関数になると想像してください。</p> + +<pre class="brush: js">function toggleFullscreen() { + let elem = document.querySelector("video"); + + elem.onfullscreenchange = handleFullscreenChange; + if (!document.fullscreenElement) { + elem.requestFullscreen().then({}).catch(err => { + alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); + }); + } else { + document.exitFullscreen(); + } +} + +function handleFullscreenChange(event) { + let elem = event.target; + let isFullscreen = document.fullscreenElement === elem; + + adjustMyControls(isFullscreen); +} +</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("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>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</li> + <li>{{domxref("Element.onfullscreenerror")}}</li> + <li>{{domxref("Document")}} で同等のもの: {{domxref("Document.onfullscreenchange", "onfullscreenchange")}}.</li> +</ul> diff --git a/files/ja/web/api/element/onfullscreenerror/index.html b/files/ja/web/api/element/onfullscreenerror/index.html new file mode 100644 index 0000000000..b0af3dcb88 --- /dev/null +++ b/files/ja/web/api/element/onfullscreenerror/index.html @@ -0,0 +1,79 @@ +--- +title: Element.onfullscreenerror +slug: Web/API/Element/onfullscreenerror +tags: + - API + - Element + - Event Handler + - Full + - Full-screen API + - Property + - Reference + - fullscreen + - onfullscreenerror + - screen + - プロパティ + - 全画面モード +translation_of: Web/API/Element/onfullscreenerror +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} インターフェイスの <code><strong>onfullscreenchange</strong></code> プロパティは {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} イベントのイベントハンドラーで、要素が全画面モードへ移行するか、終了するときにエラーが発生したときに発生します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>targetElement</var>.onfullscreenerror = <var>fullscreenErrorHandler</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}} イベントのエラーハンドラーです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は、ユーザーが主導するイベント ({{domxref("Element/click_event", "click")}} や {{domxref("Element/keypress_event", "keypress")}} イベントなど) のハンドラーの外から全画面モードへの切り替えを試みます。全画面モードへの意向は、ユーザー入力への応答の中からしか許可されていないため、これによってエラーが発生し、 {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} イベントをエラーハンドラーに配信します。</p> + +<pre class="brush: js">let elem = document.querySelector("video")}} + +elem.onfullscreenerror = function ( event ) { + displayWarning("Unable to switch into full-screen mode."); +}; + +//.... + +elem.requestFullscreen();</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("Fullscreen", "#dom-element-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.Element.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>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</li> + <li>{{domxref("Element.onfullscreenerror")}}</li> + <li>{{domxref("Document.onfullscreenerror")}}</li> +</ul> diff --git a/files/ja/web/api/element/outerhtml/index.html b/files/ja/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..6231aa1bb0 --- /dev/null +++ b/files/ja/web/api/element/outerhtml/index.html @@ -0,0 +1,120 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing + - Property + - Reference + - Serialization + - Serializing + - outerHTML +translation_of: Web/API/Element/outerHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p> + +<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML; + +<var>element</var>.outerHTML = <var>htmlString</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p> + +<pre class="brush: js">// HTML: +// <div id="d"><p>Content</p><p>Further Elaborated</p></div> + +d = document.getElementById("d"); +console.log(d.outerHTML); + +// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' +// が、コンソールウィンドウに出力されます。 +</pre> + +<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p> + +<pre class="brush: js">// HTML: +// <div id="container"><div id="d">This is a div.</div></div> + +container = document.getElementById("container"); +d = document.getElementById("d"); +console.log(container.firstChild.nodeName); // "DIV" が記録される + +d.outerHTML = "<p>This paragraph replaced the original div.</p>"; +console.log(container.firstChild.nodeName); // "P" が記録される + +// #d の div 要素はもはや文書ツリーの一部ではなく、 +// 新たな段落に置き換えられました。 +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p> + +<pre class="brush: js">var div = document.createElement("div"); +div.outerHTML = "<div class=\"test\">test</div>"; +console.log(div.outerHTML); // output: "<div></div>"</pre> + +<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p> + +<pre class="brush: js">var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // "P" を表示 +p.outerHTML = "<div>This div replaced a paragraph.</div>"; +console.log(p.nodeName); // "P" のまま +</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 Parsing', '#outerhtml', 'Element.outerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</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.Element.outerHTML")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li> + <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li> + <li>{{domxref("HTMLElement.outerText")}}</li> +</ul> diff --git a/files/ja/web/api/element/paste_event/index.html b/files/ja/web/api/element/paste_event/index.html new file mode 100644 index 0000000000..bf7a667dfa --- /dev/null +++ b/files/ja/web/api/element/paste_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'Element: paste イベント' +slug: Web/API/Element/paste_event +tags: + - Clipboard API + - ClipboardEvent + - Element + - Event + - NeedsUpdate + - paste + - イベント + - リファレンス +translation_of: Web/API/Element/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>カーソルが編集可能なコンテキストにある場合 ({{HTMLElement("textarea")}} や <code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> 属性が <code>true</code> である要素など)、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。</p> + +<p>このイベントのハンドラーは、イベントの <code>clipboardData</code> プロパティにある {{domxref("DataTransfer/getData", "getData()")}} を呼び出すことでクリップボードの中身にアクセスすることができます。</p> + +<p>既定の動作を上書きする場合 (例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など)、イベントハンドラーで {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。</p> + +<p><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">統合的な</a> <code>paste</code> イベントを構築して配信することができますが、文書の内容には影響しません。</p> + +<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="source" contenteditable="true">Try copying text from this box...</div> +<div class="target" contenteditable="true">...and pasting it into this one</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const target = document.querySelector('div.target'); + +target.addEventListener('paste', (event) => { + let paste = (event.clipboardData || window.clipboardData).getData('text'); + paste = paste.toUpperCase(); + + const selection = window.getSelection(); + if (!selection.rangeCount) return false; + selection.deleteFromDocument(); + selection.getRangeAt(0).insertNode(document.createTextNode(paste)); + + event.preventDefault(); +}); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '100px') }}</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('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.Element.paste_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/paste_event", "paste")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/paste_event", "paste")}}</li> +</ul> diff --git a/files/ja/web/api/element/prefix/index.html b/files/ja/web/api/element/prefix/index.html new file mode 100644 index 0000000000..fa08e3d8fc --- /dev/null +++ b/files/ja/web/api/element/prefix/index.html @@ -0,0 +1,62 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +translation_of: Web/API/Element/prefix +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.prefix</strong></code> 読み取り専用プロパティは、指定された要素の名前空間プレフィックスを、プレフィックスが指定されていない場合は <code>null</code> を返します。</p> + +<div class="note"> +<p>DOM4以前、このAPIは {{domxref("Node")}} インターフェイスで定義されていました。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix +</pre> + +<h2 id="例">例</h2> + +<p>以下はコンソールに "x" を記録します。</p> + +<pre class="brush:xml"><x:div onclick="console.log(this.prefix)"/> +</pre> + +<h2 id="注">注</h2> + +<p>これは名前空間を認識するパーサが使われている場合、すなわち文書がXMLのMIMEタイプで送られているときのみ働き、HTML文書では働かないでしょう。</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('DOM WHATWG', '#dom-element-prefix', 'Element: prefix')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.Element.prefix")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Element.localName")}}</li> + <li>{{domxref("Attr.prefix")}}</li> + <li>{{domxref("Node.prefix")}}</li> +</ul> diff --git a/files/ja/web/api/element/queryselector/index.html b/files/ja/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..12c10525d5 --- /dev/null +++ b/files/ja/web/api/element/queryselector/index.html @@ -0,0 +1,91 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef}}</div> + +<p>対象要素の子孫の内、引数に指定したCSSセレクタにマッチする最初の要素を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s); +</pre> + +<ul> + <li><code>element</code>と<code>baseElement</code>は{{domxref("element")}}オブジェクトを表します。</li> + <li><code>selectors</code>はマッチさせたい1つ以上の<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">セレクタ</a>を表します。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>次の例では、type属性を持たないか､<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;"><code>text/css</code>を<code>type</code>属性として持つ、ドキュメントボディーの中で</span>最初の<code style="font-style: normal;">style</code>要素が返却されます。</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>マッチする要素が無い場合は<code>nullを返します</code>。その他の場合は､最初にマッチした要素を返します。</p> + +<p>指定されたセレクタが不正である場合、例外「<code>SYNTAX_ERR</code>」がスローされます。</p> + +<p>Throws a <code>SYNTAX_ERR</code> exception if the specified group of selectors is invalid.</p> + +<p><span style="font-family: Courier New;"><span>querySelector()</span></span>はWebApps API仕様で定義されました。</p> + +<p><code>querySelector</code>に渡す文字列はCSSの文法に則る必要があります。{{domxref("document.querySelector")}}で実例を見て下さい。</p> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Support</th> + <th>Notes</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>8</td> + <td>CSS 2.1 selectors only (IE8)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td>10</td> + <td> </td> + </tr> + <tr> + <td>Chrome</td> + <td>1</td> + <td> </td> + </tr> + <tr> + <td>Safari (webkit)</td> + <td>3.2 (525.3)</td> + <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li> + <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li> + <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a dir="ltr" href="/ja/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/ja/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/ja/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/ja/docs/Code_snippets/QuerySelector">querySelectorのコードスニペット</a></li> +</ul> diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..2bc51c0803 --- /dev/null +++ b/files/ja/web/api/element/queryselectorall/index.html @@ -0,0 +1,205 @@ +--- +title: element.querySelectorAll +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Element")}} の <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 notranslate"><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="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>文字列でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> +</dl> + +<div class="note"> +<p><strong>注:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。</p> +</div> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{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="Example" name="Example">例</h2> + +<h3 id="dataset_selector_attribute_selectors" name="dataset_selector_attribute_selectors">dataset セレクターと属性セレクター</h3> + +<pre class="brush: html notranslate"><section class="box" id="sect1"> + <div class="funnel-chart-percent1">10.900%</div> + <div class="funnel-chart-percent2">3700.00%</div> + <div class="funnel-chart-percent3">0.00%</div> +</section> +</pre> + +<pre class="brush: js notranslate">// dataset セレクター +const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)]; + +// 属性セレクター +// const refs = [...document.querySelectorAll(`[class*="funnel-chart-percent"]`)]; +// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)]; +// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)]; +// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)]; +</pre> + +<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストを入手する</h3> + +<p>次の例では、<code>myBox</code> 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。</p> + +<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("p"); +</pre> + +<p>次の例では、<code>mybox</code> 内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> + +<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("div.note, div.alert"); +</pre> + +<p>次の例では、<code>test</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>highlighted</code> のクラスを持つ {{domxref("div")}} である <code>p</code> 要素のリストを取得します。</p> + +<pre class="brush: js notranslate">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> 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。</p> + +<pre class="brush: js notranslate">var matches = domument.querySelectorAll("iframe[data-src]"); +</pre> + +<p>次の例では、属性セレクターを使って、「ID が <code>userlist</code> である要素内の、<code>data-active</code> 属性を持ち、その値が <code>1</code> である要素群」のリストを返します。</p> + +<pre class="brush: js notranslate">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 notranslate">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<div class="note"> +<p><strong>注: </strong>NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。</p> +</div> + +<h2 id="User_notes" name="User_notes">特殊な例</h2> + +<p><code>querySelectorAll()</code> は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> + +<pre class="brush: html notranslate"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 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 notranslate">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','#queryselectorall','querySelectorAll')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> +<div class="hidden">このページの互換表は構造化データによって作成されました。このデータに貢献したい方は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックして、プルリクエストを送信してください。</div> + +<p>{{Compat("api.Element.querySelectorAll")}}</p> +</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>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()")}}</li> + <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</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" title="Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> +</ul> diff --git a/files/ja/web/api/element/releasepointercapture/index.html b/files/ja/web/api/element/releasepointercapture/index.html new file mode 100644 index 0000000000..483e1cb927 --- /dev/null +++ b/files/ja/web/api/element/releasepointercapture/index.html @@ -0,0 +1,130 @@ +--- +title: Element.releasePointerCapture() +slug: Web/API/Element/releasePointerCapture +tags: + - API + - DOM + - Element + - Method + - PointerEvent + - Reference +translation_of: Web/API/Element/releasePointerCapture +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} インターフェイスの <strong><code>releasePointerCapture()</code></strong> メソッドは、特定の（{{domxref("PointerEvent")}}）<em>ポインタ</em>に対して以前に設定された<em>ポインタキャプチャ</em>を解放（停止）します。</span></p> + +<p><em>ポインタキャプチャ</em>の説明と特定の要素に設定する方法については、{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}} メソッドを参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>targetElement</em>.releasePointerCapture(<em>pointerId</em>); +</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>pointerId</code></dt> + <dd>{{domxref("PointerEvent")}} オブジェクトの {{domxref("PointerEvent.pointerId", "pointerId")}}。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>このメソッドは <code>undefined</code> を返します。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">例外</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidPointerId</code></td> + <td>pointerId は、どのアクティブポインタとも一致しません。</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、{{HtmlElement("div")}} を押下するとポインタキャプチャが設定されます。 これにより、ポインタをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html"><div id="slider">SLIDE ME</div></pre> + +<h3 id="CSS" name="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 140px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background: #fbe; +}</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js">function beginSliding(e) { + slider.onpointermove = slide; + slider.setPointerCapture(e.pointerId); +} + +function stopSliding(e) { + slider.onpointermove = null; + slider.releasePointerCapture(e.pointerId); +} + +function slide(e) { + slider.style.transform = `translate(${e.clientX - 70}px)`; +} + +const slider = document.getElementById('slider'); + +slider.onpointerdown = beginSliding; +slider.onpointerup = stopSliding; +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#idl-def-element-releasepointercapture-pointerid', 'releasePointerCapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#idl-def-element-releasepointercapture-pointerid', 'releasePointerCapture')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.Element.releasePointerCapture")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}</li> + <li>{{ domxref("Pointer_events","Pointer Events") }}</li> +</ul> diff --git a/files/ja/web/api/element/removeattribute/index.html b/files/ja/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..750ca4360f --- /dev/null +++ b/files/ja/web/api/element/removeattribute/index.html @@ -0,0 +1,71 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Element + - Method + - Reference + - remove + - removeAttribute + - メソッド +translation_of: Web/API/Element/removeAttribute +--- +<div>{{ APIRef("DOM") }}</div> + +<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>removeAttribute()</code></strong> メソッドは、指定された名前の属性を要素から削除します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code><var>attrName</var></code></dt> + <dd>{{domxref("DOMString")}} で、要素から削除する属性の名前を指定します。指定された属性が存在しない場合、 <code>removeAttribute()</code> はエラーを発生させずに戻ります。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>undefined</code> です。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>属性の値を直接、または {{domxref("Element.setAttribute", "setAttribute()")}} を使用して <code>null</code> に設定するのではなく、 <code>removeAttribute()</code> を使用してください。多くの属性は <code>null</code> に設定しても、期待通りの動作をしません。</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// Given: <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// Now: <div id="div1" width="200px"> +</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-element-removeattribute', 'Element" removeAttribute')}}</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.Element.removeAttribute")}}</p> diff --git a/files/ja/web/api/element/removeattributenode/index.html b/files/ja/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..b85d06ff16 --- /dev/null +++ b/files/ja/web/api/element/removeattributenode/index.html @@ -0,0 +1,45 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/removeAttributeNode +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Summary" name="Summary">Summary</h3> + +<p><code>removeAttributeNode</code> removes the specified attribute from the current element.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>) +</pre> + +<ul> + <li><code>attributeNode</code> is the <code>Attr</code> node that needs to be removed.</li> + <li><code>removedAttr</code> is the removed <code>Attr</code> node.</li> +</ul> + +<h3 id="Example" name="Example">Example</h3> + +<pre>// <div id="top" align="center" /> +var d = document.getElementById("top"); +var d_align = d.getAttributeNode("align"); +d.removeAttributeNode(d_align); +// align has a default value, center, +// so the removed attribute is immediately +// replaced: <div id="top" align="center" /> +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>If the removed Attribute has a default value it is immediately replaced. The replacing attribute has the same namespace URI and local name, as well as the original prefix, when applicable.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core: removeAttributeNode</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttributeNode">DOM Level 1 Core</a>)</p> diff --git a/files/ja/web/api/element/removeattributens/index.html b/files/ja/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..57d7763880 --- /dev/null +++ b/files/ja/web/api/element/removeattributens/index.html @@ -0,0 +1,41 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +translation_of: Web/API/Element/removeAttributeNS +--- +<p><span class="comment"><breadcrumbs></breadcrumbs></span>{{ ApiRef("DOM") }}<span class="comment">== Summary ==</span></p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><span class="comment"><code>removeAttributeNS</code> removes the specified attribute from an element.</span> <code>removeAttributeNS</code> 要素から指定の属性を取り除きます。</p> + +<p><span class="comment">{{ fx_minversion_inline("3") }} In Firefox 3 and later, this method resets DOM values to their defaults.</span> {{ Fx_minversion_inline("3") }} Firefox 3以降ではこのメソッドはDOMの値をデフォルト値にリセットします。<span class="comment">== Syntax ==</span></p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>); +</pre> + +<p><span class="comment">* <code>namespace</code> is a string that contains the namespace of the attribute. * <code>attrName</code> is a string that names the attribute to be removed from the current node.</span></p> + +<ul> + <li><code>namespace</code> は属性の名前空間を含んでいる文字列です。</li> + <li><code>attrName</code> は現在のノードから取り除く属性の名前を表す文字列です。<span class="comment">== Example ==</span></li> +</ul> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre>// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" +// special:specialAlign="utterleft" width="200px" /> +d = document.getElementById("div1"); +d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); +// now: <div id="div1" width="200px" /> +</pre> + +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> + +<p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS</a></p> diff --git a/files/ja/web/api/element/requestfullscreen/index.html b/files/ja/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..17054560e1 --- /dev/null +++ b/files/ja/web/api/element/requestfullscreen/index.html @@ -0,0 +1,169 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +tags: + - API + - DOM + - Element + - Fullscreen API + - requestFullscreen + - メソッド + - リファレンス + - 全画面 API +translation_of: Web/API/Element/requestFullScreen +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p><code><strong>Element.requestFullscreen()</strong></code> メソッドは、要素を全画面表示するための非同期的な要求を発行します。</p> + +<p>要素が全画面モードに移行することは保証されていません。全画面モードに移行する許可が与えられている場合は、返される {{jsxref("Promise")}} が解決され、文書が全画面モードになったことを知ることができる {{event("fullscreenchange")}} イベントを受け取るようになります。権限が拒否された場合は、代わりに {{event('fullscreenerror')}} イベントを受け取ります。</p> + +<p>このメソッドはユーザーの操作又は機器の方向の変更によって呼び出す必要があり、そうでなければ失敗します。</p> + +<div class="note"> +<p>全画面で表示することができる要素は、 HTML 名前空間にあり (つまり、標準の HTML の要素であり)、加えて {{HTMLElement("svg")}} 要素や {{HTMLElement("math")}} 要素、文書の最上位にある要素、又は {{htmlattrxref("allowfullscreen", "iframe")}} 属性を持つ {{HTMLElement('iframe')}} だけです。すなわち、 {{HTMLElement('frame')}} や {{HTMLElement('object')}} の内部にある要素は全画面で表示できません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>Promise </em>= <em>Element</em>.requestFullscreen(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>全画面への移行が完了した場合は、 <code>undefined</code> の値で解決した {{jsxref("Promise")}}。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<p>全画面のリクエストが失敗した場合は、 Promise が例外で拒否されるかもしれません。発生しうる例外は以下の通りです。</p> + +<ul> + <li>要素の文書が、全画面への移行ができる状態にない (つまり、 <code>defaultView</code> がない)。</li> + <li>要素が HTML, SVG, Math の要素ではない</li> + <li>全画面が許可されていない (例えば、ユーザーの操作ではない) 又は対応していない。</li> +</ul> + +<dl> + <dt><code>{{jsxref("TypeError")}}</code></dt> + <dd>以下の状況の一つが発生する可能性あります。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p><code>requestFullscreen()</code> を呼び出す前に、 {{event("fullscreenchange")}} 及び {{event("fullscreenerror")}} イベントのハンドラーを設定してください。そうすれば、いつ全画面モードに切り替えることに成功したか (又は権限がなくて拒否されたか) を知ることができます。</p> + +<p>tbd</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-element-requestfullscreen", "Element.requestFullscreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>初回定義</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>機能</th> + <th>Chrome</th> + <th>Firefox</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本対応</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("9.0")}} <code>mozRequestFullScreen</code> として対応<sup>[2]</sup><br> + {{CompatGeckoDesktop("47.0")}} (full-screen-api.unprefix.enabled で制御)</td> + <td>11{{property_prefix("ms")}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Promise の返却</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本対応</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}} <code>mozRequestFullScreen</code> として対応 <sup>[2]</sup><br> + {{CompatGeckoMobile("47.0")}} (full-screen-api.unprefix.enabled で制御)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Promise の返却</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>webkitRequestFullscreen</code> としても実装されています。</p> + +<p>[2] <code>mozRequestFullScreen</code> として実装されています (Screen の S は大文字です)。 Firefox 44 より前のバージョンでは、誤って {{HTMLElement('frame')}} や {{HTMLElement('object')}} の内部にある要素の要求も受け入れて、許可されれば全画面表示していました。これは Firefox 44 以降で修正済みです。文書の最上位にある要素、または {{htmlattrxref("allowfullscreen", "iframe")}} 属性を持つ {{HTMLElement('iframe')}} だけが全画面モードで表示できます。</p> + +<p>[3] <a href="https://msdn.microsoft.com/library/dn254939%28v=vs.85%29.aspx">MSDN の文書</a>をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a></li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/ja/web/api/element/scroll_event/index.html b/files/ja/web/api/element/scroll_event/index.html new file mode 100644 index 0000000000..15f6c66cf4 --- /dev/null +++ b/files/ja/web/api/element/scroll_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Element: scroll イベント' +slug: Web/API/Element/scroll_event +tags: + - API + - Element + - Event + - Reference + - Scroll +translation_of: Web/API/Element/scroll_event +--- +<p>{{APIRef}}</p> + +<p><strong><code>scroll</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("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</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>なお、ただし、 input イベントやアニメーションフレームがおよそ同じ頻度で発行されるため、以下の最適化は必要ないことがあります。この例は <code>requestAnimationFrame</code> の <code>scroll</code> イベントを最適化します。</p> + +<pre class="brush: js notranslate">// 参照: http://www.html5rocks.com/en/tutorials/speed/animations/ + +let last_known_scroll_position = 0; +let ticking = false; + +function doSomething(scroll_pos) { + // スクロール位置で何かをする +} + +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> + +<div class="blockIndicator note"> +<p><strong>注</strong>: それ以外例が {{domxref("Document/resize_event", "resize")}} イベントページにあります。</p> +</div> + +<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('CSSOM View', '#scrolling-events')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.scroll_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>Document: {{domxref("Document/scroll_event", "scroll")}} イベント</li> +</ul> diff --git a/files/ja/web/api/element/scrollby/index.html b/files/ja/web/api/element/scrollby/index.html new file mode 100644 index 0000000000..c78fe8f1e1 --- /dev/null +++ b/files/ja/web/api/element/scrollby/index.html @@ -0,0 +1,74 @@ +--- +title: Element.scrollBy() +slug: Web/API/Element/scrollBy +tags: + - API + - CSSOM View + - Element + - Method + - Reference + - scrollBy + - メソッド +translation_of: Web/API/Element/scrollBy +--- +<p>{{APIRef}}</p> + +<p><strong><code>scrollBy()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、指定された量だけ要素をスクロールします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">element.scrollBy(<var>x-coord</var>, <var>y-coord</var>); +element.scrollBy(<var>options</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>x-coord</var></code> は、スクロールしたい水平ピクセル数です。</li> + <li><code><var>y-coord</var></code> は、スクロールしたい垂直ピクセル数です。</li> +</ul> + +<p>- または -</p> + +<ul> + <li><code><var>options</var></code> は {{domxref("ScrollToOptions")}} 辞書です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">// 要素をスクロール +element.scrollBy(300, 300); +</pre> + +<p><code>options</code> を使用する場合:</p> + +<pre class="brush: js notranslate">element.scrollBy({ + top: 100, + left: 100, + behavior: 'smooth' +});</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('CSSOM View', '#dom-element-scrollby-options-options', 'element.scrollBy()') }}</td> + <td>{{ Spec2('CSSOM View') }}</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.Element.scrollBy")}}</p> diff --git a/files/ja/web/api/element/scrollheight/index.html b/files/ja/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..ca3fa4e596 --- /dev/null +++ b/files/ja/web/api/element/scrollheight/index.html @@ -0,0 +1,175 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API + - CSSOM View + - NeedsDHTMLRemovalInExample + - Property + - Reference +translation_of: Web/API/Element/scrollHeight +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の幅の寸法です。</p> + +<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の幅を含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p> + +<div class="note"> +<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p> + +<h2 id="Example" name="Example">例</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> + +<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2> + +<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3> + +<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p> + +<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight +</pre> + +<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p> + +<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible' +window.getComputedStyle(element).overflowY !== 'hidden' +</pre> + +<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2> + +<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form name="registration"> + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. +Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus +neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at +velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus +ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. +Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, +mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta +at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent +dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas +luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem +sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue +turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. +Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in +ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse +platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat +consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et +a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam +pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum +ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit +interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer +laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, +nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. + </textarea> + </p> + <p> + <input type="checkbox" id="agree" name="accept" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} + +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; +} + +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +}</pre> + +<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</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("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td> + <td>{{Spec2("CSSOM View")}}</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.Element.scrollHeight")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("HTMLElement.offsetHeight")}}</li> + <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> +</ul> diff --git a/files/ja/web/api/element/scrollintoview/index.html b/files/ja/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..f13c5a2bc3 --- /dev/null +++ b/files/ja/web/api/element/scrollintoview/index.html @@ -0,0 +1,99 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - API + - CSSOM Views + - DOM + - Element + - Method + - Reference + - View + - scrollIntoView + - scrolling + - スクロール + - メソッド +translation_of: Web/API/Element/scrollIntoView +--- +<div>{{APIRef("DOM")}}</div> + +<div><span class="seoSummary">{{domxref("Element")}} インターフェイスの <code><strong>scrollIntoView()</strong></code> メソッドは、 <code>scrollIntoView()</code> が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。</span></div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">element.scrollIntoView(); +element.scrollIntoView(<var>alignToTop</var>); // 論理型の引数 +element.scrollIntoView(<var>scrollIntoViewOptions</var>); // オブジェクト型の引数 +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>alignToTop</var></code> {{optional_inline}}</dt> + <dd>{{jsxref("Boolean")}} 値です。 + <ul> + <li><code>true</code> の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code> に相当します。これが既定値です。</li> + <li><code>false</code> の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code> に相当します。</li> + </ul> + </dd> + <dt><code><var>scrollIntoViewOptions</var></code> {{optional_inline}} {{experimental_inline}}</dt> + <dd>以下のプロパティを持つオブジェクトです。</dd> + <dd> + <dl> + <dt><code>behavior</code> {{optional_inline}}</dt> + <dd>推移のアニメーションを定義します。<br> + <code>auto</code> または <code>smooth</code> のどちらかです。既定値は <code>auto</code> です。</dd> + <dt><code>block</code> {{optional_inline}}</dt> + <dd>垂直方向の配置を定義します。<br> + <code>start</code>, <code>center</code>, <code>end</code>, <code>nearest</code> の何れかです。既定値は <code>start</code> です。</dd> + <dt><code>inline</code> {{optional_inline}}</dt> + <dd>水平方法の配置を定義します。<br> + <code>start</code>, <code>center</code>, <code>end</code>, <code>nearest</code> の何れかです。既定値は <code>nearest</code> です。</dd> + </dl> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。</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("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</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.Element.scrollIntoView")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.scrollIntoViewIfNeeded()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/ja/web/api/element/scrollleft/index.html b/files/ja/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..7ca10f3c27 --- /dev/null +++ b/files/ja/web/api/element/scrollleft/index.html @@ -0,0 +1,113 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - CSSOM View + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/scrollLeft +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p> + +<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p> + +<div class="blockIndicator warning"> +<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3> + +<pre class="syntaxbox">// スクロールしたピクセル数を取得 +var <em>sLeft</em> = <em>element</em>.scrollLeft; +</pre> + +<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p> + +<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3> + +<pre class="syntaxbox">// スクロールしたピクセル数を設定 +<em>element</em>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p> + +<ul> + <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li> + <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li> + <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"> + <div id="content">ボタンをクリックすると右にスライドします。</div> +</div> + +<button id="slide" type="button">右へスライド</button></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#container { + width: 100px; + height: 100px; + border: 1px solid #ccc; + overflow-x: scroll; +} + +#content { + width: 250px; + background-color: #ccc; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const button = document.getElementById('slide'); + +button.onclick = function () { + document.getElementById('container').scrollLeft += 20; +};</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>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</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.Element.scrollLeft")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> + <li>{{domxref("Element.scrollTop")}}</li> + <li>{{domxref("Element.scrollTo()")}}</li> +</ul> diff --git a/files/ja/web/api/element/scrollto/index.html b/files/ja/web/api/element/scrollto/index.html new file mode 100644 index 0000000000..c80172bb8b --- /dev/null +++ b/files/ja/web/api/element/scrollto/index.html @@ -0,0 +1,79 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +tags: + - API + - Element + - Method + - Reference + - scrollTo + - メソッド +translation_of: Web/API/Element/scrollTo +--- +<div>{{APIRef}}</div> + +<p><code><strong>scrollTo()</strong></code> は {{domxref("Element")}} インターフェイスのメソッドで、指定された要素内を指定された座標までスクロールします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>) +element.scrollTo(<em>options</em>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>x-coord</var></code> は、要素の水平軸上で左上に表示したいピクセルです。</li> + <li><code><var>y-coord</var></code> は、要素の垂直軸状で左上に表示したいピクセルです。</li> +</ul> + +<p>- または -</p> + +<ul> + <li><code>options</code> は {{domxref("ScrollToOptions")}} 辞書です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">element.scrollTo(0, 1000); +</pre> + +<p><code>options</code> を使用する場合:</p> + +<pre class="brush: js">element.scrollTo({ + top: 100, + left: 100, + behavior: 'smooth' +});</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('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td> + <td>{{ Spec2('CSSOM View') }}</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.Element.scrollTo")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li> + <li>{{domxref("Window.scrollTo()")}}</li> +</ul> diff --git a/files/ja/web/api/element/scrolltop/index.html b/files/ja/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..12fa3678bf --- /dev/null +++ b/files/ja/web/api/element/scrolltop/index.html @@ -0,0 +1,94 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - CSSOM View + - NeedsArtUpdate + - NeedsMarkupWork + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/scrollTop +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>Element.scrollTop</strong></code> プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。</span></p> + +<p>要素の <code>scrollTop</code> の値は、要素の上から最も上の<em>表示されている</em>コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 <code>scrollTop</code> の値は <code>0</code> になります。</p> + +<p><code>scrollTop</code> がルート要素 (<code><html></code> 要素) に対して使用されると、ウィンドウの <code>scrollY</code> が返されます。 <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">これは <code>scrollTop</code> の特例です</a>。</p> + +<div class="warning"> +<p>画面の拡大縮小を使用するシステムでは、 <code>scrollTop</code> が小数になることがあります。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">// スクロールしたピクセル数を取得 +var <var>intElemScrollTop</var> = someElement.scrollTop; +</pre> + +<p>このコードを実行した後、 <code><var>intElemScrollTop</var></code> はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。</p> + +<pre class="brush: js">// スクロールするピクセル数を設定 +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><code>scrollTop</code> は任意の整数値で設定することができます。しかし、</p> + +<ul> + <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "<strong>non-scrollable</strong>" のプロパティがある場合)、 <code>scrollTop</code> は <code>0</code> に設定されます。</li> + <li><code>scrollTop</code> は負の数には対応していません。代わりに、 <code>0</code> に戻ります。</li> + <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollTop</code> は最大値に設定されます。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> +<em><strong>If you can see this, scrollTop = 0</strong></em> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> +<strong><em>If you can see this, scrollTop is > 0</em></strong> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +<strong><em>If you can see this, scrollTop is maxed-out</em></strong> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> + <td>{{Spec2("CSSOM View")}}</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.Element.scrollTop")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> + <li>{{domxref("Element.scrollLeft")}}</li> + <li>{{domxref("Element.scrollTo()")}}</li> +</ul> diff --git a/files/ja/web/api/element/scrollwidth/index.html b/files/ja/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..eda6c0deef --- /dev/null +++ b/files/ja/web/api/element/scrollwidth/index.html @@ -0,0 +1,127 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - API + - CSSOM View + - Property + - Reference + - プロパティ +translation_of: Web/API/Element/scrollWidth +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.scrollWidth</code></strong> は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。</p> + +<p><code>scrollWidth</code> の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 <code>scrollWidth</code> は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。</p> + +<div class="note"> +<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre> + +<p><code><var>xScrollWidth</var></code> はピクセル単位の <code><var>element</var></code> のコンテンツの幅です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>Example</title> + <style> + div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #aDiv { + width: 100px; + } + + button { + margin-bottom: 2em; + } + </style> +</head> + +<body> + <div id="aDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="aButton"> + Check for overflow + </button> + + <div id="anotherDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="anotherButton"> + Check for overflow + </button> +</body> +<script> + var buttonOne = document.getElementById('aButton'), + buttonTwo = document.getElementById('anotherButton'), + divOne = document.getElementById('aDiv'), + divTwo = document.getElementById('anotherDiv'); + + //check to determine if an overflow is happening + function isOverflowing(element) { + return (element.scrollWidth > element.offsetWidth); + } + + function alertOverflow(element) { + if (isOverflowing(element)) { + alert('Contents are overflowing the container.'); + } else { + alert('No overflows!'); + } + } + + buttonOne.addEventListener('click', function() { + alertOverflow(divOne); + }); + + buttonTwo.addEventListener('click', function() { + alertOverflow(divTwo); + }); +</script> +</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("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td> + <td>{{Spec2("CSSOM View")}}</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.Element.scrollWidth")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li> +</ul> diff --git a/files/ja/web/api/element/select_event/index.html b/files/ja/web/api/element/select_event/index.html new file mode 100644 index 0000000000..f2c4c8971a --- /dev/null +++ b/files/ja/web/api/element/select_event/index.html @@ -0,0 +1,84 @@ +--- +title: 'Element: select イベント' +slug: Web/API/Element/select_event +tags: + - Element + - Event + - Event Handler + - NeedsCompatTable + - Reference + - UIEvent + - イベント +translation_of: Web/API/Element/select_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>select</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("UIEvent")}}、それ以外ならば {{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onselect", "onselect")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントはすべての言語のすべての要素で利用できる訳ではありません。例えば、 HTML では、 <code>select</code> イベントはフォームの <code>{{HtmlElement('input/text', '<input type="text">')}}</code> および {{HtmlElement("textarea")}} 要素からのみ発生します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Selection_logger" name="Selection_logger">選択範囲をログ出力</h3> + +<pre class="brush: html"><input value="この要素のテキストの一部を選択してみてください。"> +<p id="log"></p></pre> + +<pre class="brush: js">function logSelection(event) { + const log = document.getElementById('log'); + const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd); + log.textContent = `You selected: ${selection}`; +} + +const input = document.querySelector('input'); +input.addEventListener('select', logSelection);</pre> + +<p>{{EmbedLiveSample("Selection_logger")}}</p> + +<h3 id="onselect_equivalent" name="onselect_equivalent">onselect による同等の処理</h3> + +<p>イベントハンドラーを {{domxref("GlobalEventHandlers.onselect", "onselect")}} プロパティで設定することもできます。</p> + +<pre class="brush: js">input.onselect = logSelection;</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-select', 'select')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.select_event")}}</p> diff --git a/files/ja/web/api/element/setattribute/index.html b/files/ja/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..ff91ef1024 --- /dev/null +++ b/files/ja/web/api/element/setattribute/index.html @@ -0,0 +1,51 @@ +--- +title: element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - DOM + - DOM Element Methods + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/setAttribute +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>指定の要素に新しい属性を追加します。または指定の要素に存在する属性の値を変更します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><i>element</i>.setAttribute(<i>name</i>,<i>value</i>); +</pre> +<ul> + <li><code>name</code> は属性の名前を文字列で表現したものです。</li> + <li><code>value</code> は属性の希望する新しい値です。</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">var d = document.getElementById("d1"); + +d.setAttribute("align", "center");</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>指定の属性が既に存在しているときはその属性の値はこの関数に渡された値に変更されます。もし存在しなければ属性は新しく作成されます。</p> +<p><code><a href="/ja/docs/DOM/element.getAttribute">getAttribute()</a></code> は存在しない属性に対し <code>null</code> を返しますが、属性を取り除く為には <code> + <i> + elt</i> + .setAttribute( + <i> + attr</i> + , null)</code> を使うのではなく、<code><a href="/ja/docs/DOM/element.removeAttribute">removeAttribute()</a></code> を使用するべきです。</p> +<p><code>setAttribute()</code> を使ってある属性、XUL や HTML の特別な値、および HTML の選択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となります。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例として、 <code> + <i> + elt</i> + .setAttribute('value', + <i> + val</i> + )</code> の代わりに <code> + <i> + elt</i> + .value</code> を使用します。</p> +<div> + {{DOMAttributeMethods}}</div> +<h2 id="Specification" name="Specification">仕様</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> diff --git a/files/ja/web/api/element/setattributenode/index.html b/files/ja/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..d29967758d --- /dev/null +++ b/files/ja/web/api/element/setattributenode/index.html @@ -0,0 +1,48 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/setAttributeNode +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Summary" name="Summary">Summary</h3> + +<p><code>setAttributeNode()</code> adds a new <code>Attr</code> node to the specified element.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><em>replacedAttr</em> =<em>element</em>.setAttributeNode(<em>attribute</em>) +</pre> + +<ul> + <li><code>attribute</code> is the <code>Attr</code> node to set on the element.</li> + <li><code>replacedAttr</code> is the replaced attribute node, if any, returned by this function.</li> +</ul> + +<h3 id="Example" name="Example">Example</h3> + +<pre>// <div id="one" align="left">one</div> +// <div id="two">two</div> +var d1 = document.getElementById("one"); +var d2 = document.getElementById("two"); +var a = d1.getAttributeNode("align"); +d2.setAttributeNode(a); +alert(d2.attributes[1].value) +// returns: `left' +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>If the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.</p> + +<p>This method is seldom used, with <code><a href="ja/DOM/element.setAttribute">setAttribute()</a></code> usually being used to change element's attributes.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specification" name="Specification">Specification</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core: setAttributeNode</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</p> diff --git a/files/ja/web/api/element/setattributenodens/index.html b/files/ja/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..11aea740fd --- /dev/null +++ b/files/ja/web/api/element/setattributenodens/index.html @@ -0,0 +1,50 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/setAttributeNodeNS +--- +<p><span class="comment"><breadcrumbs></breadcrumbs></span>{{ ApiRef("DOM") }}<span class="comment">== Summary ==</span></p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><span class="comment"><code>setAttributeNodeNS</code> adds a new attribute node with the specified namespace and name.</span> <code>setAttributeNodeNS</code> は指定の名前空間と名前で新しい属性ノードを追加します。<span class="comment">== Syntax ==</span></p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>) +</pre> + +<p><span class="comment">* <code>replacedAttr</code> is the replaced attribute node, if any, returned by this function. * <code>attributeNode</code> is an <code>Attr</code> node.</span></p> + +<ul> + <li><code>replacedAttr</code> は、この関数によって返されるのであれば、置き換えられた属性ノードです。</li> + <li><code>attributeNode</code> は <code>Attr</code> ノードです.</li> +</ul> + +<h3 id="Example" name="Example">Example</h3> + +<pre>// <div id="one" special-align="utterleft">one</div> +// <div id="two">two</div> + +var myns = "http://www.mozilla.org/ns/specialspace"; +var d1 = document.getElementById("one"); +var d2 = document.getElementById("two"); +var a = d1.getAttributeNodeNS(myns, "special-align"); +d2.setAttributeNodeNS(a); + +alert(d2.attributes[1].value) // returns: `utterleft' +</pre> + +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> + +<p><span class="comment">If the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned.</span> 指定の属性が既に存在しているときは、その属性新しいものに置き換えられ、置き換えられたものが戻り値として返されます。</p> + +<p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS</a></p> diff --git a/files/ja/web/api/element/setattributens/index.html b/files/ja/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..2a056c29b9 --- /dev/null +++ b/files/ja/web/api/element/setattributens/index.html @@ -0,0 +1,39 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - DOM + - Gecko + - 翻訳中 +translation_of: Web/API/Element/setAttributeNS +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><code>setAttributeNS</code> は指定の名前空間と名前で新しい属性を追加したり、属性の値を変更します。</p> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>element</em>.setAttributeNS(<em>namespace</em>,<em>name</em>,<em>value</em>) +</pre> + +<ul> + <li><code>namespace</code> は属性の名前空間を指定する文字列です。</li> + <li><code>name</code> はセットしたい属性を特定する文字列です。</li> + <li><code>value</code> は新しい属性の希望する文字列値です。</li> +</ul> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre class="eval">var d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> diff --git a/files/ja/web/api/element/setcapture/index.html b/files/ja/web/api/element/setcapture/index.html new file mode 100644 index 0000000000..8a195b679a --- /dev/null +++ b/files/ja/web/api/element/setcapture/index.html @@ -0,0 +1,94 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +translation_of: Web/API/Element/setCapture +--- +<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p> + +<p>mousedownイベントの処理中にこのメソッドを呼び出すと、マウスボタンが離されるか、{{ domxref("document.releaseCapture()") }}が呼び出されるまで、すべてのマウスイベントをこの要素にリターゲットします。</p> + +<div class="warning"><strong>Warning:</strong> このインターフェースにはブラウザ間のサポートはほとんどありませんでした。代わりに、Pointer Events APIから{{domxref("element.setPointerCapture")}}を探していました。</div> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox">element.setCapture(<em>retargetToElement</em>); +</pre> + +<dl> + <dt><code>retargetToElement</code></dt> + <dd><code>true</code>の場合、すべてのイベントはこの要素を直接対象とします。<code>false</code>の場合、イベントはこの要素の子孫でも発生する可能性があります。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、現在のマウスの座標が、要素をクリックして押した後にマウスを移動しながら描画されます。</p> + +<pre class="brush: html"><html> +<head> + <title>Mouse Capture Example</title> + <style type="text/css"> + #myButton { + border: solid black 1px; + color: black; + padding: 2px; + box-shadow: black 2px 2px; + } + </style> + + <script type="text/javascript"> + function init() { + var btn = document.getElementById("myButton"); + if (btn.setCapture) { + btn.addEventListener("mousedown", mouseDown, false); + btn.addEventListener("mouseup", mouseUp, false); + } else { + document.getElementById("output").innerHTML + = "Sorry, there appears to be no setCapture support on this browser"; + } + } + + function mouseDown(e) { + e.target.setCapture(); + e.target.addEventListener("mousemove", mouseMoved, false); + } + + function mouseUp(e) { + e.target.removeEventListener("mousemove", mouseMoved, false); + } + + function mouseMoved(e) { + var output = document.getElementById("output"); + output.innerHTML = "Position: " + e.clientX + ", " + e.clientY; + } + </script> +</head> +<body onload="init()"> + <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p> + <p><a id="myButton" href="#">Test Me</a></p> + <div id="output">No events yet</div> +</body> +</html> +</pre> + +<p><a href="/samples/domref/mousecapture.html">查看在线演示</a></p> + +<h2 id="注意">注意</h2> + +<p><span id="result_box" lang="ja"><span>要素は、他の要素のレイアウトに応じて、上または下に完全にスクロールすることはできません。</span></span></p> + +<h2 id="指定">指定</h2> + +<p>Internet Explorerの実装に基づいています。</p> + +<h2 id="ブラウザの互換性">ブラウザの互換性</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.Element.setCapture")}}</p> + +<h2 id="関連資料">関連資料</h2> + +<ul> + <li>{{ domxref("document.releaseCapture()") }}</li> + <li>{{domxref("element.setPointerCapture")}}</li> +</ul> diff --git a/files/ja/web/api/element/setpointercapture/index.html b/files/ja/web/api/element/setpointercapture/index.html new file mode 100644 index 0000000000..306d00702e --- /dev/null +++ b/files/ja/web/api/element/setpointercapture/index.html @@ -0,0 +1,137 @@ +--- +title: Element.setPointerCapture() +slug: Web/API/Element/setPointerCapture +tags: + - API + - DOM + - Element + - Method + - PointerEvent + - Reference + - 要素 +translation_of: Web/API/Element/setPointerCapture +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>setPointerCapture()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、特定の要素をこれ以降のポインターイベントの<em>キャプチャターゲット</em>として指定するために使用します。 ({{domxref("Element.releasePointerCapture()")}} を介して) キャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。</p> + +<div class="note">ポインターキャプチャを設定している場合、 {{domxref("HTMLElement/pointerover_event", "pointerover")}}, {{domxref("HTMLElement/pointerout_event", "pointerout")}}, {{domxref("HTMLElement/pointerenter_event", "pointerenter")}}, {{domxref("HTMLElement/pointerleave_event", "pointerleave")}} のイベントはキャプチャターゲットの境界を横断したときにのみ生成されます。これは他のすべての要素でこれらのイベントを抑制する効果があります。</div> + +<h3 id="Overview_of_pointer_capture" name="Overview_of_pointer_capture">ポインターキャプチャの概要</h3> + +<p><em>ポインターキャプチャ</em>では、ポインターの位置にある通常 (または<em>ヒットテスト</em>) のターゲットではなく、特定の<em>ポインターイベント</em> ({{domxref("PointerEvent")}}) のイベントを特定の要素にターゲットしなおすことができます。 これは、ポインターデバイスの接触が要素から外れた場合でも、 (スクロールやパンなどで) 要素がポインターイベントを受信し続けるようにするために使用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>targetElement</em>.setPointerCapture(<em>pointerId</em>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>pointerId</var></code></dt> + <dd>{{domxref("PointerEvent")}} オブジェクトの {{domxref("PointerEvent.pointerId", "pointerId")}}。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>このメソッドは <code>undefined</code> を返します。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">例外</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidPointerId</code></td> + <td>pointerId が、どのアクティブポインターとも一致しません。</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、 {{HtmlElement("div")}} を押下するとポインターキャプチャが設定されます。これにより、ポインターをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html"><div id="slider">SLIDE ME</div></pre> + +<h3 id="CSS" name="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 140px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background: #fbe; +}</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js">function beginSliding(e) { + slider.onpointermove = slide; + slider.setPointerCapture(e.pointerId); +} + +function stopSliding(e) { + slider.onpointermove = null; + slider.releasePointerCapture(e.pointerId); +} + +function slide(e) { + slider.style.transform = `translate(${e.clientX - 70}px)`; +} + +const slider = document.getElementById('slider'); + +slider.onpointerdown = beginSliding; +slider.onpointerup = stopSliding; +</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>{{SpecName('Pointer Events 2','#idl-def-element-setpointercapture-pointerid', 'setPointerCapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td> + <td>{{Spec2('Pointer 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.Element.setPointerCapture")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.releasePointerCapture")}}</li> + <li>{{domxref("Pointer_events","ポインターイベント")}}</li> +</ul> diff --git a/files/ja/web/api/element/shadowroot/index.html b/files/ja/web/api/element/shadowroot/index.html new file mode 100644 index 0000000000..148410966c --- /dev/null +++ b/files/ja/web/api/element/shadowroot/index.html @@ -0,0 +1,86 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +tags: + - プロパティ + - リファレンス + - 要素 + - 試験的 +translation_of: Web/API/Element/shadowRoot +--- +<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}{{draft}}</p> + +<p>読み取り専用のプロパティである<code>Element.shadowRoot</code>は、そのエレメントによってホストされたshadow rootへの読み取りアクセスを提供します。既に存在している要素にshadow rootを追加する場合は {{domxref('Element.attachShadow')}} を使用してください。</p> + +<h2 id="Syntax" name="Syntax">文法</h2> + +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.shadowRoot; +</pre> + +<h3 id="値">値</h3> + +<p>{{domxref('ShadowRoot')}} オブジェクトです。 アタッチされた時の{{DOMxRef("ShadowRoot.mode", "mode")}} に <code>closed</code> が指定された場合には <code>null</code> となります。</p> + +<h2 id="Examples">Examples</h2> + +<p>The following snippets are taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">see it live also</a>), which creates an element that displays a square of a size and color specified in the element's attributes.</p> + +<p>Inside the <code><custom-square></code> element's class definition we include some life cycle callbacks that make a call to an external function, <code>updateStyle()</code>, which actually applies the size and color to the element. You'll see that we are passing it <code>this</code> (the custom element itself) as a parameter.</p> + +<pre class="brush: js">connectedCallback() { + console.log('Custom square element added to page.'); + updateStyle(this); +} + +attributeChangedCallback(name, oldValue, newValue) { + console.log('Custom square element attributes changed.'); + updateStyle(this); +}</pre> + +<p>In the <code>updateStyle()</code> function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:</p> + +<pre class="brush: js">function updateStyle(elem) { + const shadow = elem.shadowRoot; + const childNodes = Array.from(shadow.childNodes); + + childNodes.forEach(childNode => { + if (childNode.nodeName === 'STYLE') { + childNode.textContent = ` + div { + width: ${elem.getAttribute('l')}px; + height: ${elem.getAttribute('l')}px; + background-color: ${elem.getAttribute('c')}; + } + `; + } + }); +}</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('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.Element.shadowRoot")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/ja/web/api/element/show_event/index.html b/files/ja/web/api/element/show_event/index.html new file mode 100644 index 0000000000..eedb67fb18 --- /dev/null +++ b/files/ja/web/api/element/show_event/index.html @@ -0,0 +1,78 @@ +--- +title: 'Element: show イベント' +slug: Web/API/Element/show_event +tags: + - API + - Deprecated + - Event + - Reference + - events + - show + - イベント +translation_of: Web/API/Element/show_event +--- +<div>{{APIRef}}{{deprecated_header}}</div> + +<p><strong><code>show</code></strong> イベントは、 {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu"><code>contextmenu</code> 属性</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("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onshow", "onshow")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush:html;"><div contextmenu="test"></div> +<menu type="context" id="test"> + <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> +</menu> + +<script> + document.getElementById("test").addEventListener("show", function(e){ + alert("the context menu will be displayed"); + }, false); +</script> +</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("HTML5 W3C", "webappapis.html#handler-onshow", "show event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.show_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.onshow", "onshow")}}</li> +</ul> diff --git a/files/ja/web/api/element/slot/index.html b/files/ja/web/api/element/slot/index.html new file mode 100644 index 0000000000..188d164da6 --- /dev/null +++ b/files/ja/web/api/element/slot/index.html @@ -0,0 +1,60 @@ +--- +title: Element.slot +slug: Web/API/Element/slot +translation_of: Web/API/Element/slot +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p>{{domxref("Element")}} インターフェースの <strong><code>slot</code></strong> プロパティは shadow DOM slot の名前を返します。</p> + +<p>slot は、<a href="/ja/docs/Web/Web_Components">web コンポーネント</a> の中にユーザーが任意のマークアップを代入できる要素を提供します (<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">template と slot の使い方</a> により詳しい説明があります)。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aString</em> = <em>element</em>.slot +<em>element</em>.slot = <em>aString</em> +</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("DOMString")}}</p> + +<h2 id="Example" name="Example">例</h2> + +<p><a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">templateのサンプル</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">実行例</a>)では、<code><</code><code>my-paragraph></code> と名付けた簡単なカスタム要素を作っています。このカスタム要素には、shadow root が付いており、<code>my-text</code> と名付けられた slot 要素が含まれています。</p> + +<p><code><my-paragraph></code> がドキュメントの中で利用された時、その内部で <code><a href="/ja/docs/Web/HTML/Global_attributes/slot">slot</a></code> 属性を <code>my-text</code> に設定した要素を作ることで、slot の内容を変更することができます。 </p> + +<pre class="brush: html"><my-paragraph> + <span slot="my-text">新しいテキストを代入します</span> +</my-paragraph></pre> + +<p>JavaScript ファイルで {{htmlelement("span")}} への参照を取得すると、対応する <code><slot></code> の名前を取得できます。 </p> + +<pre class="brush: js">let slottedSpan = document.querySelector('my-paragraph span') +console.log(slottedSpan.slot); // <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">'my-text' と表示されます</span></span></span></span></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('DOM WHATWG','#dom-element-slot','slot')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<div> + + +<p>{{Compat("api.Element.slot")}}</p> +</div> diff --git a/files/ja/web/api/element/tagname/index.html b/files/ja/web/api/element/tagname/index.html new file mode 100644 index 0000000000..e10c5acf43 --- /dev/null +++ b/files/ja/web/api/element/tagname/index.html @@ -0,0 +1,36 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Element/tagName +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>要素の名前を返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>elementName</var> = element.tagName +</pre> +<ul> + <li><code>elementName</code> : 現在の要素の名前を含む文字列</li> +</ul> +<h2 id="Notes" name="Notes">注記</h2> +<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p> +<h2 id="Example" name="Example">例</h2> +<p>以下のようなマークアップを想定します。</p> +<pre class="brush:html"><span id="born">When I was born...</span> +</pre> +<p>上記 HTML に対し以下のスクリプトを実行した場合...</p> +<pre class="brush:js">var span = document.getElementById("born"); + +alert(span.tagName); +</pre> +<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p> +<h2 id="Specifications" name="Specifications">仕様</h2> +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/ja/web/api/element/touchcancel_event/index.html b/files/ja/web/api/element/touchcancel_event/index.html new file mode 100644 index 0000000000..c9c1558a44 --- /dev/null +++ b/files/ja/web/api/element/touchcancel_event/index.html @@ -0,0 +1,71 @@ +--- +title: 'Element: touchcancel event' +slug: Web/API/Element/touchcancel_event +tags: + - Event + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - touch +translation_of: Web/API/Element/touchcancel_event +--- +<div>{{APIRef}}</div> + +<div></div> + +<p><span class="seoSummary"><code>touchcancel</code> イベントは、１つ以上のタッチポイントが実装固有の方法で中断されたときに発生します(例えば、タッチポイントが多すぎるとき)。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>No</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{ DOMxRef("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<p>サンプルコードはこちらです。 <a href="/ja/DOM/Touch_events">Touch events</a>.</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#event-touchcancel')}}</td> + <td>{{Spec2('Touch Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.Element.touchcancel_event")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</li> + <li>This event on <code><a href="/en-US/docs/Web/API/Document">Document</a></code> targets: <code><a href="/en-US/docs/Web/API/Document/touchcancel_event">touchcancel</a> </code></li> +</ul> diff --git a/files/ja/web/api/element/touchend_event/index.html b/files/ja/web/api/element/touchend_event/index.html new file mode 100644 index 0000000000..20a8746b96 --- /dev/null +++ b/files/ja/web/api/element/touchend_event/index.html @@ -0,0 +1,74 @@ +--- +title: 'Element: touchend イベント' +slug: Web/API/Element/touchend_event +tags: + - Event + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - events + - touch + - touchstart +translation_of: Web/API/Element/touchend_event +--- +<p>{{APIRef}}</p> + +<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="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Touch Events', '#event-touchend')}}</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.Element.touchend_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.ontouchend","ontouchend")}}</li> + <li>{{domxref("Document")}} をターゲットとしたこのイベント: {{domxref("Document/touchend_event", "touchend")}}</li> +</ul> diff --git a/files/ja/web/api/element/touchmove_event/index.html b/files/ja/web/api/element/touchmove_event/index.html new file mode 100644 index 0000000000..f58636b215 --- /dev/null +++ b/files/ja/web/api/element/touchmove_event/index.html @@ -0,0 +1,74 @@ +--- +title: 'Element: touchmove イベント' +slug: Web/API/Element/touchmove_event +tags: + - Event + - Touch Events + - TouchEvent + - UI + - UI Events + - UX + - touch + - touchmove +translation_of: Web/API/Element/touchmove_event +--- +<p>{{APIRef}}</p> + +<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"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <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.Element.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("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}} と {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</li> + <li>{{domxref("Document")}} をターゲットとしたこのイベント: {{domxref("Document/touchmove_event", "touchmove")}}</li> +</ul> diff --git a/files/ja/web/api/element/touchstart_event/index.html b/files/ja/web/api/element/touchstart_event/index.html new file mode 100644 index 0000000000..aff0ec09f3 --- /dev/null +++ b/files/ja/web/api/element/touchstart_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Element: touchstart イベント' +slug: Web/API/Element/touchstart_event +tags: + - Event + - Touch Event + - TouchEvent + - UI + - UI Events + - UX + - touch + - touchstart +translation_of: Web/API/Element/touchstart_event +--- +<p>{{APIRef}}</p> + +<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="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Touch Events', '#event-touchstart')}}</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.Element.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("Document")}} をターゲットとしたこのイベント: {{domxref("Document/touchstart_event", "touchstart")}}</li> +</ul> diff --git a/files/ja/web/api/element/wheel_event/index.html b/files/ja/web/api/element/wheel_event/index.html new file mode 100644 index 0000000000..620784c22b --- /dev/null +++ b/files/ja/web/api/element/wheel_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'Element: wheel イベント' +slug: Web/API/Element/wheel_event +tags: + - API + - DOM + - Element + - Event + - Reference + - WheelEvent + - wheel +translation_of: Web/API/Element/wheel_event +--- +<p>{{APIRef}}</p> + +<p><strong><code>wheel</code></strong> イベントは、ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転させたときに発行されます。</p> + +<p>このイベントは標準外、非推奨の {{domxref("Element/mousewheel_event", "mousewheel")}} イベントを置き換えるものです。</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("WheelEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onwheel", "onwheel")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>wheel</code> イベントと {{domxref("Element/scroll_event", "scroll")}} イベントを混同しないでください。 <code>wheel</code> イベントの既定のアクションは実装固有のものであり、必ずしも <code>scroll</code> イベントを発行するわけではありません。その場合でも、ホイールイベントの <code>delta*</code> 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 <code>wheel</code> イベントの <code>delta*</code> プロパティに頼らないようにしてください。代わりに、 <code>scroll</code> イベント内のターゲットの {{domxref("Element.scrollLeft", "scrollLeft")}} や {{domxref("Element.scrollTop", "scrollTop")}} の値の変化を検出するようにしてください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Scaling_an_element_via_the_wheel" name="Scaling_an_element_via_the_wheel">ホイールで要素を拡大縮小</h3> + +<p>この例は、マウス (またはその他のポインティングデバイスの) ホイールを使用して要素を拡大縮小する方法を示します。</p> + +<pre class="brush: html notranslate"><div>Scale me with your mouse wheel.</div></pre> + +<pre class="brush: css notranslate">body { + min-height: 100vh; + margin: 0; + display: flex; + align-items: center; + justify-content: center; +} + +div { + width: 105px; + height: 105px; + background: #cdf; + padding: 5px; +}</pre> + +<pre class="brush: js notranslate">function zoom(event) { + event.preventDefault(); + + scale += event.deltaY * -0.01; + + // Restrict scale + scale = Math.min(Math.max(.125, scale), 4); + + // Apply scale transform + el.style.transform = `scale(${scale})`; +} + +let scale = 1; +const el = document.querySelector('div'); +el.onwheel = zoom;</pre> + +<p>{{EmbedLiveSample("Scaling_an_element_via_the_wheel", 700, 300)}}</p> + +<h3 id="addEventListener_equivalent" name="addEventListener_equivalent">addEventListener による同等のもの</h3> + +<p>イベントハンドラーは {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用して設定することもできます。</p> + +<pre class="brush: js notranslate">el.addEventListener('wheel', zoom);</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('UI Events','#event-type-wheel','wheel')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("api.Element.wheel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("WheelEvent")}}</li> + <li><a href="/ja/docs/Web/API/Document/wheel_event">Document: <code>wheel</code> イベント</a></li> +</ul> |