diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-07-10 15:36:02 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-10 15:36:02 +0900 |
commit | adf370f84738a197d444ad9d4ff1d7e7bb62382b (patch) | |
tree | 2f5f3d50663f1adf727cd2412fc76d53e471bebb /files/ja/web/api/element | |
parent | e736d46b784655d42ae11ca638c33cb0172df757 (diff) | |
download | translated-content-adf370f84738a197d444ad9d4ff1d7e7bb62382b.tar.gz translated-content-adf370f84738a197d444ad9d4ff1d7e7bb62382b.tar.bz2 translated-content-adf370f84738a197d444ad9d4ff1d7e7bb62382b.zip |
Web/API/Element を更新 (#1470)
- conflicting 版は古いので削除
- 2021/06/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/api/element')
-rw-r--r-- | files/ja/web/api/element/index.html | 319 |
1 files changed, 149 insertions, 170 deletions
diff --git a/files/ja/web/api/element/index.html b/files/ja/web/api/element/index.html index 10b313e3a5..be6e9230ab 100644 --- a/files/ja/web/api/element/index.html +++ b/files/ja/web/api/element/index.html @@ -9,7 +9,7 @@ tags: - Interface - Reference - Web API - - インターフェイス +browser-compat: api.Element translation_of: Web/API/Element --- <div>{{APIRef("DOM")}}</div> @@ -20,13 +20,19 @@ translation_of: Web/API/Element <p>{{InheritanceDiagram}}</p> -<h2 id="Properties" name="Properties">プロパティ</h2> +<h2 id="Properties">プロパティ</h2> -<p><em>親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のプロパティを実装しています。</em></p> +<p><em><code>Element</code> は、親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。</em></p> <dl> + <dt>{{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}</dt> + <dd>このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。</dd> <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> <dd>対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。</dd> + <dt>{{domxref("Element.childElementCount")}} {{readonlyInline}}</dt> + <dd>この要素の子要素の数を返します。</dd> + <dt>{{domxref("Element.children")}} {{readonlyInline}}</dt> + <dd>この要素の子要素を返します。</dd> <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> <dd>class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。</dd> <dt>{{DOMxRef("Element.className")}}</dt> @@ -39,31 +45,31 @@ translation_of: Web/API/Element <dd>要素の上境界の幅を表す {{jsxref("Number")}} を返します。</dd> <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> <dd>要素の内部の幅を表す {{jsxref("Number")}} を返します。</dd> - <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dt>{{domxref("Element.firstElementChild")}} {{readonlyInline}}</dt> <dd>アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。</dd> - <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> - <dd>特定の要素に適用された ARIA ロールを含む {{DOMxRef("DOMString")}} を返します。</dd> <dt>{{DOMxRef("Element.id")}}</dt> <dd>{{DOMxRef("DOMString")}} 型であり、要素の id を表します。</dd> <dt>{{DOMxRef("Element.innerHTML")}}</dt> <dd>{{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。</dd> + <dt>{{domxref("Element.lastElementChild")}} {{readonlyInline}}</dt> + <dd>Returns the last child element of this element.</dd> <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> <dd>要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。</dd> <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> <dd>要素の名前空間の URI。名前空間がない場合は <code>null</code> になります。 <div class="note"> - <p><strong>注:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 名前空間内に存在します。{{gecko_minversion_inline("1.9.2")}}</p> + <p><strong>注:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 名前空間内に存在します。</p> </div> </dd> - <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dt>{{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}</dt> <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ <code>null</code>。</dd> <dt>{{DOMxRef("Element.outerHTML")}}</dt> <dd>{{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。</dd> <dt>{{DOMxRef("Element.part")}}</dt> <dd>要素のパート識別子 (すなわち、 <code>part</code> 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。</dd> <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> - <dd>要素の名前空間プレフィックスを表す {{DOMxRef("DOMString")}}。プレフィックスが指定されていない場合は <code>null</code>。</dd> - <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>要素の名前空間接頭辞を表す {{DOMxRef("DOMString")}}。接頭辞が指定されていない場合は <code>null</code>。</dd> + <dt>{{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}}</dt> <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ <code>null</code>。</dd> <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> <dd>要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。</dd> @@ -83,32 +89,98 @@ translation_of: Web/API/Element <dd>オープン・クローズに関係なく、要素が所持している Shadow Root を返します。<strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> に限り使用できます。</strong></dd> <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> <dd>要素が挿入されている shadow DOM スロットの名前を返します。</dd> - <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> - <dd>{{jsxref("Boolean")}} 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。</dd> <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> <dd>要素のタグ名を {{jsxref("String")}} で返します。</dd> - <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> - <dd>要素に関連する {{DOMxRef("UndoManager")}} を返します。</dd> - <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> - <dd>{{jsxref("Boolean")}} 型であり、要素が undo scope を提供しているか否かを示します。</dd> </dl> -<div class="note"> -<p><strong>注:</strong> DOM Level 3 では、{{DOMxRef("Node")}} インターフェスで <code>namespaceURI</code>、<code>localName</code>、<code>prefix</code> を定義しています。これらは DOM4 で <code>Element</code> に移動されました。</p> +<h3 id="Properties_included_from_Aria">ARIA から導入されたプロパティ</h3> -<p>この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。</p> -</div> - -<h3 id="Properties_included_from_Slotable" name="Properties_included_from_Slotable">Slotable に含まれるプロパティ</h3> - -<p><em><code>Element</code> インターフェイスは、{{DOMxRef("Slotable")}} ミックスインで定義された以下のプロパティを含んでいます。</em></p> +<p><em><code>Element</code> インターフェイスは <code>ARIAMixin</code> ミックスインで定義されている以下のプロパティを持っています。</em></p> <dl> - <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> - <dd>ノードが挿入されている {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。</dd> + <dt>{{domxref("Element.ariaAtomic")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-atomic</code> 属性を反映し、 <code>aria-relevant</code> 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。</dd> + <dt>{{domxref("Element.ariaAutoComplete")}}</dt> + <dd>{{domxref("DOMString")}} で、 <code>aria-autocomplete</code> 属性を反映し、コンボボックス、サーチボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。</dd> + <dt>{{domxref("Element.ariaBusy")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-busy</code> 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。</dd> + <dt>{{domxref("Element.ariaChecked")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-checked</code> 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。</dd> + <dt>{{domxref("Element.ariaColCount")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-colcount</code> 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。</dd> + <dt>{{domxref("Element.ariaColIndex")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-colindex</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。</dd> + <dt>{{domxref("Element.ariaColIndexText")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-colindextext</code> 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。</dd> + <dt>{{domxref("Element.ariaColSpan")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-colspan</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。</dd> + <dt>{{domxref("Element.ariaCurrent")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-current</code> 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。</dd> + <dt>{{domxref("Element.ariaDescription")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-description</code> 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。</dd> + <dt>{{domxref("Element.ariaDisabled")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-disabled</code> 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。</dd> + <dt>{{domxref("Element.ariaExpanded")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-expanded</code> 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。</dd> + <dt>{{domxref("Element.ariaHasPopup")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-haspopup</code> 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。</dd> + <dt>{{domxref("Element.ariaHidden")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-hidden</code> 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。</dd> + <dt>{{domxref("Element.ariaKeyShortcuts")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-keyshortcuts</code> 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。</dd> + <dt>{{domxref("Element.ariaLabel")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-label</code> 属性を反映し、現在の要素をラベル付けする文字列値を定義します。</dd> + <dt>{{domxref("Element.ariaLevel")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-level</code> 属性を反映し、構造内の要素の階層レベルを定義します。</dd> + <dt>{{domxref("Element.ariaLive")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-live</code> 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。</dd> + <dt>{{domxref("Element.ariaModal")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-modal</code> 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。</dd> + <dt>{{domxref("Element.ariaMultiline")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-multiline</code> 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。</dd> + <dt>{{domxref("Element.ariaMultiSelectable")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-multiselectable</code> 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。</dd> + <dt>{{domxref("Element.ariaOrientation")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-orientation</code> 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。</dd> + <dt>{{domxref("Element.ariaPlaceholder")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-placeholder</code> 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。</dd> + <dt>{{domxref("Element.ariaPosInSet")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-posinset</code> 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。</dd> + <dt>{{domxref("Element.ariaPressed")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-pressed</code> 属性を反映し、トグルボタンの現在の「押された」状態を示します。</dd> + <dt>{{domxref("Element.ariaReadOnly")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-readonly</code> 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。</dd> + <dt>{{domxref("Element.ariaRelevant")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-relevant</code> 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 <code>aria-live</code> リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。</dd> + <dt>{{domxref("Element.ariaRequired")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-required</code> 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。</dd> + <dt>{{domxref("Element.ariaRoleDescription")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-roledescription</code> 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。</dd> + <dt>{{domxref("Element.ariaRowCount")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-rowcount</code> 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。</dd> + <dt>{{domxref("Element.ariaRowIndex")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-rowindex</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。</dd> + <dt>{{domxref("Element.ariaRowIndexText")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-rowindextext</code> 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。</dd> + <dt>{{domxref("Element.ariaRowSpan")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-rowspan</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。</dd> + <dt>{{domxref("Element.ariaSelected")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-selected</code> 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。</dd> + <dt>{{domxref("Element.ariaSetSize")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-setsize</code> 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。</dd> + <dt>{{domxref("Element.ariaSort")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-sort</code> 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。</dd> + <dt>{{domxref("Element.ariaValueMax")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-valueMax</code> 属性を反映し、 range ウィジェットの最大許容値を定義します。</dd> + <dt>{{domxref("Element.ariaValueMin")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-valueMin</code> 属性を反映し、 range ウィジェットに許容される最小値を定義します。</dd> + <dt>{{domxref("Element.ariaValueNow")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-valueNow</code> 属性を反映し、 range ウィジェットの現在の値を定義します。</dd> + <dt>{{domxref("Element.ariaValueText")}}</dt> + <dd>{{domxref("DOMString")}} で <code>aria-valuetext</code> 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義ます。</dd> </dl> -<h3 id="Handlers" name="Handlers">イベントハンドラー</h3> +<h3 id="Handlers">イベントハンドラー</h3> <dl> <dt>{{domxref("Element.onfullscreenchange")}}</dt> @@ -117,9 +189,9 @@ translation_of: Web/API/Element <dd>全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。</dd> </dl> -<h2 id="Methods" name="Methods">メソッド</h2> +<h2 id="Methods">メソッド</h2> -<p><em>親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のメソッドを実装しています。</em></p> +<p><em><code>Element</code> は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。</em></p> <dl> <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> @@ -128,10 +200,12 @@ translation_of: Web/API/Element <dd>指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。</dd> <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> <dd>要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。</dd> - <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dt>{{DOMxRef("Element.append()")}}</dt> + <dd>この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。</dd> + <dt>{{DOMxRef("Element.closest()")}}</dt> <dd>引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。</dd> <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> - <dd>要素で <a href="/ja/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> を作成します。その要素は Shadow Host になります。また、{{DOMxRef("ShadowRoot")}} を返します。</dd> + <dd>要素で <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> を作成します。その要素はシャドウホストになります。 {{DOMxRef("ShadowRoot")}} を返します。</dd> <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> <dd>{{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。</dd> <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> @@ -139,13 +213,19 @@ translation_of: Web/API/Element <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> <dd>要素でアクティブな Animation オブジェクトの配列を返します。</dd> <dt>{{DOMxRef("Element.getAttribute()")}}</dt> - <dd>現在ノードから指定された名前の付いた属性値を取得して、{{jsxref("Object")}} を返します。</dd> + <dd>現在ノードから指定された名前の付いた属性値を取得して、 {{jsxref("Object")}} を返します。</dd> <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> <dd>現在の要素の属性名の配列を返します。</dd> + <dt>{{DOMxRef("Element.getAttributeNode()")}}</dt> + <dd>現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}}</dt> + <dd>指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。</dd> <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> <dd>現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。</dd> <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> <dd>要素のサイズと、ビューポートにおける位置を返します。</dd> + <dt>{{domxref("Element.getBoxQuads()")}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMQuad")}} オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。</dd> <dt>{{DOMxRef("Element.getClientRects()")}}</dt> <dd>クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。</dd> <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> @@ -168,26 +248,32 @@ translation_of: Web/API/Element <dd>テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。</dd> <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> <dd>メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。</dd> - <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dt>{{DOMxRef("Element.matches()")}}</dt> <dd>要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。</dd> - <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt> - <dd>指定された擬似要素セレクターに一致するこの擬似要素を表す {{DOMxRef("CSSPseudoElement")}} を返します。</dd> + <dt>{{DOMxRef("Element.prepend()")}}</dt> + <dd>この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。</dd> <dt>{{DOMxRef("Element.querySelector()")}}</dt> - <dd>要素に対して、指定したセレクターにマッチする最初の {{DOMxRef("Node")}} を返します。</dd> + <dd>要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。</dd> <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> - <dd>要素に対して、指定したセレクターにマッチするノードの {{DOMxRef("NodeList")}} を返します。</dd> + <dd>要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。</dd> <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> - <dd>以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}} 向けに設定したポインターキャプチャーを解放 (停止) します。</dd> - <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。</dd> + <dt>{{DOMxRef("Element.remove()")}}</dt> <dd>親要素の子リストから、要素を取り除きます。</dd> <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> <dd>現在ノードから,指定された名前を持つ属性を取り除きます。</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}}</dt> + <dd>現在のノードから名前の付いた属性のノード表現を削除します。</dd> <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> <dd>現在ノードから,指定された名前と名前空間を持つ属性を取り除きます。</dd> <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> <dd>要素からイベントリスナーを取り除きます。</dd> - <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> - <dd>要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。</dd> + <dt>{{DOMxRef("Element.replaceChildren()")}}</dt> + <dd>{{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。</dd> + <dt>{{DOMxRef("Element.replaceWith()")}}</dt> + <dd>親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。</dd> +<dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>要素を全画面表示するよう、ブラウザーへ非同期的に要求します。</dd> <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> <dd>指定した要素でポインターをロックするよう、非同期的に要求できます。</dd> <dt>{{domxref("Element.scroll()")}}</dt> @@ -200,35 +286,26 @@ translation_of: Web/API/Element <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd> <dt>{{DOMxRef("Element.setAttribute()")}}</dt> <dd>現在ノードに、指定された名前を持つ属性値を設定します。</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}}</dt> + <dd>現在のノードから指定された属性のノード表現を設定します。</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}}</dt> + <dd>指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。</dd> <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> <dd>現在ノードに、指定された名前と名前空間を持つ属性値を設定します。</dd> - <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}</dt> <dd>すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。</dd> <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> <dd>以降の <a href="/ja/docs/Web/API/Pointer_events">pointer イベント</a> のキャプチャー対象とする、特定の要素を指定します。</dd> <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> <dd>指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。</dd> - <dt> - <h3 id="廃止されたメソッド">廃止されたメソッド</h3> - </dt> - <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>現在ノードから指定された名前の属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。</dd> - <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> - <dd>現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。</dd> - <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>現在ノードから、指定された名前を持つ属性のノード表現を取り除きます。</dd> - <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> - <dd>現在ノードに、指定された名前を持つ属性値のノード表現を設定します。</dd> - <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> - <dd>現在ノードに、指定された名前と名前空間を持つ属性値のノード表現を設定します。</dd> </dl> -<h2 id="Events" name="Events">イベント</h2> +<h2 id="Events">イベント</h2> <p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかします。</p> <dl> - <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> + <dt>{{domxref("HTMLDialogElement/cancel_event", "cancel")}}</dt> <dd>ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。<br> {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。</dd> <dt>{{domxref("Element/error_event", "error")}}</dt> @@ -241,14 +318,14 @@ translation_of: Web/API/Element <dd>いくらかのテキストが選択されたときに発生します。<br> {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。</dd> <dt>{{domxref("Element/show_event", "show")}}</dt> - <dd>{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <code><a href="/ja/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code> 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}<br> + <dd>{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <code><a href="/ja/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code> 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}<br> {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。</dd> <dt>{{domxref("Element/wheel_event","wheel")}}</dt> <dd>ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。<br> {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。</dd> </dl> -<h3 id="Clipboard_events" name="Clipboard_events">クリップボードイベント</h3> +<h3 id="Clipboard_events">クリップボードイベント</h3> <dl> <dt>{{domxref("Element/copy_event", "copy")}}</dt> @@ -262,7 +339,7 @@ translation_of: Web/API/Element {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。</dd> </dl> -<h3 id="Composition_events" name="Composition_events">構成イベント</h3> +<h3 id="Composition_events">構成イベント</h3> <dl> <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> @@ -273,7 +350,7 @@ translation_of: Web/API/Element <dd>{{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。</dd> </dl> -<h3 id="Focus_events" name="Focus_events">フォーカスイベント</h3> +<h3 id="Focus_events">フォーカスイベント</h3> <dl> <dt>{{domxref("Element/blur_event", "blur")}}</dt> @@ -288,7 +365,7 @@ translation_of: Web/API/Element <dd>要素がフォーカスを失おうとしているときに発生します。</dd> </dl> -<h3 id="Fullscreen_events" name="Fullscreen_events">全画面イベント</h3> +<h3 id="Fullscreen_events">全画面イベント</h3> <dl> <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> @@ -299,7 +376,7 @@ translation_of: Web/API/Element <dd>{{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。</dd> </dl> -<h3 id="Keyboard_events" name="Keyboard_events">キーボードイベント</h3> +<h3 id="Keyboard_events">キーボードイベント</h3> <dl> <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> @@ -313,7 +390,7 @@ translation_of: Web/API/Element {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。</dd> </dl> -<h3 id="Mouse_events" name="Mouse_events">マウスイベント</h3> +<h3 id="Mouse_events">マウスイベント</h3> <dl> <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> @@ -361,7 +438,7 @@ translation_of: Web/API/Element <dd>「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。</dd> </dl> -<h3 id="Touch_events" name="Touch_events">タッチイベント</h3> +<h3 id="Touch_events">タッチイベント</h3> <dl> <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> @@ -378,108 +455,10 @@ translation_of: Web/API/Element {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。</dd> </dl> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td> - <td>{{Spec2("CSS4 Pseudo-Elements")}}</td> - <td><code>pseudo()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName("Web Animations", '', '')}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td><code>getAnimations()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('Undo Manager', '', 'Element')}}</td> - <td>{{Spec2('Undo Manager')}}</td> - <td><code>undoScope</code> と <code>undoManager</code> プロパティを追加した。</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>イベントハンドラーを追加: <code>ongotpointercapture</code>, <code>onlostpointercapture</code><br> - メソッドを追加: <code>setPointerCapture()</code>, <code>releasePointerCapture()</code></td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>イベントハンドラーを追加: <code>ongotpointercapture</code>, <code>onlostpointercapture</code><br> - メソッドを追加: <code>setPointerCapture()</code>, <code>releasePointerCapture()</code></td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>メソッドを追加: <code>querySelector()</code>, <code>querySelectorAll()</code></td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td><code>requestPointerLock()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> - <td>{{Spec2('Fullscreen')}}</td> - <td><code>requestFullscreen()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>プロパティを追加: <code>innerHTML</code>, <code>outerHTML</code><br> - メソッドを追加: <code>insertAdjacentHTML()</code></td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#extension-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>プロパティを追加: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, <code>clientHeight</code><br> - メソッドを追加: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>{{DOMxRef("ElementTraversal")}} インターフェイスのインスタンスを追加。</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>メソッドを追加: <code>closest()</code>, <code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code><br> - Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>メソッドを削除: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, <code>setIdAttributeNode()</code><br> - <code>getElementsByTag()</code> および <code>getElementsByTagNS()</code> の返値を変更。<br> - <code>schemaTypeInfo</code> プロパティを削除。</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>メソッドを追加: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, <code>setIdAttributeNode()</code>。これらのメソッドは実装されず、のちの仕様書で削除されました。<br> - <code>schemaTypeInfo</code> プロパティを追加。このプロパティは実装されず、後の仕様で削除されました。</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td><code>normalize()</code> メソッドを {{DOMxRef("Node")}} に移動。</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element")}}</p> +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> |