From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/accesskey/index.html | 22 + files/ja/web/api/element/animate/index.html | 202 +++++++++ files/ja/web/api/element/attachshadow/index.html | 166 +++++++ files/ja/web/api/element/attributes/index.html | 122 ++++++ files/ja/web/api/element/blur_event/index.html | 142 ++++++ files/ja/web/api/element/classlist/index.html | 267 +++++++++++ files/ja/web/api/element/classname/index.html | 35 ++ files/ja/web/api/element/click_event/index.html | 160 +++++++ files/ja/web/api/element/clientheight/index.html | 69 +++ files/ja/web/api/element/clientleft/index.html | 47 ++ files/ja/web/api/element/clienttop/index.html | 37 ++ files/ja/web/api/element/clientwidth/index.html | 67 +++ files/ja/web/api/element/closest/index.html | 151 +++++++ .../api/element/compositionend_event/index.html | 146 ++++++ .../api/element/compositionstart_event/index.html | 151 +++++++ .../api/element/compositionupdate_event/index.html | 149 +++++++ files/ja/web/api/element/copy_event/index.html | 113 +++++ files/ja/web/api/element/cut_event/index.html | 119 +++++ files/ja/web/api/element/dblclick_event/index.html | 122 ++++++ .../web/api/element/domactivate_event/index.html | 102 +++++ files/ja/web/api/element/error_event/index.html | 150 +++++++ files/ja/web/api/element/focus_event/index.html | 139 ++++++ files/ja/web/api/element/focusin_event/index.html | 111 +++++ files/ja/web/api/element/focusout_event/index.html | 112 +++++ .../api/element/fullscreenchange_event/index.html | 110 +++++ .../api/element/fullscreenerror_event/index.html | 80 ++++ files/ja/web/api/element/getattribute/index.html | 83 ++++ .../web/api/element/getattributenames/index.html | 72 +++ .../ja/web/api/element/getattributenode/index.html | 62 +++ .../web/api/element/getattributenodens/index.html | 37 ++ files/ja/web/api/element/getattributens/index.html | 47 ++ .../api/element/getboundingclientrect/index.html | 114 +++++ files/ja/web/api/element/getclientrects/index.html | 233 ++++++++++ .../api/element/getelementsbyclassname/index.html | 115 +++++ .../api/element/getelementsbytagname/index.html | 55 +++ .../api/element/getelementsbytagnamens/index.html | 50 +++ files/ja/web/api/element/hasattribute/index.html | 49 +++ files/ja/web/api/element/hasattributens/index.html | 44 ++ files/ja/web/api/element/hasattributes/index.html | 85 ++++ .../web/api/element/haspointercapture/index.html | 93 ++++ files/ja/web/api/element/id/index.html | 57 +++ files/ja/web/api/element/index.html | 487 +++++++++++++++++++++ files/ja/web/api/element/innerhtml/index.html | 213 +++++++++ .../web/api/element/insertadjacenthtml/index.html | 134 ++++++ .../web/api/element/insertadjacenttext/index.html | 147 +++++++ files/ja/web/api/element/localname/index.html | 146 ++++++ files/ja/web/api/element/matches/index.html | 120 +++++ .../ja/web/api/element/mousedown_event/index.html | 93 ++++ .../ja/web/api/element/mouseenter_event/index.html | 162 +++++++ .../ja/web/api/element/mouseleave_event/index.html | 156 +++++++ .../ja/web/api/element/mousemove_event/index.html | 159 +++++++ files/ja/web/api/element/mouseout_event/index.html | 132 ++++++ .../ja/web/api/element/mouseover_event/index.html | 128 ++++++ files/ja/web/api/element/mouseup_event/index.html | 90 ++++ files/ja/web/api/element/name/index.html | 57 +++ .../web/api/element/onfullscreenchange/index.html | 95 ++++ .../web/api/element/onfullscreenerror/index.html | 79 ++++ files/ja/web/api/element/outerhtml/index.html | 120 +++++ files/ja/web/api/element/paste_event/index.html | 120 +++++ files/ja/web/api/element/prefix/index.html | 62 +++ files/ja/web/api/element/queryselector/index.html | 91 ++++ .../ja/web/api/element/queryselectorall/index.html | 205 +++++++++ .../api/element/releasepointercapture/index.html | 130 ++++++ .../ja/web/api/element/removeattribute/index.html | 71 +++ .../web/api/element/removeattributenode/index.html | 45 ++ .../web/api/element/removeattributens/index.html | 41 ++ .../web/api/element/requestfullscreen/index.html | 169 +++++++ files/ja/web/api/element/scroll_event/index.html | 100 +++++ files/ja/web/api/element/scrollby/index.html | 74 ++++ files/ja/web/api/element/scrollheight/index.html | 175 ++++++++ files/ja/web/api/element/scrollintoview/index.html | 99 +++++ files/ja/web/api/element/scrollleft/index.html | 113 +++++ files/ja/web/api/element/scrollto/index.html | 79 ++++ files/ja/web/api/element/scrolltop/index.html | 94 ++++ files/ja/web/api/element/scrollwidth/index.html | 127 ++++++ files/ja/web/api/element/select_event/index.html | 84 ++++ files/ja/web/api/element/setattribute/index.html | 51 +++ .../ja/web/api/element/setattributenode/index.html | 48 ++ .../web/api/element/setattributenodens/index.html | 50 +++ files/ja/web/api/element/setattributens/index.html | 39 ++ files/ja/web/api/element/setcapture/index.html | 94 ++++ .../web/api/element/setpointercapture/index.html | 137 ++++++ files/ja/web/api/element/shadowroot/index.html | 86 ++++ files/ja/web/api/element/show_event/index.html | 78 ++++ files/ja/web/api/element/slot/index.html | 60 +++ files/ja/web/api/element/tagname/index.html | 36 ++ .../web/api/element/touchcancel_event/index.html | 71 +++ files/ja/web/api/element/touchend_event/index.html | 74 ++++ .../ja/web/api/element/touchmove_event/index.html | 74 ++++ .../ja/web/api/element/touchstart_event/index.html | 72 +++ files/ja/web/api/element/wheel_event/index.html | 120 +++++ 91 files changed, 9774 insertions(+) create mode 100644 files/ja/web/api/element/accesskey/index.html create mode 100644 files/ja/web/api/element/animate/index.html create mode 100644 files/ja/web/api/element/attachshadow/index.html create mode 100644 files/ja/web/api/element/attributes/index.html create mode 100644 files/ja/web/api/element/blur_event/index.html create mode 100644 files/ja/web/api/element/classlist/index.html create mode 100644 files/ja/web/api/element/classname/index.html create mode 100644 files/ja/web/api/element/click_event/index.html create mode 100644 files/ja/web/api/element/clientheight/index.html create mode 100644 files/ja/web/api/element/clientleft/index.html create mode 100644 files/ja/web/api/element/clienttop/index.html create mode 100644 files/ja/web/api/element/clientwidth/index.html create mode 100644 files/ja/web/api/element/closest/index.html create mode 100644 files/ja/web/api/element/compositionend_event/index.html create mode 100644 files/ja/web/api/element/compositionstart_event/index.html create mode 100644 files/ja/web/api/element/compositionupdate_event/index.html create mode 100644 files/ja/web/api/element/copy_event/index.html create mode 100644 files/ja/web/api/element/cut_event/index.html create mode 100644 files/ja/web/api/element/dblclick_event/index.html create mode 100644 files/ja/web/api/element/domactivate_event/index.html create mode 100644 files/ja/web/api/element/error_event/index.html create mode 100644 files/ja/web/api/element/focus_event/index.html create mode 100644 files/ja/web/api/element/focusin_event/index.html create mode 100644 files/ja/web/api/element/focusout_event/index.html create mode 100644 files/ja/web/api/element/fullscreenchange_event/index.html create mode 100644 files/ja/web/api/element/fullscreenerror_event/index.html create mode 100644 files/ja/web/api/element/getattribute/index.html create mode 100644 files/ja/web/api/element/getattributenames/index.html create mode 100644 files/ja/web/api/element/getattributenode/index.html create mode 100644 files/ja/web/api/element/getattributenodens/index.html create mode 100644 files/ja/web/api/element/getattributens/index.html create mode 100644 files/ja/web/api/element/getboundingclientrect/index.html create mode 100644 files/ja/web/api/element/getclientrects/index.html create mode 100644 files/ja/web/api/element/getelementsbyclassname/index.html create mode 100644 files/ja/web/api/element/getelementsbytagname/index.html create mode 100644 files/ja/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/ja/web/api/element/hasattribute/index.html create mode 100644 files/ja/web/api/element/hasattributens/index.html create mode 100644 files/ja/web/api/element/hasattributes/index.html create mode 100644 files/ja/web/api/element/haspointercapture/index.html create mode 100644 files/ja/web/api/element/id/index.html create mode 100644 files/ja/web/api/element/index.html create mode 100644 files/ja/web/api/element/innerhtml/index.html create mode 100644 files/ja/web/api/element/insertadjacenthtml/index.html create mode 100644 files/ja/web/api/element/insertadjacenttext/index.html create mode 100644 files/ja/web/api/element/localname/index.html create mode 100644 files/ja/web/api/element/matches/index.html create mode 100644 files/ja/web/api/element/mousedown_event/index.html create mode 100644 files/ja/web/api/element/mouseenter_event/index.html create mode 100644 files/ja/web/api/element/mouseleave_event/index.html create mode 100644 files/ja/web/api/element/mousemove_event/index.html create mode 100644 files/ja/web/api/element/mouseout_event/index.html create mode 100644 files/ja/web/api/element/mouseover_event/index.html create mode 100644 files/ja/web/api/element/mouseup_event/index.html create mode 100644 files/ja/web/api/element/name/index.html create mode 100644 files/ja/web/api/element/onfullscreenchange/index.html create mode 100644 files/ja/web/api/element/onfullscreenerror/index.html create mode 100644 files/ja/web/api/element/outerhtml/index.html create mode 100644 files/ja/web/api/element/paste_event/index.html create mode 100644 files/ja/web/api/element/prefix/index.html create mode 100644 files/ja/web/api/element/queryselector/index.html create mode 100644 files/ja/web/api/element/queryselectorall/index.html create mode 100644 files/ja/web/api/element/releasepointercapture/index.html create mode 100644 files/ja/web/api/element/removeattribute/index.html create mode 100644 files/ja/web/api/element/removeattributenode/index.html create mode 100644 files/ja/web/api/element/removeattributens/index.html create mode 100644 files/ja/web/api/element/requestfullscreen/index.html create mode 100644 files/ja/web/api/element/scroll_event/index.html create mode 100644 files/ja/web/api/element/scrollby/index.html create mode 100644 files/ja/web/api/element/scrollheight/index.html create mode 100644 files/ja/web/api/element/scrollintoview/index.html create mode 100644 files/ja/web/api/element/scrollleft/index.html create mode 100644 files/ja/web/api/element/scrollto/index.html create mode 100644 files/ja/web/api/element/scrolltop/index.html create mode 100644 files/ja/web/api/element/scrollwidth/index.html create mode 100644 files/ja/web/api/element/select_event/index.html create mode 100644 files/ja/web/api/element/setattribute/index.html create mode 100644 files/ja/web/api/element/setattributenode/index.html create mode 100644 files/ja/web/api/element/setattributenodens/index.html create mode 100644 files/ja/web/api/element/setattributens/index.html create mode 100644 files/ja/web/api/element/setcapture/index.html create mode 100644 files/ja/web/api/element/setpointercapture/index.html create mode 100644 files/ja/web/api/element/shadowroot/index.html create mode 100644 files/ja/web/api/element/show_event/index.html create mode 100644 files/ja/web/api/element/slot/index.html create mode 100644 files/ja/web/api/element/tagname/index.html create mode 100644 files/ja/web/api/element/touchcancel_event/index.html create mode 100644 files/ja/web/api/element/touchend_event/index.html create mode 100644 files/ja/web/api/element/touchmove_event/index.html create mode 100644 files/ja/web/api/element/touchstart_event/index.html create mode 100644 files/ja/web/api/element/wheel_event/index.html (limited to 'files/ja/web/api/element') 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 +--- +
{{APIRef("DOM")}}
+ +
 
+ +
Element.accessKeyは、ユーザが他の要素へジャンプする時に押す、キーストロークを設定します。
+ +
 
+ +
+

Element.accessKey は、ブラウザの既定のキーバインディングと競合する為、めったに使われません。この競合を回避するために、ブラウザはアクセスキーの挙動を他の「最適な」キーと一緒に押されたときに動くように実装しています。（ Alt + アクセスキー、の様に。）

+
+ +

See also 

+ + 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 +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

{{domxref("Element")}} インターフェースの animate() メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。

+ +

構文

+ +
element.animate(keyframes, options);
+
+ +

引数

+ +
+
keyframes
+
+ +
    +
  1. 列挙可能な値の配列をプロパティに持つ keyframes オブジェクト
    2. +
  2. keyframes オブジェクトから成る配列
    3. +
+ +
+
のどちらかを指定します。keyframes 形式の詳細については Keyframe Formats で確認できます。
+
+
    +
  1. 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト + 
    element.animate({
+  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
+  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
+}, 2000);
+
    +
    2. +
  2. CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列 + 
    element.animate([
+  { // フレーム 1
+    opacity: 0,
+    color: "#fff"
+  },
+  { // フレーム 2
+    opacity: 1,
+ ​   color: "#000"
+  }
+], 2000);
    +
    3. +
+
+
options
+
アニメーションの再生時間を表す ms 単位の整数値、または  animation timing options を含むオブジェクトを渡す必要があります。後者の場合、animation timing options のプロパティに加え、以下のようなプロパティも追加して animate() に渡すことができます。
+
+ +

keyframeOptions に追加できるプロパティ

+ +
+
id
+
アニメーションを参照する文字列
+
+ +
+
composite
+
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は replace です。 +
    +
  • add dictates an additive effect, where each successive iteration builds on the last. 例として transform を挙げると、translateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
    • +
  • accumulate を指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2) と blur(5) の合成結果は blur(7) になります（blur(2) blur(5) ではありません）。
    • +
  • replace を指定した場合、前回の値は新しい値で上書きされます。
    • +
+
+
iterationComposite
+
Defines the way animation values build from iteration to iteration. accumulate または replace を指定できます（上記参照）。デフォルト値は replace です。
+
spacing
+
アニメーションの再生時間内にわたって、時間軸上におけるキーフレームの配置方法を指定します。ただし、時間のオフセットは指定されていないものと仮定して計算が行われます。デフォルト値は distribute です。 +
    +
  • distribute を指定した場合、キーフレーム間の時間間隔が等しくなるように配置されます。
    • +
  • paced を指定した場合、キーフレーム間のアニメーションにおける時間変化の割合（下図におけるグラフの傾き）が等しくなるように配置されます。
    • +
+ +

以下の例では、CSS の left プロパティに関する 4 つのキーフレームを指定したアニメーションについて、spacing プロパティの働きを示しています（ここでは仕様書の例を参考にしています）。

+ + 
/* 左のグラフ */
+elem.animate([ { left:   '0px' },
+               { left: '-20px' },
+               { left: '100px' },
+               { left:  '50px' }
+             ], 1000);  /* spacing はデフォルト値 "distribute" */
+
+ + 
/* 右のグラフ */
+elem.animate([ { left:   '0px' },
+               { left: '-20px' },
+               { left: '100px' },
+               { left:  '50px' }
+             ], { duration: 1000, spacing: "paced(left)" });
+ +

 

+
+
+ +

戻り値

+ +

{{domxref("Animation")}} を返します。

+ +

使用例

+ +

Down the Rabbit Hole (with the Web Animation API) のデモでは、上に向かって永遠に流れ続けるアニメーションが #tunnel 要素に施されています。ここでは、アニメーションを素早く作成して再生できる animate() メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome("39")}}{{CompatUnknown}}{{ CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
+

基本サポート

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参考情報

+ + 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 +--- +
{{APIRef('Shadow DOM')}}
+ +

Element.attachShadow() メソッドは、シャドウ DOM ツリーを特定の要素に追加し、そのシャドウルート ({{domxref("ShadowRoot")}}) への参照を返します。

+ +

シャドウツリーを追加できる要素

+ +

シャドウルートは全ての要素に追加できるわけではありません。 ({{htmlelement("a")}} など) セキュリティ上の理由でシャドウ DOM を持てないものもあります。以下にシャドウルートを追加できる要素を列挙します。

+ + + +

構文

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

引数

+ +
+
shadowRootInit
+
ShadowRootInit ディクショナリで、以下のプロパティを含みます。 +
+
mode
+
+

文字列で、シャドウ DOM ツリーのカプセル化モードを指定します。以下のうちの一つを取ります。

+ +
    +
  • open: シャドウルートに外部の JavaScript からアクセスできます。例えば、 {{domxref("Element.shadowRoot")}} を使ってアクセスできます。
    + + 
    element.shadowRoot; // ShadowRoot オブジェクトを返します
    +
    • +
  • closed: シャドウルートに外部の JavaScript からアクセスできません。
    + + 
    element.shadowRoot; // null を返します
+
    +
    • +
+
+
delegatesFocus
+
真偽値で、 true に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウホストは :focus のスタイルを利用することができます。
+
+
+
+ +

返値

+ +

{{domxref("ShadowRoot")}} オブジェクトです。

+ +

例外

+ + + + + + + + + + + + + + + + + + +
例外説明
InvalidStateErrorshadow root を追加しようとしている要素は、すでに shadow host です。
NotSupportedErrorshadow root を追加しようとしている要素は、HTML の名前空間外であるか、shadow DOM を持てない要素です(上記の通り)。
+ +

例

+ +

以下の例は word-count-web-component のデモを使用しています(実行例)。 attachShadow() はコードの真ん中付近で shadow root を作るために使用されています。その後カスタム要素を追加しています。

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

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.attachShadow")}}

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 +--- +

{{ APIRef("DOM") }}

+ +

Element.attributes プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 Array ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 attributes はその属性に関するあらゆる情報を表す文字列のキーと値の組です。

+ +

構文

+ +
var attr = element.attributes;
+
+ +

例

+ +

基本的な例

+ +
// ドキュメント内の最初の <p> 要素を取得する
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

要素の属性を列挙する

+ +

ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。
+ 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。

+ +
<!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>
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}{{SpecName('DOM2 Core')}} から変更無し
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}{{SpecName('DOM1')}}から変更無し
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.attributes")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

blur イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 focusout がバブリングを行うのに対し blur は行わないことです。

+ +

blur の反対は {{domxref("Element/focus_event", "focus")}} です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onblur", "onblur")}}
同期 / 非同期同期
Composedはい
+ +

例

+ +

簡単な例

+ +

HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript

+ +
const password = document.querySelector('input[type="password"]');
+
+password.addEventListener('focus', (event) => {
+  event.target.style.background = 'pink';
+});
+
+password.addEventListener('blur', (event) => {
+  event.target.style.background = '';
+});
+ +

結果

+ +

{{EmbedLiveSample("Simple_example", '100%', '50px')}}

+ +

イベント委譲

+ +

このイベントのイベント委譲を実装する方法は二つあります。 {{Event("focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の useCapture 引数に true を設定するかです。

+ +

HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+
+form.addEventListener('focus', (event) => {
+  event.target.style.background = 'pink';
+}, true);
+
+form.addEventListener('blur', (event) => {
+  event.target.style.background = '';
+}, true);
+ +

結果

+ +

{{EmbedLiveSample("Event_delegation", '100%', '50px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("UI Events", "#event-type-blur")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-blur")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.blur_event")}}

+ +

このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の body を設定します。

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.classList は読み取り専用のプロパティで、生きた {{domxref("DOMTokenList")}} コレクションでその要素の class 属性を返します。これを使用してクラスリストを操作することができます。

+ +

classList を使用することは、 {{domxref("element.className")}} から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。

+ +

構文

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

返値

+ +

{{domxref("DOMTokenList")}} で、その要素の class 属性を返します。 class 属性が設定されていない場合や空の場合は、空の DOMTokenList を返します。すなわち、 DOMTokenList の length プロパティが 0 になります。

+ +

DOMTokenList 自体は読み取り専用ですが、 {{domxref("DOMTokenList/add", "add()")}} や {{domxref("DOMTokenList/remove", "remove()")}} を用いてオブジェクトを変更することはできます。

+ +

例

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

Firefox 26 以前のバージョンでは、 add/remove/toggle メソッドでいくつかの引数の使用方法を実装していません。詳しくは https://bugzilla.mozilla.org/show_bug.cgi?id=814014 を参照してください。

+
+ +

ポリフィル

+ +

古い onpropertychange イベントは、生きた classList のモックアップを作成することができますが、これは Element.prototype.className プロパティが変更されたときにこのイベントが発生するからです。

+ +

以下のポリフィルは classList と DOMTokenList の両方のためのもので、 Element.prototype.classList のすべての標準メソッドおよびプロパティを完全に準拠 (カバー) することを保証します。 IE10-IE11 ブラウザーに加えて、 IE 6-9 でほぼ同じ動作をします。

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

注意事項

+ +

上記のポリフィルは機能が限定されています。現在、 IE 6-7 では、文書要素の外にある要素 (たとえば、 document.createElement によって作成された後、親ノードに追加される前の要素) を代替することができません。

+ +

しかし、 IE9 では正常に動作するはずです。代替バージョンの classList と W3 の仕様書との主な違いは、 IE 6-8 においては不変オブジェクト (プロパティを直接変更できないオブジェクト) を生成する方法がないという点です。しかし IE9 では、プロトタイプを拡張し、可視オブジェクトを凍結し、ネイティブのプロパティメソッドを上書きすることで可能です。しかし、このような操作は IE6-IE8 では機能せず、 IE9 ではウェブページ全体のパフォーマンスを大幅に低下させるため、これらの修正はこのポリフィルでは完全に実行できません。

+ +

IE6-7 の軽い注意事項ですが、このポリフィルは window オブジェクトの window[" uCL"] プロパティを使用して CSS の式とコミュニケーションを行い、 CSS の x-uCLp プロパティをすべての要素に付与し、 element[" uCL"] プロパティによってガーベジコレクションを行うことができるようにして性能を改善しています。すべてのポリフィルを使用したブラウザー (IE6-9) では、追加の element[" uCLp"] プロパティによって要素に標準に準拠したプロトタイピングを保証し、それぞれの element["classList"] オブジェクトに DOMTokenList[" uCL"] プロパティを追加することで、 DOMTokenList が自分自身の要素の範囲に収まることを保証します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}初回定義
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.classList")}}

+ +

関連情報

+ + 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 +--- +
+ {{ApiRef}}
+

概要

+

className は要素の class 属性の値の取得 / 設定に用います。

+

構文

+
cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ +

例

+
var elm = document.getElementById("div1"); //対象要素を取得
+
+if (elm.className == "fixed") {
+  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
+}
+

注記

+

"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために className という名称となっています。

+

仕様書

+ +

関連情報

+ 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 +--- +
{{APIRef}}
+ +

click イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onclick", "onclick")}}
+ +

ボタンが要素上で押された後、離される前に要素の外側に移動した場合は、イベントは両方の要素を含む最も近い祖先要素で発生します。

+ +

click は {{event("mousedown")}} および {{event("mouseup")}} イベントの後に、順番通りに発生します。

+ +

使用上の注意

+ +

click のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("Event.detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は detail が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。

+ +

Internet Explorer

+ +

Internet Explorer 8 と 9 は、 {{cssxref("background-color")}} の計算値が transparent である要素が他の要素の上に重なった時、 click イベントを受け取らないというバグに悩まされていました。すべての click イベントはその下にある要素で発生していました。このライブサンプルを参照してください。

+ +

このバグの知られている回避方法は以下の通りです。

+ + + +

Safari Mobile

+ +

Safari Mobile 7.0 以降では (おそらくそれ以前のバージョンも) 悩ましいバグがあり、通常は対話型ではない要素 ({{HTMLElement("div")}} など) で、イベントリスナーが要素自身に直接設定されていない場合 (つまり、 イベントの委譲が使用されている場合) に click イベントが発生しません。デモはこのライブ例を参照してください。 Safari's docs on making elements clickable および definition of "clickable element" も参照してください。

+ +

このバグの知られている回避策は以下のとおりです。

+ + + +

Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。

+ + + +

例

+ +

この例は {{HtmlElement("button")}} を連続してクリックした数を表示します。

+ +

HTML

+ +
<button>Click</button>
+ +

JavaScript

+ +
const button = document.querySelector('button');
+
+button.addEventListener('click', event => {
+  button.innerHTML = `Click count: ${event.detail}`;
+});
+ +

結果

+ +

高速にするために、繰り返してボタンをクリックするとクリックカウントを増加させます。クリック間に休みが入った場合は、カウントがリセットされます。

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-click')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-click', 'click')}}{{Spec2('DOM3 Events')}}
{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}{{Spec2('DOM2 Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.click_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.clientHeight は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。

+ +

clientHeight は CSS height + CSS padding - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。

+ +

clientHeight がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。これは clientHeight の特例です。

+ +
+

注: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
var intElemClientHeight = element.clientHeight;
+ +

intElemClientHeight は element の clientHeight をピクセル単位で表す整数値です。 clientHeight プロパティは読み取り専用です。

+ +

例

+ +

Image:Dimensions-client.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}{{Spec2("CSSOM View")}}
+ +

注

+ +

clientHeight は Internet Explorer オブジェクトモデルで導入されたプロパティです。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.clientHeight")}}

+ +

関連情報

+ + 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 +--- +

{{ Fx_minversion_header(3) }} {{ ApiRef() }} {{ 英語版章題("Summary") }}

+

概要

+

要素の左ボーダーの幅のピクセル数です。 要素のテキストの方向が右から左である場合と、 オーバーフローにより左の縦スクロールバーがレンダリングされた場合の縦スクロールバーの幅を含みます。clientLeft は左マージン、または、左パディングを含んでいません。clientLeft は読み込み専用です。

+

Gecko ベースアプリケーションは、 Gecko 1.9 (Firefox 3、{{ Bug(111207) }} で実装) から clientLeft をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。 {{ 英語版章題("Syntax") }}

+

構文

+
var left = element.clientLeft;
+
+

{{ 英語版章題("Example") }}

+

例

+
+
+

padding-top

+

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.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from www.best-cat-art.com

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ 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') }}
+

Image:clientLeft.png

+

layout.scrollbar.side プロパティが 1、または、3 に設定されたときの縦スクロールバーの位置

+

+ + layout.scrollbar.side + プロパティ が、1、あるいは、3 に設定されたときと、テキストの方向が右から左へ設定されたときは、 縦スクロールバーは、左側に表示されます。 そして、これは、clientLeft が自動計算される方法に影響します。

+

仕様

+

W3C の仕様の一部ではありません。

+

注記

+

clientLeft は MS IE DHTML オブジェクトモデルで最初に導入されました。

+

リファレンス

+ +

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.clientLeft", "es": "es/DOM/element.clientLeft", "fr": "fr/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}

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 +--- +
+ {{ApiRef}} {{Fx_minversion_header("3")}}
+

概要

+

要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。clientTop は読込専用です。

+

Gecko ベースアプリケーションは、 Gecko 1.9 (Firefox 3、{{Bug("111207")}} で実装) から clientTop をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。

+

構文

+
top = element.clientTop;
+
+

例

+
+
+

padding-top

+

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.

+

All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from www.best-cat-art.com

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{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')}}
+

+

仕様

+

W3C の仕様の一部ではありません。

+

注記

+

clientTop は MS IE DHTML オブジェクトモデルで最初に導入されました。

+

リファレンス

+ 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 +--- +
{{APIRef("DOM")}}
+ +

Element.clientWidth プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。

+ +

clientWidth がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。これは clientWidth の特例です。

+ +
+

メモ: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
var intElemClientWidth = element.clientWidth;
+ +

intElemClientWidth は element の clientWidth をピクセル数で表す整数値です。 clientWidth プロパティは読み取り専用です。

+ +

例

+ +

Image:Dimensions-client.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
+ +

メモ

+ +

clientWidth は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.clientWidth")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef('DOM')}}
+ +
closest() メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 null を返します。 + +

構文

+ +
var closestElement = targetElement.closest(selectors);
+
+ +

引数

+ + + +

返値

+ + + +

例外

+ + + +

例

+ +

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>
+ +

JavaScript

+ +
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 を返す
+ +

ポリフィル

+ +

Element.closest() に対応していないブラウザーで、 element.matches() (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。

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

しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。

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

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.Element.closest")}}

+ +

互換性のメモ

+ +
    +
  • Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 document.createElement(tagName).closest(tagName) が null を返します。
    • +
+
+ +

関連情報

+ + +
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 +--- +
{{APIRef}}
+ +

compositionend イベントは、 {{glossary("input method editor", "IME")}} などのテキスト編集システムが現在の編集セッションを完了またはキャンセルした時に発生します。

+ +

例えば、このイベントは、ユーザーが ピン音 IME を使用して漢字の入力を完了した後に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("CompositionEvent")}}
イベントハンドラープロパティなし
+ +

例

+ +
const inputElement = document.querySelector('input[type="text"]');
+
+inputElement.addEventListener('compositionend', (event) => {
+  console.log(`generated characters were: ${event.data}`);
+});
+ +

実行例

+ +

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>
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-compositionend')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.compositionend_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

compositionstart イベントは、 {{glossary("input method editor", "IME")}} などのテキスト変換システムが新しい変換セッションを開始した時に発生します。

+ +

例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力を開始した後に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("CompositionEvent")}}
イベントハンドラープロパティなし
+ +

例

+ +
const inputElement = document.querySelector('input[type="text"]');
+
+inputElement.addEventListener('compositionstart', (event) => {
+  console.log(`generated characters were: ${event.data}`);
+});
+ +

実行例

+ +

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>
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-compositionstart')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.compositionstart_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

compositionupdate イベントは、 {{glossary("input method editor", "IME")}} などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。

+ +

例えば、このイベントは、ユーザーがピン音 IME を使用して漢字の入力をしている最中に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("CompositionEvent")}}
イベントハンドラープロパティなし
+ +

例

+ +
const inputElement = document.querySelector('input[type="text"]');
+
+inputElement.addEventListener('compositionupdate', (event) => {
+  console.log(`generated characters were: ${event.data}`);
+});
+ +

実行例

+ +

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>
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-compositionupdate')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.compositionupdate_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

copy イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncopy", "oncopy")}}
+ +

このイベントの既定の動作は、 (もしあれば) 選択範囲をクリップボードへコピーすることです。

+ +

このイベントのハンドラーは、 {{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を変更したり、 {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用してイベントの既定の動作を取り消したりすることができます。

+ +

ただし、ハンドラーがクリップボードのデータを読み取ることはできません。

+ +

仮想の copy イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。

+ +

例

+ +

ライブデモ

+ +

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>
+
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '100px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Window.copy_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

cut イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。

+ +

ユーザーが編集不可能なコンテンツに対して切り取りをしようとすると、 cut イベントは発生しますが、イベントオブジェクトにはデータが入りません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncut", "oncut")}}
+ +

イベントの既定のアクションは、 (もしあれば) 選択範囲をクリップボードへコピーして文書からその部分を取り除くことです。

+ +

このイベントのハンドラーは、 {{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を変更したり、 {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定の動作を取り消したりすることができます。

+ +

なお、既定の動作を取り消すと、文書の更新が阻止されます。そのため、「切り取り」の既定の動作をエミュレートしたい場合は、イベントハンドラーでクリップボードを操作するとともに、文書から選択範囲を手動で取り除かなければなりません。

+ +

このハンドラーがクリップボードのデータを読み取ることはできません。

+ +

仮想の cut イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。

+ +

例

+ +

ライブデモ

+ +

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>
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '100px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-cut')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Window.cut_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

dblclick イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く二回クリックされたときに発生します。

+ +

dblclick は二回の {{domxref("Element/click_event", "click")}} イベントの後 (展開すると、2組の {{domxref("Element.mousedown_event", "mousedown")}} および {{domxref("Element.mouseup_event", "mouseup")}} の後) に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
+ +

例

+ +

この例では、カードをダブルクリックするたびに寸法が切り替わります。

+ +

JavaScript

+ +
const card = document.querySelector('aside');
+
+card.addEventListener('dblclick', function (e) {
+  card.classList.toggle('large');
+});
+ +

HTML

+ +
<aside>
+  <h3>My Card</h3>
+  <p>Double click to resize this object.</p>
+</aside>
+ +

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

結果

+ +

{{EmbedLiveSample("Examples", 700, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの対応

+ +

{{Compat("api.Element.dblclick_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +
{{Deprecated_Header}}
+ +

DOMActivate イベントは、要素がアクティブになったとき、例えば、マウスを使ったりキーを押したりしてそこに移動したときに発行されます。

+ + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
+ +

例

+ +
<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>
+
+ +

{{EmbedLiveSample("Examples", 640, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-DOMActivate', 'DOMActivate')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.DOMActivate_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

error イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合に {{domxref("Element")}} オブジェクトに発生します。例えば、スクリプトの実行エラーがあったり、画像が見つからないか無効であった場合などです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}} または {{domxref("UIEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onerror", "onerror")}}
+ +

イベントオブジェ久は、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。

+ +

例

+ +

ライブデモ

+ +

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>
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-error')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.error_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

focus イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと {{domxref("Element/focusin_event", "focusin")}} との違いは、 focusin がバブリングを行うのに対し focus は行わないことです。

+ +

focus の反対は {{domxref("Element/blur_event", "blur")}} です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onfocus", "onfocus")}}
同期 / 非同期同期
Composedはい
+ +

例

+ +

簡単な例

+ +

HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript

+ +
const password = document.querySelector('input[type="password"]');
+
+password.addEventListener('focus', (event) => {
+  event.target.style.background = 'pink';
+});
+
+password.addEventListener('blur', (event) => {
+  event.target.style.background = '';
+});
+ +

結果

+ +

{{EmbedLiveSample("Simple_example", '100%', '50px')}}

+ +

イベント委譲

+ +

このイベントのイベント委譲を実装する方法は二つあります。 {{Event("focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の useCapture 引数に true を設定するかです。

+ +

HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+
+form.addEventListener('focus', (event) => {
+  event.target.style.background = 'pink';
+}, true);
+
+form.addEventListener('blur', (event) => {
+  event.target.style.background = '';
+}, true);
+ +

結果

+ +

{{EmbedLiveSample("Event_delegation", '100%', '50px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("UI Events", "#event-type-focus")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-focus")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.focus_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

focusin イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと {{domxref("Element/focus_event", "focus")}} との主な違いは、 focusin がバブリングを行うのに対し focus は行わないことです。

+ +

focusin の反対は {{domxref("Element/focusout_event", "focusout")}} です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onfocusin", "onfocusin")}}
同期 / 非同期同期
Composedはい
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+
+form.addEventListener('focusin', (event) => {
+  event.target.style.background = 'pink';
+});
+
+form.addEventListener('focusout', (event) => {
+  event.target.style.background = '';
+});
+ +

結果

+ +

{{EmbedLiveSample("Live_example", '100%', '50px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("UI Events", "#event-type-focusin")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-focusin")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.focusin_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

focusout イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと {{domxref("Element/blur_event", "blur")}} との主な違いは、 focusout がバブリングを行うのに対し blur は行わないことです。

+ +

focusout の反対は {{domxref("Element/focusin_event", "focusin")}} です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onfocusout", "onfocusout")}}
同期 / 非同期同期
Composedはい
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+
+form.addEventListener('focusin', (event) => {
+  event.target.style.background = 'pink';
+});
+
+form.addEventListener('focusout', (event) => {
+  event.target.style.background = '';
+});
+ +

結果

+ +

{{EmbedLiveSample("Live_example", '100%', '50px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("UI Events", "#event-type-focusout")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-focusout")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.focusout_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

fullscreenchange イベントは、ある要素 ({{domxref("Element")}}) が全画面モードに切り替わったり、終了したりした直後に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Element.onfullscreenchange", "onfullscreenchange")}}
+ +

このイベントは、全画面モードへ移行または終了する要素 (Element) へ送られます。

+ +

例

+ +

この例では、 fullscreenchange イベントのハンドラーは、 ID が fullscreen-div である要素に追加されます。

+ +

ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 click ハンドラーが div の全画面モードを切り替えます。もし document.fullscreenElement に値があれば、全画面モードを終了します。そうでなければ、 div は全画面モードに移行します。

+ +

fullscreenchange イベントが処理されたとき、要素の状態はすでに変化していることを思い出してください。よって、全画面モードへ変化した場合は、 document.fullscreenElement が全画面モードになった要素を指します。一方、 document.fullscreenElement が null の場合は、全画面モードが取り消されています。

+ +

すなわち、この例のコードでは、要素が現在全画面モードである場合、 fullscreenchange ハンドラーはコンソールへ全画面の要素の id をログ出力します。 document.fullscreenElement が null の場合は、このコードは全画面モードが終了した旨をログ出力します。

+ +

HTML

+ +
 <h1>fullscreenchange event example</h1>
+ <div id="fullscreen-div">
+   <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
+ </div>
+ +

JavaScript

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

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
Fullscreen APILiving Standard
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.fullscreenchange_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

fullscreenerror イベントは、ブラウザーが全画面モードに切り替えることができなかったときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("Element.onfullscreenerror", "onfullscreenerror")}}
+ +

{{domxref("Element/fullscreenchange_event", "fullscreenchange")}} イベントと同様に、2つの fullscreenerror イベントが発生します。1つ目はモード切替に失敗した {{domxref("Element")}} に送られ、2つ目はその要素を含む {{domxref("Document")}} に送られます。

+ +

全画面モードへの切り替えが失敗する理由の一部は、 Fullscreen API のガイドをお読みください。

+ +

例

+ +
const requestor = document.querySelector('div');
+
+requestor.addEventListener('fullscreenerror', (event) => {
+  console.error('an error occurred changing into fullscreen');
+  console.log(event);
+});
+
+requestor.requestFullscreen();
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.fullscreenerror_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

getAttribute() は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。指定された属性が存在しない場合、値は null か "" (空文字列) のどちらかになります。詳しくは属性が存在しない場合を参照してください。

+ +

構文

+ +
let attribute = element.getAttribute(attributeName);
+
+ +

ここで、

+ + + +

例

+ +
const div1 = document.getElementById('div1');
+const align = div1.getAttribute('align');
+
+alert(align); // id="div1" の要素の align の値を表示します。
+ +

解説

+ +

小文字化

+ +

HTML 文書である DOM の HTML 要素に対して呼び出すと、 getAttribute() は処理前に引数を小文字化します。

+ +

属性が存在しない場合

+ +

基本的にはすべてのウェブブラウザー (限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など) は、指定された要素に指定された属性が存在しない場合は null を返します。これは現在の DOM 仕様書の草稿で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には空文字列となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 getAttribute() の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから getAttribute() を呼び出すべきでしょう。

+ +

ノンス値の受け取り

+ +

セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た CSP のノンスと、 .getAttribute("nonce") の呼び出しは隠蔽されます。

+ +
let nonce =  script.getAttribute('nonce');
+// 空文字列が返される
+
+ +

コンテンツ属性のノンスをるには、代わりに nonce プロパティを使用してください。

+ +
let nonce =  script.nonce;
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.Element.getAttribute")}}

+
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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} インターフェースの getAttributeNames() メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。

+ +

getAttributeNames() を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。

+ +

構文

+ +
let attributeNames = element.getAttributeNames();
+
+ +

例

+ +
// 要素の属性に対して反復処理する
+for(let name of element.getAttributeNames()) {
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+
+ +

代替モジュール

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

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}{{Spec2("DOM WHATWG")}}初回定義
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("api.Element.getAttributeNames")}}

+
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 +--- +

{{ APIRef("DOM") }}

+ +

{{ 英語版章題("Summary") }}

+ +

概要

+ +

指定の要素の指定の属性を Attr ノードとして返します。

+ +

{{ 英語版章題("Syntax") }}

+ +

構文

+ +
var attrNode = element.getAttributeNode(attrName);
+
+ + + +

{{ 英語版章題("Example") }}

+ +

例

+ +
// html: <div id="top" />
+var t = document.getElementById("top");
+var idAttr = t.getAttributeNode("id");
+alert(idAttr.value == "top")
+
+
+ +

{{ 英語版章題("Notes") }}

+ +

注記

+ +

HTML ドキュメントとしてフラグが立てられた DOM 内の HTML 要素で呼び出された場合、getAttributeNode は処理を進める前に引数を小文字にします。

+ +

Attr ノードは Node から継承されますが、ドキュメント・ツリーの一部と考えることはできません。parentNode や previousSibling、nextSibling のような一般の Node 属性は Attr ノードについては null です。しかしながら、ownerElement プロパティでは属性が属している要素を取得することができます。

+ +

要素の属性の値を取得するためには通常 getAttributeNode の代わりに getAttribute を使用します。

+ +

{{ DOMAttributeMethods() }}

+ +

{{ 英語版章題("Specification") }}

+ +

仕様

+ + 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 +--- +

{{ ApiRef("DOM") }}== Summary ==

+ +

概要

+ +

Returns the <code>Attr</code> node for the attribute with the given namespace and name. getAttributeNodeNS は指定の名前空間と名前の属性に対する Attr ノードを返します。== Syntax ==

+ +

構文

+ +
attributeNode = element.getAttributeNodeNS(namespace, nodeName)
+
+ +

* <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.

+ + + +

注記

+ +

<code>getAttributeNodeNS</code> is more specific than getAttributeNode in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is setAttributeNodeNS. getAttributeNodeNS は特定の名前空間の一部である属性を指定できるという点で getAttributeNodeより特殊です。対応するsetterメソッドはsetAttributeNodeNSです。

+ +

{{ DOMAttributeMethods() }}== Specification ==

+ +

仕様

+ +

DOM Level 2 Core: getAttributeNodeNS

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 +--- +

{{ ApiRef("DOM") }}

+ +

概要

+ +

getAttributeNS は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は null または ""(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。

+ +

構文

+ +
attrVal =element.getAttributeNS(namespace,name)
+
+ +

引数

+ + + +

例

+ +
var div1 = document.getElementById("div1");
+var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
+                            "special-align");
+alert(a); // div の align 属性の値を表示します。
+
+ +

注記

+ +

getAttributeNS は getAttribute と異なります。getAttributeNS は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。

+ +

DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは null を返していました。DOM4 以降は、仕様でも null を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら getAttributeNS を呼ぶ前に hasAttributeNS を使用して属性の存在を確かめる必要があります。

+ +

{{ DOMAttributeMethods() }}

+ +

仕様

+ +

DOM Level 2 Core: getAttributeNS

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 +--- +
{{APIRef("DOM")}}
+ +

Element.getBoundingClientRect() メソッドは、要素の寸法と、そのビューポートに対する位置を返します。

+ +

構文

+ +
domRect = element.getBoundingClientRect();
+ +

値

+ +

返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の left, top, right, bottom, x, y, width, height の各プロパティを持つ、要素全体を含む最小の矩形です。 width と height 以外のプロパティは、"ビューポートの左上を基準"としています。

+ +

DOMRect 値の説明

+ +

空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 width と height が 0 で、 top と left は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。

+ +

境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (top, right, bottom, left) が変更されることを意味しています。

+ +

もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する top と left プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。

+ +

クロスブラウザーの代替

+ +

高いクロスブラウザーの互換性を必要とするスクリプトでは、 window.scrollX と window.scrollY の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。

+ +
// 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
+
+ +

例

+ +
// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
+var rect = obj.getBoundingClientRect();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}初回定義
+ +

メモ

+ +

モダンブラウザーでは返された DOMRect オブジェクトを変更することが可能ですが、これは DOMRectReadOnly を返す古いバージョンには該当しません。IE と Edge では、返された ClientRect オブジェクトに対し、見過ごされたプロパティを追加することができず、x と y を補填することができません。

+ +

互換性問題 (下記参照) のため、 left, top, right, bottom のみに頼ることが最も安全です。

+ +

返された DOMRect オブジェクトのプロパティは、自身のプロパティではありません。in 演算子や for...in では返されたプロパティを見つけますが、他の Object.keys() のような API では失敗します。さらに予期しないことに、 Object.assign() のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。

+ +
rect = elt.getBoundingClientRect()
+// emptyObj の結果は {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+
+ +

DOMRect の top, left, right, bottom の各プロパティは他のプロパティ値から計算されます。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.getBoundingClientRect")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

getClientRects() は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの CSS 境界ボックスの境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。

+ +

多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行のインライン要素 (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。

+ +

構文

+ +
let rectCollection = object.getClientRects();
+ +

返値

+ +

返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の left, top, right, bottom の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <svg> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <svg> が確立したビューポートになります (明確にするために、矩形は外部の <svg> の viewBox 変形によっても変換されます)。

+ +

本来、Microsoft はこのメソッドがテキストの各行に対して TextRectangle オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。

+ +

{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で width と height の各プロパティが TextRectangle オブジェクトに追加されました。")}}

+ +

矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。

+ +

返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。

+ +

HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 display:none の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。

+ +

CSS ボックスで境界ボックスが空であっても矩形が返されます。 left, top, right, bottom の各座標はなお意味を持っています。

+ + + +

小数のピクセルオフセットが可能です。

+ +

例

+ +

これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 withClientRectsOverlay クラスを介してマークアップに接続されていることに注意してください。

+ +

HTML

+ +

例 1: このHTMLは、 <span> 要素を含む3つの段落を生成し、それぞれを <div> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <span> 要素には、クライアントの矩形が描画されます。

+ +
<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>
+ +

例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <ol> と 3 番目のブロックの各 <li> 要素に対してクライアントの矩形が描かれています。

+ +
<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>
+ +

例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <table> で描画されます。

+ +
<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>
+ +

CSS

+ +

CSS は、最初の例では各 <div> ブロック内の段落と <span> の周りに、2番目の例では <ol> と <li> の周りに、3番目の例では <table>, <th>, <td> の各要素の周りに境界線を描画します。

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

JavaScript

+ +

JavaScriptコードは、 CSS のクラス withClientRectsOverlay が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。

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

結果

+ +

{{EmbedLiveSample('Examples', 680, 650)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}{{Spec2("CSSOM View")}}初回定義
+ +

補足

+ +

getClientRects() は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.getClientRects")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} の getElementsByClassName() メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 

+ +

{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。

+ +

構文

+ +
var elements = element.getElementsByClassName(names);
+ +

引数

+ +
+
names
+
マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。
+
+ +

戻り値

+ +

names で指定したすべてのクラスを持つすべての要素のリストである live な {{ domxref("HTMLCollection") }} です。

+ +

使用上の注意

+ +

この関数が返すコレクションは常に live です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で names にマッチする新しい要素が追加されたり、サブツリー上にある names にマッチしなかった要素が names にマッチするよう変更された場合、すぐにこのコレクションに追加されます。

+ +

逆もしかりです。names にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。

+ +
+

クラス名は後方互換モードでは大文字・小文字を区別されず、それ以外では区別されます。

+
+ +

例

+ +

単一のクラスとマッチさせる

+ +

単一の指定されたクラスを含む要素を探すには、 getElementsByClassName() を呼び出す際にそのクラス名を指定するだけです。

+ +
element.getElementsByClassName('test');
+ +

この例は main の id を持つ要素の子孫の中で、test クラスをもつ全要素を見つけます。

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

複数のクラスとマッチさせる

+ +

red と test 両方のクラスを含んだ要素を見つけます。

+ +
element.getElementsByClassName('red test');
+ +

結果を調査する

+ +

標準の配列構文や、HTMLCollection の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。colorbox クラスを外した際に、matches がすぐに変更されてしまうからです。

+ +
var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i<matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+
+ +

別の手段を使いましょう。例えば、

+ +
var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length > 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}
+ +

このコードは、"colorbox" クラスを持つ子孫要素を見つけ、item(0)を呼び出して "hueframe" クラスを追加し、（配列表記で） "colorbox" を削除します。その後、（もし残っていれば）別の要素が item(0) になります。

+ +

Arrayメソッドで結果を抽出する

+ +

このメソッドの戻り値を this 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で Array メソッドを使うことができます。次の例では test クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.getElementsByClassName")}}

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 +--- +

{{ ApiRef() }}

+ +

概要

+ +

指定された タグ名 による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。

+ +

構文

+ +
elements = element.getElementsByTagName(tagName)
+
+ + + +
+

Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。

+ +

複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。

+
+ +

例

+ +
// テーブル内のセルの数だけ反復処理します
+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") {
+        // データを取得します
+    }
+}
+
+ +

注意点

+ +

element.getElementsByTagName は、検索対象が指定された要素の子孫要素に限られるという点を除けば、document.getElementsByTagName と似ています。

+ +

仕様書

+ +

DOM Level 2 Core: Element.getElementsByTagName

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}

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 +--- +

{{ ApiRef() }}

+ +

概要

+ +

与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。

+ +

構文

+ +
elements = element.getElementsByTagNameNS(namespaceURI,localName)
+
+ + + +

例

+ +
// 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") {
+        // データを取得
+    }
+}
+
+ +

注意

+ +

element.getElementsByTagNameNS は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。

+ +

仕様

+ +

DOM Level 2 Core: Element.getElementsByTagNameNS

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}

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 +--- +
{{ApiRef}}
+ +

概要

+ +

hasAttribute

+ +

は指定の要素が指定の属性を持つか否かを示す真偽値を返します。

+ +

 

+ +

構文

+ +
var result = element.hasAttribute(attName);
+
+ + + +

例

+ +

対象属性の存在をチェックし、無い場合にのみ属性を設定する例を以下に示します。

+ +
var d = document.getElementById("div1"); // 対象要素を取得
+
+if ( !d.hasAttribute("align") ) {
+  d.setAttribute("align", "center");
+}
+ +

注記

+ +
{{DOMAttributeMethods}}
+ +

仕様書

+ + 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 +--- +

{{ ApiRef() }}

+ +

概要

+ +

hasAttributeNS は現在の要素が指定した属性を所有するか否かを示す boolean 値を返します。

+ +

構文

+ +
result =element.hasAttributeNS(namespace,localName)
+
+ + + +

例

+ +
// 値をセットする前に属性が存在しているか検証します。
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        "http://www.mozilla.org/ns/specialspace/",
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+
+ +

注記

+ +

{{ DOMAttributeMethods() }}

+ +

仕様

+ +

DOM Level 2 Core: hasAttributeNS

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 +--- +
{{ApiRef("DOM")}}
+ +

hasAttributes() は {{domxref("Element")}} インターフェイスのメソッドで、現在の要素が属性を持っているか否かを {{jsxref("Boolean")}} で返します。

+ +

構文

+ +
var result = element.hasAttributes();
+ +

返値

+ +
+
result
+
返値を true または false で保持します。
+
+ +

例

+ +
let foo = document.getElementById('foo');
+if (foo.hasAttributes()) {
+  // Do something with 'foo.attributes'
+}
+
+ +

ポリフィル

+ +
;(function(prototype) {
+  prototype.hasAttributes = prototype.hasAttributes || function() {
+    return (this.attributes.length > 0);
+  }
+})(Element.prototype);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}{{Spec2('DOM WHATWG')}} {{domxref("Node")}} インターフェイスからもっと具体的な {{domxref("Element")}} インターフェイスへ移動した
{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM3 Core')}} {{SpecName("DOM2 Core")}} から変更なし
{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM2 Core')}} {{domxref("Node")}} インターフェイス上で初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.hasAttributes")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} インターフェイスの hasPointerCapture() メソッドは、それを呼び出した要素が、与えられたポインタ ID によって識別されるポインタに対するポインタキャプチャを持つかどうかを示します。

+ +

構文

+ +
targetElement.hasPointerCapture(pointerId);
+ +

パラメーター

+ +
+
pointerId
+
{{domxref("PointerEvent")}} オブジェクトの {{domxref("PointerEvent.pointerId", "pointerId")}}。
+
+ +

戻り値

+ +

{{jsxref("Boolean")}} の値 — 要素がポインタキャプチャを持っている場合は true、持っていない場合は false です。

+ +

例

+ +
<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>
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Pointer Events 2','#dom-element-haspointercapture', 'hasPointerCapture()')}}{{Spec2('Pointer Events 2')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.hasPointerCapture")}}

+ +

関連情報

+ + 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 +--- +
{{ApiRef}}
+ +

概要

+ +

要素の 識別子 (identifier) を取得 / 設定します。

+ +

構文

+ +
idStr =element.id; // 取得
+element.id = idStr; // 設定
+
+ +

注意

+ +

ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 id の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。

+ +

document によっては(特に HTML 、 XUL 、SVG)、要素の id は次のような要素の属性として指定することができます: <div id="part_3">.

+ +

但しカスタム XML 文書に於いては、id 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『getElementById Pitfalls (getElementById の落とし穴)』をご覧下さい。

+ +

id 属性は、スタイルシートでスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した id 属性値の先頭に # を付けます。

+ +
#thisID {
+  background: darkblue;
+  color; ghostwhite;
+}
+ +

id 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "thisID" と "ThisID" は別の id として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : class 属性 / id 属性 / name 属性はケースセンシティブである)

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}} 
+ +

 

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 +--- +
{{APIRef("DOM")}}
+ +

Element は {{DOMxRef("Document")}} の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが Element を継承します。例えば HTML 要素には {{DOMxRef("HTMLElement")}} インターフェイス、SVG 要素には {{DOMxRef("SVGElement")}} インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。

+ +

XUL の XULElement インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element インターフェイスを通じて要素を実装しています。

+ +

{{InheritanceDiagram}}

+ +

プロパティ

+ +

親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のプロパティを実装しています。

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。
+
{{DOMxRef("Element.className")}}
+
{{DOMxRef("DOMString")}} 型であり、要素のクラスを表します。
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
要素の内部の高さを表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
要素の左境界の幅を表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
要素の上境界の幅を表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
要素の内部の幅を表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
特定の要素に適用された ARIA ロールを含む {{DOMxRef("DOMString")}} を返します。
+
{{DOMxRef("Element.id")}}
+
{{DOMxRef("DOMString")}} 型であり、要素の id を表します。
+
{{DOMxRef("Element.innerHTML")}}
+
{{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
要素の名前空間の URI。名前空間がない場合は null になります。 +
+

注: Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで http://www.w3.org/1999/xhtml 名前空間内に存在します。{{gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
{{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ null。
+
{{DOMxRef("Element.outerHTML")}}
+
{{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。
+
{{DOMxRef("Element.part")}}
+
要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
要素の名前空間プレフィックスを表す {{DOMxRef("DOMString")}}。プレフィックスが指定されていない場合は null。
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
{{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ null。
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.scrollLeft")}}
+
{{jsxref("Number")}} 型であり、要素の左スクロールオフセット値を表します。
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
要素で可能な左スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.scrollTop")}}
+
文書の上端が垂直方向にスクロールされた量をピクセル数で表す {{jsxref("Number")}} です。
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
要素で可能な上スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
要素のスクロールビュー幅を表す {{jsxref("Number")}} を返します。
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
オープン・クローズに関係なく、要素が所持している Shadow Root を返します。WebExtensions に限り使用できます。
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
要素が挿入されている shadow DOM スロットの名前を返します。
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
{{jsxref("Boolean")}} 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
要素のタグ名を {{jsxref("String")}} で返します。
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
要素に関連する {{DOMxRef("UndoManager")}} を返します。
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
{{jsxref("Boolean")}} 型であり、要素が undo scope を提供しているか否かを示します。
+
+ +
+

注: DOM Level 3 では、{{DOMxRef("Node")}} インターフェスで namespaceURI、localName、prefix を定義しています。これらは DOM4 で Element に移動されました。

+ +

この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。

+
+ +

Slotable に含まれるプロパティ

+ +

Element インターフェイスは、{{DOMxRef("Slotable")}} ミックスインで定義された以下のプロパティを含んでいます。

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
ノードが挿入されている {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。
+
+ +

イベントハンドラー

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
要素が全画面モードに入ったり出たりしたときに送られる {{event("fullscreenchange")}} イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。
+
{{domxref("Element.onfullscreenerror")}}
+
全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。
+
+ +

メソッド

+ +

親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のメソッドを実装しています。

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
要素に特定のイベント型を扱うイベントハンドラーを登録します。
+
{{DOMxRef("Element.attachShadow()")}}
+
指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
要素で shadow DOM を作成します。その要素は Shadow Host になります。また、{{DOMxRef("ShadowRoot")}} を返します。
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
{{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
要素でアクティブな Animation オブジェクトの配列を返します。
+
{{DOMxRef("Element.getAttribute()")}}
+
現在ノードから指定された名前の付いた属性値を取得して、{{jsxref("Object")}} を返します。
+
{{DOMxRef("Element.getAttributeNames()")}}
+
現在の要素の属性名の配列を返します。
+
{{DOMxRef("Element.getAttributeNS()")}}
+
現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
要素のサイズと、ビューポートにおける位置を返します。
+
{{DOMxRef("Element.getClientRects()")}}
+
クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ {{DOMxRef("HTMLCollection")}} を返します。
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。
+
{{DOMxRef("Element.hasAttribute()")}}
+
要素が指定された指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
要素が指定された名前空間内に指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Element.hasAttributes()")}}
+
要素が現在 1 つ以上の属性をもっているかを示す {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}
+
指定された擬似要素セレクターに一致するこの擬似要素を表す {{DOMxRef("CSSPseudoElement")}} を返します。
+
{{DOMxRef("Element.querySelector()")}}
+
要素に対して、指定したセレクターにマッチする最初の {{DOMxRef("Node")}} を返します。
+
{{DOMxRef("Element.querySelectorAll()")}}
+
要素に対して、指定したセレクターにマッチするノードの {{DOMxRef("NodeList")}} を返します。
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}} 向けに設定したポインターキャプチャーを解放 (停止) します。
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
親要素の子リストから、要素を取り除きます。
+
{{DOMxRef("Element.removeAttribute()")}}
+
現在ノードから，指定された名前を持つ属性を取り除きます。
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
要素からイベントリスナーを取り除きます。
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
指定した要素でポインターをロックするよう、非同期的に要求できます。
+
{{domxref("Element.scroll()")}}
+
指定された要素の中で特定の座標のセットへスクロールします。
+
{{domxref("Element.scrollBy()")}}
+
指定された量だけ要素をスクロールします。
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
要素がビューの内側に来るまでページをスクロールします。
+
{{domxref("Element.scrollTo()")}}
+
指定された要素の中で特定の座標のセットへスクロールします。
+
{{DOMxRef("Element.setAttribute()")}}
+
現在ノードに、指定された名前を持つ属性値を設定します。
+
{{DOMxRef("Element.setAttributeNS()")}}
+
現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。
+
{{DOMxRef("Element.setPointerCapture()")}}
+
以降の pointer イベント のキャプチャー対象とする、特定の要素を指定します。
+
{{DOMxRef("Element.toggleAttribute()")}}
+
指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。
+
+

廃止されたメソッド

+
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
現在ノードから指定された名前の属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
現在ノードから、指定された名前を持つ属性のノード表現を取り除きます。
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
現在ノードに、指定された名前を持つ属性値のノード表現を設定します。
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
現在ノードに、指定された名前と名前空間を持つ属性値のノード表現を設定します。
+
+ +

イベント

+ +

これらのイベントを待ち受けするには、 addEventListener() を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかします。

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。
+ {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。
+
{{domxref("Element/error_event", "error")}}
+
リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。
+ {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティから利用することもできます。
+
{{domxref("Element/scroll_event", "scroll")}}
+
文書のビューまたは要素がスクロールしたときに発生します。
+ {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティから利用することもできます。
+
{{domxref("Element/select_event", "select")}}
+
いくらかのテキストが選択されたときに発生します。
+ {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。
+
{{domxref("Element/show_event", "show")}}
+
{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが contextmenu 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}
+ {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。
+
{{domxref("Element/wheel_event","wheel")}}
+
ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。
+ {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。
+
+ +

クリップボードイベント

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。
+ {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティから利用することもできます。
+
{{domxref("Element/cut_event", "cut")}}
+
ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。
+ {{domxref("HTMLElement/oncut", "oncut")}} プロパティから利用することもできます。
+
{{domxref("Element/paste_event", "paste")}}
+
ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。
+ {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。
+
+ +

構成イベント

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
{{glossary("input method editor")}} のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
{{glossary("input method editor")}} のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
{{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。
+
+ +

フォーカスイベント

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
要素がフォーカスを失ったときに発生します。
+ {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティから利用することもできます。
+
{{domxref("Element/focus_event", "focus")}}
+
要素がフォーカスを受け取ったときに発生します。
+ {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティから利用することもできます。
+
{{domxref("Element/focusin_event", "focusin")}}
+
要素がフォーカスを受け取ろうとしているときに発生します。
+
{{domxref("Element/focusout_event", "focusout")}}
+
要素がフォーカスを失おうとしているときに発生します。
+
+ +

全画面イベント

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
全画面モードへの移行時または終了時に、 {{domxref("Document")}} または {{domxref("Element")}} に送られます。
+
{{domxref("Element.onfullscreenchange", "onfullscreenchange")}} プロパティから利用することもできます。
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
全画面モードへの移行または終了を試みている中でエラーが発生したときに、 Document または Element に送られます。
+
{{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。
+
+ +

キーボードイベント

+ +
+
{{domxref("Element/keydown_event", "keydown")}}
+
キーが押されたときに発生します。
+ {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティから利用することもできます。
+
{{domxref("Element/keypress_event", "keypress")}}
+
文字の値を発生させるキーが押されたときに発生します。 {{deprecated_inline}}
+ {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティから利用することもできます。
+
{{domxref("Element/keyup_event", "keyup")}}
+
キーが離されたときに発生します。
+ {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。
+
+ +

マウスイベント

+ +
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。
+ {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティから利用することもできます。
+
{{domxref("Element/click_event", "click")}}
+
ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。
+ {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティから利用することもできます。
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
ユーザーがコンテキストメニューを開こうとしたときに発生します。
+ {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティから利用することもできます。
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。
+ {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティから利用することもできます。
+
{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
+
要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
ポインティングデバイスのボタンが要素上で押されたときに発生します。
+ {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティから利用することもできます。
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。
+ {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティから利用することもできます。
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。
+ {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティから利用することもできます。
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。
+ {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティから利用することもできます。
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。
+ {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティから利用することもできます。
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。
+ {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティから利用することもできます。
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
ポインティングデバイスのボタンが要素の上で離されたときに発生します。
+ {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティから利用することもできます。
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
trackpadtouchscreen の上の圧力が変化するたびに発生します。
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
{{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発生します。
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。
+
+ +

タッチイベント

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。
+ {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティから利用することもできます。
+
{{domxref("Element/touchend_event", "touchend")}}
+
1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。
+ {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティから利用することもできます。
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
1つ以上のタッチ点がタッチ面上で移動したときに発生します。
+ {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティから利用することもできます。
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
1つ以上のタッチ点がタッチ面に配置されたときに発生します。
+ {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}{{Spec2("CSS4 Pseudo-Elements")}}pseudo() メソッドを追加
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}getAnimations() メソッドを追加
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}undoScope と undoManager プロパティを追加した。
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}イベントハンドラーを追加: ongotpointercapture, onlostpointercapture
+ メソッドを追加: setPointerCapture(), releasePointerCapture()
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}イベントハンドラーを追加: ongotpointercapture, onlostpointercapture
+ メソッドを追加: setPointerCapture(), releasePointerCapture()
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}メソッドを追加: querySelector(), querySelectorAll()
{{SpecName('Pointer Lock', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Lock')}}requestPointerLock() メソッドを追加
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}requestFullscreen() メソッドを追加
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}プロパティを追加: innerHTML, outerHTML
+ メソッドを追加: insertAdjacentHTML()
{{SpecName('CSSOM View', '#extension-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}プロパティを追加: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight
+ メソッドを追加: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}{{DOMxRef("ElementTraversal")}} インターフェイスのインスタンスを追加。
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}メソッドを追加: closest(), insertAdjacentElement(), insertAdjacentText()
+ Moved hasAttributes() from the Node interface to this one.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}メソッドを削除: closest(), setIdAttribute(), setIdAttributeNS(), setIdAttributeNode()
+ getElementsByTag() および getElementsByTagNS() の返値を変更。
+ schemaTypeInfo プロパティを削除。
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}メソッドを追加: setIdAttribute(), setIdAttributeNS(), setIdAttributeNode()。これらのメソッドは実装されず、のちの仕様書で削除されました。
+ schemaTypeInfo プロパティを追加。このプロパティは実装されず、後の仕様で削除されました。
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}normalize() メソッドを {{DOMxRef("Node")}} に移動。
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element")}}

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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

+ +
メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&amp;", "&lt;", "&gt;" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。
+ +

要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。

+ +

構文

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

値

+ +

要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 innerHTML に値を設定すると、要素のすべての子孫を削除して、 htmlString の文字列で与えられた HTML を解析して構築されたノードに置き換えます。

+ +

例外

+ +
+
SyntaxError
+
正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。
+
NoModificationAllowedError
+
親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。
+
+ +

使用上のメモ

+ +

innerHTML プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。

+ +

要素の HTML コンテンツの読み取り

+ +

innerHTML を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。

+ +
let contents = myElement.innerHTML;
+ +

これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。

+ +
+

メモ: 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。

+
+ +

要素の中身の置き換え

+ +

innerHTML の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。

+ +

例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。

+ +
document.body.innerHTML = "";
+ +

この例は文書の現在の HTML マークアップを走査し、 "<" の文字を HTML エンティティの "&lt;" に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 innerHTML の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Operational details

+ +

innerHTML に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。

+ +
    +
  1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。
    2. +
  2. 中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <template> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい DocumentFragment で置き換えます。
    3. +
  3. その他の要素はすべて、要素の内容を新しい DocumentFragment のノードで置き換えます。
    4. +
+ +

セキュリティの考慮事項

+ +

ウェブページにテキストを挿入するために innerHTML を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。

+ +
const name = "John";
+// 'el' を HTML の DOM 要素と想定します
+el.innerHTML = name; // この場合は無害
+
+// ...
+
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // この場合は無害
+ +

これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では innerHTML で挿入された {{HTMLElement("script")}} タグは実行するべきではないと定義しているからです。

+ +

しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために innerHTML を使用するたびに、セキュリティリスクは残ります。

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // アラートが表示される
+ +

このため、プレーンテキストを挿入するときには innerHTML を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。

+ +
+

警告: プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 innerHTML は多くの場合、コードが拒絶される結果になります。例えば、ブラウザー拡張機能の中で innerHTML を使用した場合、拡張機能を addons.mozilla.org に提出すると、自動レビュープロセスを通過できないでしょう。

+
+ +

例

+ +

この例は innerHTML を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。

+ +

JavaScript

+ +
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...");
+
+ +

log() 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから "log" クラスのボックスにメッセージを追加します。

+ +

{{domxref("MouseEvent")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。

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

HTML

+ +

この例の HTML はとても単純です。

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

"box" クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが "log" である <div> は、ログテキスト自身のコンテナーです。

+ +

CSS

+ +

以下の 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;
+}
+ +

結果

+ +

結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

関連情報

+ + 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 +--- +
{{ApiRef("DOM")}}
+ +

概要

+ +

insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。

+ +

構文

+ +
element.insertAdjacentHTML(position, text);
+ +

position には element に対する相対位置を、以下に示す文字列の1つで指定します。

+ +
+
'beforebegin'
+
element の直前に挿入
+
'afterbegin'
+
element 内部の、最初の子要素の前に挿入
+
'beforeend'
+
element 内部の、最後の子要素の後に挿入
+
'afterend'
+
element の直後に挿入
+
+ +

text には HTML または XML としてパースし DOM ツリーに挿入することが可能な文字列を指定します。

+ +

ポジション名の可視化

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
注記: beforebegin および afterend の位置指定で動作するのは、ノードがツリー内にあり、かつ親要素が存在する場合のみとなります。
+ +

例

+ +
// <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>
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート1.0{{ CompatGeckoDesktop("8.0") }}4.07.04.0 (527)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

関連情報

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

insertAdjacentText() メソッドは、与えられたテキストノードを、メソッドを実行した要素に対する相対的な位置に挿入します。

+ +

構文

+ +
element.insertAdjacentText(position, element);
+ +

パラメーター

+ +
+
position
+
element に対する相対的な位置を {{domxref("DOMString")}} 表現で指定します。次の文字列のうち1つを取ります。 +
    +
  • 'beforebegin': element 本体の前。
    • +
  • 'afterbegin': element のすぐ内側の、最初の子要素の前。
    • +
  • 'beforeend': element のすぐ内側の、最後の子要素の後。
    • +
  • 'afterend':element 本体の後。
    • +
+
+
element
+
DOM ツリーに挿入するテキストの {{domxref("DOMString")}} 表現。
+
+ +

返り値

+ +

Void。

+ +

例外

+ + + + + + + + + + + + + + +
例外説明
SyntaxErrorposition として指定した文字列が認識できない値だった。
+ +

ポジション名の視覚的な表現

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
注記: beforebegin および afterend の positions が使えるのは、対象ノードがツリーの中にあって、親要素を持つ時に限られます。
+ +
beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});
+ +

私たちが GitHub に用意した insertAdjacentText.html デモを見てください。(同時に source code も読んでください。) ここにはシンプルなパラグラフが1つあります。フォーム要素に好きなテキストを入力してから、Insert before または Insert after ボタンを押すと、insertAdjacentText() が、入力したテキストをパラグラフのテキストの前または後に挿入します。すでにあるテキストノードにテキストが追加されるのではなく、新しい追加テキストが含まれる別のテキストノードが生成されて、それが追加されることに注意してください。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }} 
+ +

ブラウザー間の互換性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("48.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{ CompatUnknown() }}{{ CompatGeckoMobile("48.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

関連項目

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.localName 読み取り専用プロパティは、要素の修飾名のローカル部分を返します。

+ +
+

DOM4 より前、この API は {{domxref("Node")}} の中で定義されていました。

+
+ +

構文

+ +
name = element.localName
+
+ +

返り値

+ +

要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}}。

+ +

例

+ +

（text/xml や application/xhtml+xml のような、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>
+
+ +

注

+ +

ノードのローカル名は、ノードの修飾名の、コロンの後に続く部分です。修飾名は一般に、XML において、特定の XML 文書の名前空間の一部として使われます。例えば、ecomm:partners という修飾名において、 partners はローカル名、ecomm は接頭辞です。

+ +
<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>
+
+ +
+

注: {{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要素では大文字で返します。

+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('DOM4', '#interface-element', 'Element.localName')}}{{Spec2('DOM4')}}初めての定義
+ +

ブラウザ互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] この API は以前、{{domxref("Node")}} API で利用可能でした。

+ +

参考情報

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

matches() メソッドは、その要素 ({{domxref("Element")}}) が指定された selectorString によって選択されるかをチェックします。言い換えれば、要素「が」セレクターであることをチェックします。

+ +

構文

+ +
var result = element.matches(selectorString);
+
+ +

引数

+ +

selectorString は、テストするためのセレクターを表す文字列です。

+ +

返値

+ +

result は {{domxref("Boolean")}} です。

+ +

例外

+ +
+
SYNTAX_ERR
+
指定されたセレクター文字列が無効である場合。
+
+ +

例

+ +
<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>
+
+ +

要素が実際に値 endangered 持つ class 属性を持つので、これは、コンソールのログに "The Philippine eagle is endangered!" と表示されます。

+ +

ポリフィル

+ +

Element.matches() や Element.matchesSelector() には対応していないが、 document.querySelectorAll() には対応しているブラウザーには、ポリフィルが存在します。

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

しかし、古いブラウザーに対応することの実用性を考えると、実用的なケース (言い換えると IE9 以降の対応) ではほとんどの場合 (全部ではない)、次のもので十分です。

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.removeAttribute")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

mousedown イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたときに {{domxref("Element")}} に発行されます。

+ +
+

注: {{domxref("Element/click_event", "click")}} イベントとの違いは、 click イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 mousedown はボタンが最初に押された時点で発行されます。

+
+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
+ +

例

+ +

{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mousedown_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

mouseenter イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+ +

使用上の注意

+ +

mouseenter は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。

+ +
+
mouseenter.png
+要素の階層に入った場合、それぞれの要素に1つずつ mouseenter が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。 + +
mouseover.png
+DOM ツリーの最も深い要素に1つの mouseover イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。
+ +

深い階層では、数多くの mouseenter イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は mouseover イベントを待ち受けした方が優れています。

+ +

対応する (マウスがコンテンツ領域から出たときに要素に発生する) mouseleave と組み合わせると、 mouseenter イベントは CSS の {{cssxref(':hover')}} 疑似クラスととても似た方法で動作します。

+ +

例

+ +

mouseover のドキュメントには、 mouseover と mouseenter の間の違いを説明する例があります。

+ +

mouseenter

+ +

以下は端的な例ですが、 mouseenter イベントを使用して、マウスが割り当てられた空間に入ったときに div の境界を変化させます。そして、リストに mouseenter または mouseleave イベントの回数を示す項目を追加します。

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

div を整形してもっと目立つようにします。

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample('mouseenter')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの対応

+ +

{{Compat("api.Element.mouseenter_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

mouseleave イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
+ +

mouseleave と {{event('mouseout')}} はよく似ていますが、 mouseleave はバブリングしないのに対して mouseout はバブリングするという点が異なります。すなわち mouseleave はポインターがその要素およびすべての子孫を出たときに発行されるのに対し、 mouseout はポインターがその要素またはその要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。

+ +
+
mouseenter.png
+ +

階層内のそれぞれの要素からポインターが出たとき、 mouseleave イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが4つの要素の階層にあるテキストから div が表す領域の外に出ると、4つのイベントが4つの要素に送られます。

+ +
mouseover.png
+ +

単一の mouseout イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。

+
+ +

例

+ +

mouseout のドキュメントには、 mouseout と mouseleave との違いを説明する例があります。

+ +

mouseleave

+ +

次の例では mouseenter イベントを使用して、マウスが <div> に割り当てられた空間に入ったときにその境界線を変更しています。次に、 mouseenter イベントまたは mouseleave イベントの番号を指定してリストに項目を追加します。

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

<div> がもっと目立つようにスタイル付けします。

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample('mouseleave')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mouseleave_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

mousemove イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
+ +

例

+ +

次の例は、 {{domxref("Element/mousedown_event", "mousedown")}}, mousemove, and {{domxref("Element/mouseup_event", "mouseup")}} イベントを使って HTML5 の要素である canvas の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。

+ +

ページが読み込まれると、定数 myPics と context が、それぞれ canvas と描画に使用する 2d context の参照を格納するために生成されます。

+ +

mousedown イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 x と y に格納され、フラグ isDrawing の値が true になります。

+ +

ページ上でマウスを動かすと、 mousemove イベントが発行されます。 isDrawing が true である場合、 drawLine 関数を呼び出して x と y に格納された値から現在の位置まで線を引きます。

+ +

drawLine() 関数の返値は、座標を再調整して x と y に保存します。

+ +

mouseup イベントで線の最後の区間を描画し、 x と y をそれぞれを 0 に設定し、その後の描画を止めるために isDrawing を false に設定します。

+ +

HTML

+ +
<h1>マウスイベントを使ったお絵かき</h1>
+<canvas id="myPics" width="560" height="360"></canvas>
+
+ +

CSS

+ +
canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample("Examples", 640, 450)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mousemove_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

mouseout イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 mouseout は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
+ +

例

+ +

以下の例は mouseout イベントの使い方を示しています。

+ +

mouseout と mouseleave

+ +

以下の例は、 mouseout と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 mouseleave イベントを {{HTMLElement("ul")}} に追加し、マウスが <ul> を出るたびにリストを紫色に着色するようにします。 mouseout をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

+ +

これを試してみると、 mouseout はそれぞれのリスト項目に配信されるのに対し、 mouseleave は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul> を不明瞭にします。

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mouseout_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

mouseover イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
+ +

例

+ +

以下の例は、 mouseover と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mouseover_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

mouseup イベントは、 {{domxref("Element")}} においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが話されたときに発生します。 mouseup イベントは {{domxref("Element.mousedown_event", "mousedown")}} イベントに対応します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
+ +

例

+ +

{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.mouseup_event")}}

+ +

関連情報

+ + 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 +--- +

{{ ApiRef() }}

+

概要

+

name はDOM オブジェクトのname 属性を取得または設定します。

+

ただし、この属性が適用されるのは次の要素に限られます。

+

{{ 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") }}.

+

name は、 {{ domxref("document.getElementsByName()") }} メソッドか、 form と form.elements のコレクションで使用することができます。 form や form.elements のコレクションで使われた場合、一つの要素かコレクションを返します。

+

構文

+
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+

例

+
<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>
+
+

注記

+

Internet Explorer (IE)では、 {{ domxref("document.createElement()") }}を使って作成されたDOM オブジェクトの name 属性 は、設定および変更をすることができません。

+

仕様

+

W3C DOM 2 HTML Specification:

+ +

{{ languages( { "en" :"en/DOM/element.name", "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}

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 +--- +
{{ApiRef("Fullscreen API")}}
+ +

{{domxref("Element")}} インターフェイスの onfullscreenchange プロパティは、 {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} イベントのイベントハンドラーで、要素が全画面モードへ移行するか、終了するときに発生します。

+ +

構文

+ +
targetDocument.onfullscreenchange = fullscreenChangeHandler;
+
+ +

値

+ +

{{event("fullscreenchange")}} イベントのイベントハンドラーで、要素が全画面モードへ移行または終了したことを示します。

+ +

例

+ +

この例では fullscreenchange イベントのハンドラーである handleFullscreenChange() を作成します。この関数は {{domxref("event.target")}} のチェックしてどの要素に対して呼び出されたのかを判別し、文書の {{domxref("Document.fullscreenElement", "fullscreenElement")}} の値と要素を比較して、同じノードであるかどうかを確認します。

+ +

これを isFullscreen の値に設定して adjustMyControls() という関数に渡し、これがウィンドウ内が全画面モードで表示されているときにアプリのユーザーインターフェイスが最適に表示されるように調整する関数になると想像してください。

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

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}{{Spec2("HTML WHATWG")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.onfullscreenchange")}}

+ +

関連情報

+ + 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 +--- +
{{ApiRef("Fullscreen API")}}
+ +

{{domxref("Element")}} インターフェイスの onfullscreenchange プロパティは {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} イベントのイベントハンドラーで、要素が全画面モードへ移行するか、終了するときにエラーが発生したときに発生します。

+ +

構文

+ +
targetElement.onfullscreenerror = fullscreenErrorHandler;
+
+ +

値

+ +

{{domxref("Element/fullscreenerror_event", "fullscreenerror")}} イベントのエラーハンドラーです。

+ +

例

+ +

この例は、ユーザーが主導するイベント ({{domxref("Element/click_event", "click")}} や {{domxref("Element/keypress_event", "keypress")}} イベントなど) のハンドラーの外から全画面モードへの切り替えを試みます。全画面モードへの意向は、ユーザー入力への応答の中からしか許可されていないため、これによってエラーが発生し、 {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} イベントをエラーハンドラーに配信します。

+ +
let elem = document.querySelector("video")}}
+
+elem.onfullscreenerror = function ( event ) {
+  displayWarning("Unable to switch into full-screen mode.");
+};
+
+//....
+
+elem.requestFullscreen();
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#dom-element-onfullscreenerror", "onfullscreenerror")}}{{Spec2("HTML WHATWG")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.onfullscreenerror")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

outerHTML は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。

+ +

要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。

+ +

構文

+ +
var content = element.outerHTML;
+
+element.outerHTML = htmlString;
+
+ +

値

+ +

outerHTML の値を読み取ると、 element およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。

+ +

例外

+ +
+
SyntaxError
+
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
+
NoModificationAllowedError
+
outerHTML を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
+
+ +

例

+ +

要素の outerHTML プロパティの値を得る例を示します。

+ +
// 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>'
+// が、コンソールウィンドウに出力されます。
+
+ +

次の例では、 outerHTML プロパティに値を設定し、ノードを置換します。

+ +
// 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 要素はもはや文書ツリーの一部ではなく、
+// 新たな段落に置き換えられました。
+
+ +

メモ

+ +

要素が親要素を持たない場合、その outerHTML プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。

+ +
var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+ +

また、文書の中で要素が置換された場合も、 outerHTML プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。

+ +
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" のまま
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.outerHTML")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

paste イベントは、ユーザーがブラウザーのユーザーインターフェイスで「貼り付け」操作を行ったときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/onpaste", "onpaste")}}
+ +

カーソルが編集可能なコンテキストにある場合 ({{HTMLElement("textarea")}} や contenteditable 属性が true である要素など)、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。

+ +

このイベントのハンドラーは、イベントの clipboardData プロパティにある {{domxref("DataTransfer/getData", "getData()")}} を呼び出すことでクリップボードの中身にアクセスすることができます。

+ +

既定の動作を上書きする場合 (例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など)、イベントハンドラーで {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。

+ +

統合的な paste イベントを構築して配信することができますが、文書の内容には影響しません。

+ +

例

+ +

ライブデモ

+ +

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>
+ + + +

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

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '100px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-paste')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.paste_event")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.prefix 読み取り専用プロパティは、指定された要素の名前空間プレフィックスを、プレフィックスが指定されていない場合は null を返します。

+ +
+

DOM4以前、このAPIは {{domxref("Node")}} インターフェイスで定義されていました。

+
+ +

構文

+ +
string = element.prefix
+
+ +

例

+ +

以下はコンソールに "x" を記録します。

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

注

+ +

これは名前空間を認識するパーサが使われている場合、すなわち文書がXMLのMIMEタイプで送られているときのみ働き、HTML文書では働かないでしょう。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('DOM WHATWG', '#dom-element-prefix', 'Element: prefix')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザ互換性

+ + + +

{{Compat("api.Element.prefix")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

対象要素の子孫の内、引数に指定したCSSセレクタにマッチする最初の要素を返します。

+ +

構文

+ +
element = baseElement.querySelector(selectors);
+
+ + + +

例

+ +

次の例では、type属性を持たないか､text/cssをtype属性として持つ、ドキュメントボディーの中で最初のstyle要素が返却されます。

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

注記

+ +

マッチする要素が無い場合はnullを返します。その他の場合は､最初にマッチした要素を返します。

+ +

指定されたセレクタが不正である場合、例外「SYNTAX_ERR」がスローされます。

+ +

Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

+ +

querySelector()はWebApps API仕様で定義されました。

+ +

querySelectorに渡す文字列はCSSの文法に則る必要があります。{{domxref("document.querySelector")}}で実例を見て下さい。

+ +

ブラウザ実装状況

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserSupportNotes
Internet Explorer8CSS 2.1 selectors only (IE8)
Firefox (Gecko)3.5 (1.9.1) 
Opera10 
Chrome1 
Safari (webkit)3.2 (525.3)webk.it/16587
+ +

仕様書

+ + + +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} の querySelectorAll() メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。

+ +
+

注: このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。

+
+ +

構文

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

引数

+ +
+
selectors
+
マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}} です。この文字列は妥当な CSS セレクター文字列でなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の特定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。
+
+ +
+

注: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。

+
+ +

戻り値

+ +

指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。

+ +
+

メモ: 指定した selectors にCSS 疑似要素が含まれている場合、返されるリストは常に空になります。

+
+ +

例外

+ +
+
SyntaxError
+
指定した selectors の構文が妥当ではない。
+
+ +

例

+ +

dataset セレクターと属性セレクター

+ +
<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>
+
+ +
// 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"]`)];
+
+ +

一致のリストを入手する

+ +

次の例では、myBox 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。

+ +
var matches = myBox.querySelectorAll("p");
+
+ +

次の例では、mybox 内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+
+ +

次の例では、test という ID を持つコンテナー内に位置し、直接の親要素が highlighted のクラスを持つ {{domxref("div")}} である p 要素のリストを取得します。

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

次の例では、属性セレクターを使って、文書内にある、 data-src 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。

+ +
var matches = domument.querySelectorAll("iframe[data-src]");
+
+ +

次の例では、属性セレクターを使って、「ID が userlist である要素内の、data-active 属性を持ち、その値が 1 である要素群」のリストを返します。

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

一致したリストへアクセスする

+ +

一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (length プロパティが 0 である) 場合は、一致がなかったということです。

+ +

それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +
+

注: NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。

+
+ +

特殊な例

+ +

querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

+ +

HTML

+ +

次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

この例では、"select" class を持つ <div> の文脈で ".outer .inner" を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、".inner" class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

+ +

{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}変更なし
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}初期定義
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}}初期定義
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.Element.querySelectorAll")}}

+
+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} インターフェイスの releasePointerCapture() メソッドは、特定の（{{domxref("PointerEvent")}}）ポインタに対して以前に設定されたポインタキャプチャを解放（停止）します。

+ +

ポインタキャプチャの説明と特定の要素に設定する方法については、{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}} メソッドを参照してください。

+ +

構文

+ +
targetElement.releasePointerCapture(pointerId);
+
+ +

パラメーター

+ +
+
pointerId
+
{{domxref("PointerEvent")}} オブジェクトの {{domxref("PointerEvent.pointerId", "pointerId")}}。
+
+ +

戻り値

+ +

このメソッドは undefined を返します。

+ +

例外

+ + + + + + + + + + + + + + +
例外説明
InvalidPointerIdpointerId は、どのアクティブポインタとも一致しません。
+ +

例

+ +

この例では、{{HtmlElement("div")}} を押下するとポインタキャプチャが設定されます。 これにより、ポインタをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。

+ +

HTML

+ +
<div id="slider">SLIDE ME</div>
+ +

CSS

+ +
div {
+  width: 140px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fbe;
+}
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Pointer Events 2','#idl-def-element-releasepointercapture-pointerid', 'releasePointerCapture')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#idl-def-element-releasepointercapture-pointerid', 'releasePointerCapture')}}{{Spec2('Pointer Events')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.releasePointerCapture")}}

+ +

関連情報

+ + 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 +--- +
{{ APIRef("DOM") }}
+ +

{{domxref("Element")}} の removeAttribute() メソッドは、指定された名前の属性を要素から削除します。

+ +

構文

+ +
element.removeAttribute(attrName);
+
+ +

Parameters

+ +
+
attrName
+
{{domxref("DOMString")}} で、要素から削除する属性の名前を指定します。指定された属性が存在しない場合、 removeAttribute() はエラーを発生させずに戻ります。
+
+ +

返値

+ +

undefined です。

+ +

使用上の注意

+ +

属性の値を直接、または {{domxref("Element.setAttribute", "setAttribute()")}} を使用して null に設定するのではなく、 removeAttribute() を使用してください。多くの属性は null に設定しても、期待通りの動作をしません。

+ +

{{ DOMAttributeMethods() }}

+ +

例

+ +
// Given: <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// Now: <div id="div1" width="200px">
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-element-removeattribute', 'Element" removeAttribute')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.removeAttribute")}}

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 +--- +

{{ ApiRef("DOM") }}

+ +

Summary

+ +

removeAttributeNode removes the specified attribute from the current element.

+ +

Syntax

+ +
removedAttr =element.removeAttributeNode(attributeNode)
+
+ + + +

Example

+ +
// <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" />
+
+ +

Notes

+ +

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.

+ +

{{ DOMAttributeMethods() }}

+ +

Specification

+ +

DOM Level 2 Core: removeAttributeNode (introduced in DOM Level 1 Core)

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 +--- +

<breadcrumbs></breadcrumbs>{{ ApiRef("DOM") }}== Summary ==

+ +

概要

+ +

<code>removeAttributeNS</code> removes the specified attribute from an element. removeAttributeNS 要素から指定の属性を取り除きます。

+ +

{{ fx_minversion_inline("3") }} In Firefox 3 and later, this method resets DOM values to their defaults. {{ Fx_minversion_inline("3") }} Firefox 3以降ではこのメソッドはDOMの値をデフォルト値にリセットします。== Syntax ==

+ +

構文

+ +
element.removeAttributeNS(namespace,attrName);
+
+ +

* <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.

+ + + +

例

+ +
// <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" />
+
+ +

注記

+ +

{{ DOMAttributeMethods() }}== Specification ==

+ +

仕様

+ +

DOM Level 2 Core: removeAttributeNS

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 +--- +
{{APIRef("Fullscreen API")}}
+ +

Element.requestFullscreen() メソッドは、要素を全画面表示するための非同期的な要求を発行します。

+ +

要素が全画面モードに移行することは保証されていません。全画面モードに移行する許可が与えられている場合は、返される {{jsxref("Promise")}} が解決され、文書が全画面モードになったことを知ることができる {{event("fullscreenchange")}} イベントを受け取るようになります。権限が拒否された場合は、代わりに {{event('fullscreenerror')}} イベントを受け取ります。

+ +

このメソッドはユーザーの操作又は機器の方向の変更によって呼び出す必要があり、そうでなければ失敗します。

+ +
+

全画面で表示することができる要素は、 HTML 名前空間にあり (つまり、標準の HTML の要素であり)、加えて {{HTMLElement("svg")}} 要素や {{HTMLElement("math")}} 要素、文書の最上位にある要素、又は {{htmlattrxref("allowfullscreen", "iframe")}} 属性を持つ {{HTMLElement('iframe')}} だけです。すなわち、 {{HTMLElement('frame')}} や {{HTMLElement('object')}} の内部にある要素は全画面で表示できません。

+
+ +

構文

+ +
var Promise = Element.requestFullscreen();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

全画面への移行が完了した場合は、 undefined の値で解決した {{jsxref("Promise")}}。

+ +

例外

+ +

全画面のリクエストが失敗した場合は、 Promise が例外で拒否されるかもしれません。発生しうる例外は以下の通りです。

+ + + +
+
{{jsxref("TypeError")}}
+
以下の状況の一つが発生する可能性あります。
+
+ +

例

+ +

requestFullscreen() を呼び出す前に、 {{event("fullscreenchange")}} 及び {{event("fullscreenerror")}} イベントのハンドラーを設定してください。そうすれば、いつ全画面モードに切り替えることに成功したか (又は権限がなくて拒否されたか) を知ることができます。

+ +

tbd

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullscreen()")}}{{Spec2("Fullscreen")}}初回定義
+ +

ブラウザーの対応

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefoxInternet ExplorerEdgeOperaSafari
基本対応{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} mozRequestFullScreen として対応[2]
+ {{CompatGeckoDesktop("47.0")}} (full-screen-api.unprefix.enabled で制御)		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
Promise の返却{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能Chrome AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本対応{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}} mozRequestFullScreen として対応 [2]
+ {{CompatGeckoMobile("47.0")}} (full-screen-api.unprefix.enabled で制御)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Promise の返却{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] webkitRequestFullscreen としても実装されています。

+ +

[2] mozRequestFullScreen として実装されています (Screen の S は大文字です)。 Firefox 44 より前のバージョンでは、誤って {{HTMLElement('frame')}} や {{HTMLElement('object')}} の内部にある要素の要求も受け入れて、許可されれば全画面表示していました。これは Firefox 44 以降で修正済みです。文書の最上位にある要素、または {{htmlattrxref("allowfullscreen", "iframe")}} 属性を持つ {{HTMLElement('iframe')}} だけが全画面モードで表示できます。

+ +

[3] MSDN の文書をご覧ください。

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

scroll イベントは、要素がスクロールしたときに発行されます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}
+ +
+

注: iOS の UIWebViews では、 scroll イベントはスクロールしている最中には発行されません。スクロールが完了した後に発行されます。 Bootstrap issue #16202 を参照してください。 Safari と WKWebViews はこのバグの影響を受けません。

+
+ +

例

+ +

スクロールイベントの間引き

+ +

scroll イベントは高い頻度で発行されるため、イベントハンドラーで DOM の変更のような計算が重い操作を実行するべきではありません。代わりに、次のように {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}}, {{DOMxRef("CustomEvent")}} などを使用してイベントを間引くことをお勧めします。

+ +

なお、ただし、 input イベントやアニメーションフレームがおよそ同じ頻度で発行されるため、以下の最適化は必要ないことがあります。この例は requestAnimationFrame の scroll イベントを最適化します。

+ +
// 参照: 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;
+  }
+});
+ +
+

注: それ以外例が {{domxref("Document/resize_event", "resize")}} イベントページにあります。

+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.scroll_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

scrollBy() は {{domxref("Element")}} インターフェイスのメソッドで、指定された量だけ要素をスクロールします。

+ +

構文

+ +
element.scrollBy(x-coord, y-coord);
+element.scrollBy(options)
+
+ +

引数

+ + + +

- または -

+ + + +

例

+ +
// 要素をスクロール
+element.scrollBy(300, 300);
+
+ +

options を使用する場合:

+ +
element.scrollBy({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSSOM View', '#dom-element-scrollby-options-options', 'element.scrollBy()') }}{{ Spec2('CSSOM View') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.scrollBy")}}

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 +--- +
{{APIRef("DOM")}}
+ +

Element.scrollHeight は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の幅の寸法です。

+ +

scrollHeight の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の幅を含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その scrollHeight は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。

+ +
+

このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
elemScrollHeight = element.scrollHeight;
+ +

値

+ +

整数値で、要素の scrollHeight ピクセル値に対応します。

+ +

例

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

問題と解決方法

+ +

要素が完全にスクロールされたかどうかを判定する

+ +

次の等式は、要素がスクロールの終点にあると true になり、それ以外は false になります。

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+
+ +

コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。

+ +
window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'
+
+ +

scrollHeight のデモ

+ +

{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：

+ +

HTML

+ +
<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>
+ +

CSS

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

JavaScript

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

{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.scrollHeight")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +
{{domxref("Element")}} インターフェイスの scrollIntoView() メソッドは、 scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。
+ +

構文

+ +
element.scrollIntoView();
+element.scrollIntoView(alignToTop); // 論理型の引数
+element.scrollIntoView(scrollIntoViewOptions); // オブジェクト型の引数
+
+ +

引数

+ +
+
alignToTop {{optional_inline}}
+
{{jsxref("Boolean")}} 値です。 +
    +
  • true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。これが既定値です。
    • +
  • false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 scrollIntoViewOptions: {block: "end", inline: "nearest"} に相当します。
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
以下のプロパティを持つオブジェクトです。
+
+
+
behavior {{optional_inline}}
+
推移のアニメーションを定義します。
+ auto または smooth のどちらかです。既定値は auto です。
+
block {{optional_inline}}
+
垂直方向の配置を定義します。
+ start, center, end, nearest の何れかです。既定値は start です。
+
inline {{optional_inline}}
+
水平方法の配置を定義します。
+ start, center, end, nearest の何れかです。既定値は nearest です。
+
+
+
+ +

例

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+
+ +

メモ

+ +

他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.scrollIntoView")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。

+ +

要素の {{cssxref("direction")}} が rtl (right-to-left、右書き) の場合、 scrollLeft が 0 のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。

+ +
+

画面拡大を使用するシステムでは、 scrollLeft が小数になることがあります。

+
+ +

構文

+ +

値の取得

+ +
// スクロールしたピクセル数を取得
+var sLeft = element.scrollLeft;
+
+ +

sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。

+ +

値の設定

+ +
// スクロールしたピクセル数を設定
+element.scrollLeft = 10;
+
+ +

scrollLeft は任意の整数値で設定することができます。しかし、

+ + + +

例

+ +

HTML

+ +
<div id="container">
+  <div id="content">ボタンをクリックすると右にスライドします。</div>
+</div>
+
+<button id="slide" type="button">右へスライド</button>
+ +

CSS

+ +
#container {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-x: scroll;
+}
+
+#content {
+  width: 250px;
+  background-color: #ccc;
+}
+ +

JavaScript

+ +
const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollLeft += 20;
+};
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.scrollLeft")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

scrollTo() は {{domxref("Element")}} インターフェイスのメソッドで、指定された要素内を指定された座標までスクロールします。

+ +

構文

+ +
element.scrollTo(x-coord, y-coord)
+element.scrollTo(options)
+
+ +

引数

+ + + +

- または -

+ + + +

例

+ +
element.scrollTo(0, 1000);
+
+ +

options を使用する場合:

+ +
element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.scrollTo")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.scrollTop プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。

+ +

要素の scrollTop の値は、要素の上から最も上の表示されているコンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 scrollTop の値は 0 になります。

+ +

scrollTop がルート要素 (<html> 要素) に対して使用されると、ウィンドウの scrollY が返されます。 これは scrollTop の特例です。

+ +
+

画面の拡大縮小を使用するシステムでは、 scrollTop が小数になることがあります。

+
+ +

構文

+ +
// スクロールしたピクセル数を取得
+var intElemScrollTop = someElement.scrollTop;
+
+ +

このコードを実行した後、 intElemScrollTop はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。

+ +
// スクロールするピクセル数を設定
+element.scrollTop = intValue;
+
+ +

scrollTop は任意の整数値で設定することができます。しかし、

+ + + +

例

+ +
+
+

padding-top

+If you can see this, scrollTop = 0 + +

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.

+If you can see this, scrollTop is > 0 + +

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.

+If you can see this, scrollTop is maxed-out + +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.scrollTop")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.scrollWidth は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。

+ +

scrollWidth の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 scrollWidth は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。

+ +
+

このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。

+
+ +

構文

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth はピクセル単位の element のコンテンツの幅です。

+ +

例

+ +
<!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>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}{{Spec2("CSSOM View")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.scrollWidth")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}
+ +

select イベントは、いくらかのテキストが選択されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイスユーザーインターフェイスから作成された場合は {{domxref("UIEvent")}}、それ以外ならば {{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onselect", "onselect")}}
+ +

このイベントはすべての言語のすべての要素で利用できる訳ではありません。例えば、 HTML では、 select イベントはフォームの {{HtmlElement('input/text', '<input type="text">')}} および {{HtmlElement("textarea")}} 要素からのみ発生します。

+ +

例

+ +

選択範囲をログ出力

+ +
<input value="この要素のテキストの一部を選択してみてください。">
+<p id="log"></p>
+ +
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);
+ +

{{EmbedLiveSample("Selection_logger")}}

+ +

onselect による同等の処理

+ +

イベントハンドラーを {{domxref("GlobalEventHandlers.onselect", "onselect")}} プロパティで設定することもできます。

+ +
input.onselect = logSelection;
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-select', 'select')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.select_event")}}

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 +--- +
+ {{ApiRef}}
+

概要

+

指定の要素に新しい属性を追加します。または指定の要素に存在する属性の値を変更します。

+

構文

+
element.setAttribute(name,value);
+
+ +

例

+
var d = document.getElementById("d1");
+
+d.setAttribute("align", "center");
+

注記

+

指定の属性が既に存在しているときはその属性の値はこの関数に渡された値に変更されます。もし存在しなければ属性は新しく作成されます。

+

getAttribute() は存在しない属性に対し null を返しますが、属性を取り除く為には + + elt + .setAttribute( + + attr + , null) を使うのではなく、removeAttribute() を使用するべきです。

+

setAttribute() を使ってある属性、XUL や HTML の特別な値、および HTML の選択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となります。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例として、 + + elt + .setAttribute('value', + + val + ) の代わりに + + elt + .value を使用します。

+
+ {{DOMAttributeMethods}}
+

仕様

+ 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 +--- +

{{ ApiRef("DOM") }}

+ +

Summary

+ +

setAttributeNode() adds a new Attr node to the specified element.

+ +

Syntax

+ +
replacedAttr =element.setAttributeNode(attribute)
+
+ + + +

Example

+ +
// <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'
+
+ +

Notes

+ +

If the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.

+ +

This method is seldom used, with setAttribute() usually being used to change element's attributes.

+ +

{{ DOMAttributeMethods() }}

+ +

Specification

+ +

DOM Level 2 Core: setAttributeNode (introduced in DOM Level 1 Core)

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 +--- +

<breadcrumbs></breadcrumbs>{{ ApiRef("DOM") }}== Summary ==

+ +

概要

+ +

<code>setAttributeNodeNS</code> adds a new attribute node with the specified namespace and name. setAttributeNodeNS は指定の名前空間と名前で新しい属性ノードを追加します。== Syntax ==

+ +

構文

+ +
replacedAttr = element.setAttributeNodeNS(attributeNode)
+
+ +

* <code>replacedAttr</code> is the replaced attribute node, if any, returned by this function. * <code>attributeNode</code> is an <code>Attr</code> node.

+ + + +

Example

+ +
// <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'
+
+ +

注記

+ +

If the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned. 指定の属性が既に存在しているときは、その属性新しいものに置き換えられ、置き換えられたものが戻り値として返されます。

+ +

{{ DOMAttributeMethods() }}== Specification ==

+ +

仕様

+ +

DOM Level 2 Core: setAttributeNodeNS

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 +--- +

{{ ApiRef() }}

+ +

概要

+ +

setAttributeNS は指定の名前空間と名前で新しい属性を追加したり、属性の値を変更します。

+ +

構文

+ +
element.setAttributeNS(namespace,name,value)
+
+ + + +

例

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notes

+ +

{{ DOMAttributeMethods() }}

+ +

仕様

+ +

DOM Level 2 Core: setAttributeNS

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 +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

mousedownイベントの処理中にこのメソッドを呼び出すと、マウスボタンが離されるか、{{ domxref("document.releaseCapture()") }}が呼び出されるまで、すべてのマウスイベントをこの要素にリターゲットします。

+ +
Warning: このインターフェースにはブラウザ間のサポートはほとんどありませんでした。代わりに、Pointer Events APIから{{domxref("element.setPointerCapture")}}を探していました。
+ +

シンタックス

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
trueの場合、すべてのイベントはこの要素を直接対象とします。falseの場合、イベントはこの要素の子孫でも発生する可能性があります。
+
+ +

例

+ +

この例では、現在のマウスの座標が、要素をクリックして押した後にマウスを移動しながら描画されます。

+ +
<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>
+
+ +

查看在线演示

+ +

注意

+ +

要素は、他の要素のレイアウトに応じて、上または下に完全にスクロールすることはできません。

+ +

指定

+ +

Internet Explorerの実装に基づいています。

+ +

ブラウザの互換性

+ + + +

{{Compat("api.Element.setCapture")}}

+ +

関連資料

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

setPointerCapture() は {{domxref("Element")}} インターフェイスのメソッドで、特定の要素をこれ以降のポインターイベントのキャプチャターゲットとして指定するために使用します。 ({{domxref("Element.releasePointerCapture()")}} を介して) キャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。

+ +
ポインターキャプチャを設定している場合、 {{domxref("HTMLElement/pointerover_event", "pointerover")}}, {{domxref("HTMLElement/pointerout_event", "pointerout")}}, {{domxref("HTMLElement/pointerenter_event", "pointerenter")}}, {{domxref("HTMLElement/pointerleave_event", "pointerleave")}} のイベントはキャプチャターゲットの境界を横断したときにのみ生成されます。これは他のすべての要素でこれらのイベントを抑制する効果があります。
+ +

ポインターキャプチャの概要

+ +

ポインターキャプチャでは、ポインターの位置にある通常 (またはヒットテスト) のターゲットではなく、特定のポインターイベント ({{domxref("PointerEvent")}}) のイベントを特定の要素にターゲットしなおすことができます。 これは、ポインターデバイスの接触が要素から外れた場合でも、 (スクロールやパンなどで) 要素がポインターイベントを受信し続けるようにするために使用できます。

+ +

構文

+ +
targetElement.setPointerCapture(pointerId);
+
+ +

引数

+ +
+
pointerId
+
{{domxref("PointerEvent")}} オブジェクトの {{domxref("PointerEvent.pointerId", "pointerId")}}。
+
+ +

返値

+ +

このメソッドは undefined を返します。

+ +

例外

+ + + + + + + + + + + + + + +
例外説明
InvalidPointerIdpointerId が、どのアクティブポインターとも一致しません。
+ +

例

+ +

この例では、 {{HtmlElement("div")}} を押下するとポインターキャプチャが設定されます。これにより、ポインターをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。

+ +

HTML

+ +
<div id="slider">SLIDE ME</div>
+ +

CSS

+ +
div {
+  width: 140px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fbe;
+}
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#idl-def-element-setpointercapture-pointerid', 'setPointerCapture')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.setPointerCapture")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}{{draft}}

+ +

読み取り専用のプロパティであるElement.shadowRootは、そのエレメントによってホストされたshadow rootへの読み取りアクセスを提供します。既に存在している要素にshadow rootを追加する場合は {{domxref('Element.attachShadow')}} を使用してください。

+ +

文法

+ +
var shadowroot = element.shadowRoot;
+
+ +

値

+ +

{{domxref('ShadowRoot')}} オブジェクトです。 アタッチされた時の{{DOMxRef("ShadowRoot.mode", "mode")}} に closed が指定された場合には  null となります。

+ +

Examples

+ +

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

+ +

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

In the updateStyle() 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:

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

仕様

+ + + + + + + + + + + + + + +
仕様状態注脚
{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザ互換性

+ + + +

{{Compat("api.Element.shadowRoot")}}

+ +

関連情報

+ + 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 +--- +
{{APIRef}}{{deprecated_header}}
+ +

show イベントは、 {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが contextmenu 属性を持つ要素に発生またはバブリングしたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onshow", "onshow")}}
+ +

例

+ +
<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>
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName("HTML5 W3C", "webappapis.html#handler-onshow", "show event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.show_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef("Shadow DOM")}}

+ +

{{domxref("Element")}} インターフェースの slot プロパティは shadow DOM slot の名前を返します。

+ +

slot は、web コンポーネント の中にユーザーが任意のマークアップを代入できる要素を提供します (template と slot の使い方 により詳しい説明があります)。

+ +

Syntax

+ +
var aString = element.slot
+element.slot = aString
+
+ +

値

+ +

{{domxref("DOMString")}}

+ +

例

+ +

templateのサンプル (実行例)では、<my-paragraph> と名付けた簡単なカスタム要素を作っています。このカスタム要素には、shadow root が付いており、my-text と名付けられた slot 要素が含まれています。

+ +

<my-paragraph> がドキュメントの中で利用された時、その内部で slot 属性を my-text に設定した要素を作ることで、slot の内容を変更することができます。 

+ +
<my-paragraph>
+  <span slot="my-text">新しいテキストを代入します</span>
+</my-paragraph>
+ +

JavaScript ファイルで {{htmlelement("span")}} への参照を取得すると、対応する <slot> の名前を取得できます。 

+ +
let slottedSpan = document.querySelector('my-paragraph span')
+console.log(slottedSpan.slot); // 'my-text' と表示されます
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}{{Spec2('DOM WHATWG')}} 
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("api.Element.slot")}}

+
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 +--- +
+ {{ApiRef}}
+

概要

+

要素の名前を返します。

+

構文

+
elementName = element.tagName
+
+ +

注記

+

XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、tagName は標準的な大文字で要素名を返します。 tagName の値は nodeName の値と同じになります。

+

例

+

以下のようなマークアップを想定します。

+
<span id="born">When I was born...</span>
+
+

上記 HTML に対し以下のスクリプトを実行した場合...

+
var span = document.getElementById("born");
+
+alert(span.tagName);
+
+

XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。

+

仕様

+ 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 +--- +
{{APIRef}}
+ +
+ +

touchcancel イベントは、１つ以上のタッチポイントが実装固有の方法で中断されたときに発生します(例えば、タッチポイントが多すぎるとき)。

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{domxref("TouchEvent")}}
Event handler property{{ DOMxRef("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}
+ +

例

+ +

サンプルコードはこちらです。 Touch events.

+ +

仕様

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName('Touch Events', '#event-touchcancel')}}{{Spec2('Touch Events')}}
+ +

ブラウザ互換性

+ + + +

{{Compat("api.Element.touchcancel_event")}}

+ +

参照

+ + 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 +--- +

{{APIRef}}

+ +

touchend イベントは、タッチ面から1つ以上のタッチ点が取り除かれた場合に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}
+ +

例

+ +

これらのイベントのコード例は、専用のページ「タッチイベント」にあります。

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Touch Events', '#event-touchend')}}{{Spec2('Touch Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.touchend_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

touchmove イベントは、タッチ面上で1つ以上のタッチ点が移動したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}
+ +

例

+ +

これらのイベントのコード例は、専用のページ「タッチイベント」にあります。

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Touch Events', '#event-touchmove')}}{{Spec2('Touch Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.touchmove_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

touchstart イベントは、タッチ平面上に1つ以上のタッチ点が配置されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("TouchEvent")}}
イベントハンドラープロパティ{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}
+ +

例

+ +

これらのイベントのコード例は、専用のページ「タッチイベント」にあります。

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Touch Events', '#event-touchstart')}}{{Spec2('Touch Events')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.touchstart_event")}}

+ +

関連情報

+ + 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 +--- +

{{APIRef}}

+ +

wheel イベントは、ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転させたときに発行されます。

+ +

このイベントは標準外、非推奨の {{domxref("Element/mousewheel_event", "mousewheel")}} イベントを置き換えるものです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("WheelEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onwheel", "onwheel")}}
+ +
+

注: wheel イベントと {{domxref("Element/scroll_event", "scroll")}} イベントを混同しないでください。 wheel イベントの既定のアクションは実装固有のものであり、必ずしも scroll イベントを発行するわけではありません。その場合でも、ホイールイベントの delta* 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 wheel イベントの delta* プロパティに頼らないようにしてください。代わりに、 scroll イベント内のターゲットの {{domxref("Element.scrollLeft", "scrollLeft")}} や {{domxref("Element.scrollTop", "scrollTop")}} の値の変化を検出するようにしてください。

+
+ +

例

+ +

ホイールで要素を拡大縮小

+ +

この例は、マウス (またはその他のポインティングデバイスの) ホイールを使用して要素を拡大縮小する方法を示します。

+ +
<div>Scale me with your mouse wheel.</div>
+ +
body {
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div {
+  width: 105px;
+  height: 105px;
+  background: #cdf;
+  padding: 5px;
+}
+ +
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;
+ +

{{EmbedLiveSample("Scaling_an_element_via_the_wheel", 700, 300)}}

+ +

addEventListener による同等のもの

+ +

イベントハンドラーは {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用して設定することもできます。

+ +
el.addEventListener('wheel', zoom);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('UI Events','#event-type-wheel','wheel')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Element.wheel_event")}}

+ +

関連情報

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