Attributes example

From 95206a9aecc234f58dc001eb36553efc71cfb9e3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 7 Mar 2022 23:02:04 +0900 Subject: Element インターフェイスの記事を更新 (#4313) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Element インターフェイスの記事を移行 * 2022/02/28 時点の英語版に同期 * Update files/ja/web/api/element/index.md Co-authored-by: potappo Co-authored-by: potappo --- files/ja/web/api/element/index.html | 464 ------------------------------------ files/ja/web/api/element/index.md | 442 ++++++++++++++++++++++++++++++++++ 2 files changed, 442 insertions(+), 464 deletions(-) delete mode 100644 files/ja/web/api/element/index.html create mode 100644 files/ja/web/api/element/index.md (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/index.html b/files/ja/web/api/element/index.html deleted file mode 100644 index 6bece2f11f..0000000000 --- a/files/ja/web/api/element/index.html +++ /dev/null @@ -1,464 +0,0 @@ ---- -title: Element -slug: Web/API/Element -tags: - - API - - DOM - - DOM Reference - - Element - - Interface - - Reference - - Web API -browser-compat: api.Element -translation_of: Web/API/Element ---- -

- -

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

- -

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

- -

プロパティ

- -

Element は、親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。

- -

{{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}: このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}: 対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。
{{domxref("Element.childElementCount")}} {{readonlyInline}}: この要素の子要素の数を返します。
{{domxref("Element.children")}} {{readonlyInline}}: この要素の子要素を返します。
{{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.firstElementChild")}} {{readonlyInline}}: アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。
{{DOMxRef("Element.id")}}: {{DOMxRef("DOMString")}} 型であり、要素の id を表します。
{{DOMxRef("Element.innerHTML")}}: {{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。
{{domxref("Element.lastElementChild")}} {{readonlyInline}}: Returns the last child element of this element.
{{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 名前空間内に存在します。
-
-
{{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}: {{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ null。
{{DOMxRef("Element.outerHTML")}}: {{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。
{{DOMxRef("Element.part")}}: 要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}: 要素の名前空間接頭辞を表す {{DOMxRef("DOMString")}}。接頭辞が指定されていない場合は null。
{{DOMxRef("Element.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.tagName")}} {{readOnlyInline}}: 要素のタグ名を {{jsxref("String")}} で返します。

- -

ARIA から導入されたプロパティ

- -

Element インターフェイスは ARIAMixin ミックスインで定義されている以下のプロパティを持っています。

- -

{{domxref("Element.ariaAtomic")}}: {{domxref("DOMString")}} で aria-atomic 属性を反映し、 aria-relevant 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
{{domxref("Element.ariaAutoComplete")}}: {{domxref("DOMString")}} で、 aria-autocomplete 属性を反映し、コンボボックス、サーチボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。
{{domxref("Element.ariaBusy")}}: {{domxref("DOMString")}} で aria-busy 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。
{{domxref("Element.ariaChecked")}}: {{domxref("DOMString")}} で aria-checked 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。
{{domxref("Element.ariaColCount")}}: {{domxref("DOMString")}} で aria-colcount 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。
{{domxref("Element.ariaColIndex")}}: {{domxref("DOMString")}} で aria-colindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。
{{domxref("Element.ariaColIndexText")}}: {{domxref("DOMString")}} で aria-colindextext 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。
{{domxref("Element.ariaColSpan")}}: {{domxref("DOMString")}} で aria-colspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。
{{domxref("Element.ariaCurrent")}}: {{domxref("DOMString")}} で aria-current 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。
{{domxref("Element.ariaDescription")}}: {{domxref("DOMString")}} で aria-description 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。
{{domxref("Element.ariaDisabled")}}: {{domxref("DOMString")}} で aria-disabled 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。
{{domxref("Element.ariaExpanded")}}: {{domxref("DOMString")}} で aria-expanded 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。
{{domxref("Element.ariaHasPopup")}}: {{domxref("DOMString")}} で aria-haspopup 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。
{{domxref("Element.ariaHidden")}}: {{domxref("DOMString")}} で aria-hidden 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。
{{domxref("Element.ariaKeyShortcuts")}}: {{domxref("DOMString")}} で aria-keyshortcuts 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。
{{domxref("Element.ariaLabel")}}: {{domxref("DOMString")}} で aria-label 属性を反映し、現在の要素をラベル付けする文字列値を定義します。
{{domxref("Element.ariaLevel")}}: {{domxref("DOMString")}} で aria-level 属性を反映し、構造内の要素の階層レベルを定義します。
{{domxref("Element.ariaLive")}}: {{domxref("DOMString")}} で aria-live 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。
{{domxref("Element.ariaModal")}}: {{domxref("DOMString")}} で aria-modal 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。
{{domxref("Element.ariaMultiline")}}: {{domxref("DOMString")}} で aria-multiline 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。
{{domxref("Element.ariaMultiSelectable")}}: {{domxref("DOMString")}} で aria-multiselectable 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
{{domxref("Element.ariaOrientation")}}: {{domxref("DOMString")}} で aria-orientation 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。
{{domxref("Element.ariaPlaceholder")}}: {{domxref("DOMString")}} で aria-placeholder 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。
{{domxref("Element.ariaPosInSet")}}: {{domxref("DOMString")}} で aria-posinset 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。
{{domxref("Element.ariaPressed")}}: {{domxref("DOMString")}} で aria-pressed 属性を反映し、トグルボタンの現在の「押された」状態を示します。
{{domxref("Element.ariaReadOnly")}}: {{domxref("DOMString")}} で aria-readonly 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。
{{domxref("Element.ariaRelevant")}}: {{domxref("DOMString")}} で aria-relevant 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 aria-live リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。
{{domxref("Element.ariaRequired")}}: {{domxref("DOMString")}} で aria-required 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。
{{domxref("Element.ariaRoleDescription")}}: {{domxref("DOMString")}} で aria-roledescription 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。
{{domxref("Element.ariaRowCount")}}: {{domxref("DOMString")}} で aria-rowcount 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。
{{domxref("Element.ariaRowIndex")}}: {{domxref("DOMString")}} で aria-rowindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。
{{domxref("Element.ariaRowIndexText")}}: {{domxref("DOMString")}} で aria-rowindextext 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。
{{domxref("Element.ariaRowSpan")}}: {{domxref("DOMString")}} で aria-rowspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。
{{domxref("Element.ariaSelected")}}: {{domxref("DOMString")}} で aria-selected 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。
{{domxref("Element.ariaSetSize")}}: {{domxref("DOMString")}} で aria-setsize 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。
{{domxref("Element.ariaSort")}}: {{domxref("DOMString")}} で aria-sort 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。
{{domxref("Element.ariaValueMax")}}: {{domxref("DOMString")}} で aria-valueMax 属性を反映し、 range ウィジェットの最大許容値を定義します。
{{domxref("Element.ariaValueMin")}}: {{domxref("DOMString")}} で aria-valueMin 属性を反映し、 range ウィジェットに許容される最小値を定義します。
{{domxref("Element.ariaValueNow")}}: {{domxref("DOMString")}} で aria-valueNow 属性を反映し、 range ウィジェットの現在の値を定義します。
{{domxref("Element.ariaValueText")}}: {{domxref("DOMString")}} で aria-valuetext 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義ます。

- -

イベントハンドラー

- -

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

- -

メソッド

- -

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

- -

{{DOMxRef("EventTarget.addEventListener()")}}: 要素に特定のイベント型を扱うイベントハンドラーを登録します。
{{DOMxRef("Element.attachShadow()")}}: 指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}: 要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
{{DOMxRef("Element.append()")}}: この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
{{DOMxRef("Element.closest()")}}: 引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}: 要素で shadow DOM を作成します。その要素はシャドウホストになります。 {{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.getAttributeNode()")}}: 現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。
{{DOMxRef("Element.getAttributeNodeNS()")}}: 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。
{{DOMxRef("Element.getAttributeNS()")}}: 現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。
{{DOMxRef("Element.getBoundingClientRect()")}}: 要素のサイズと、ビューポートにおける位置を返します。
{{domxref("Element.getBoxQuads()")}} {{experimental_inline}}: {{domxref("DOMQuad")}} オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。
{{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()")}}: 要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。
{{DOMxRef("Element.prepend()")}}: この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
{{DOMxRef("Element.querySelector()")}}: 要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。
{{DOMxRef("Element.querySelectorAll()")}}: 要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。
{{DOMxRef("Element.releasePointerCapture()")}}: 以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。
{{DOMxRef("Element.remove()")}}: 親要素の子リストから、要素を取り除きます。
{{DOMxRef("Element.removeAttribute()")}}: 現在ノードから，指定された名前を持つ属性を取り除きます。
{{DOMxRef("Element.removeAttributeNode()")}}: 現在のノードから名前の付いた属性のノード表現を削除します。
{{DOMxRef("Element.removeAttributeNS()")}}: 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
{{DOMxRef("EventTarget.removeEventListener()")}}: 要素からイベントリスナーを取り除きます。
{{DOMxRef("Element.replaceChildren()")}}: {{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。
{{DOMxRef("Element.replaceWith()")}}: 親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。
{{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.setAttributeNode()")}}: 現在のノードから指定された属性のノード表現を設定します。
{{DOMxRef("Element.setAttributeNodeNS()")}}: 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
{{DOMxRef("Element.setAttributeNS()")}}: 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}: すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。
{{DOMxRef("Element.setPointerCapture()")}}: 以降の pointer イベントのキャプチャー対象とする、特定の要素を指定します。
{{DOMxRef("Element.toggleAttribute()")}}: 指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。

- -

イベント

- -

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

- -

{{domxref("HTMLDialogElement/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")}} プロパティから利用することもできます。

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

diff --git a/files/ja/web/api/element/index.md b/files/ja/web/api/element/index.md new file mode 100644 index 0000000000..407d8b2672 --- /dev/null +++ b/files/ja/web/api/element/index.md @@ -0,0 +1,442 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM リファレンス + - Element + - インターフェイス + - リファレンス + - Web API +browser-compat: api.Element +translation_of: Web/API/Element +--- +{{APIRef("DOM")}} + +**`Element`** は {{DOMxRef("Document")}} が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが `Element` を継承しています。 + +例えば {{DOMxRef("HTMLElement")}} インターフェイスは HTML 要素の基本インターフェイスであり、 {{DOMxRef("SVGElement")}} インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。 + +XUL の `XULElement` インターフェイスのようなウェブプラットフォームの枠外の言語もまた、`Element` インターフェイスを実装しています。 + +{{InheritanceDiagram}} + +## プロパティ + +_`Element` は、親インターフェイスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。_ + +- {{DOMxRef("Element.assignedSlot")}}{{readonlyInline}} + - : このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。 +- {{DOMxRef("Element.attributes")}} {{readOnlyInline}} + - : 対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。 +- {{domxref("Element.childElementCount")}} {{readonlyInline}} + - : この要素の子要素の数を返します。 +- {{domxref("Element.children")}} {{readonlyInline}} + - : この要素の子要素を返します。 +- {{DOMxRef("Element.classList")}} {{readOnlyInline}} + - : class 属性のリストが入った {{DOMxRef("DOMTokenList")}} を返します。 +- {{DOMxRef("Element.className")}} + - : {{DOMxRef("DOMString")}} で、この要素のクラスを表します。 +- {{DOMxRef("Element.clientHeight")}} {{readOnlyInline}} + - : この要素の内部の高さを表す数値を返します。 +- {{DOMxRef("Element.clientLeft")}} {{readOnlyInline}} + - : この要素の左境界の幅を表す数値を返します。 +- {{DOMxRef("Element.clientTop")}} {{readOnlyInline}} + - : この要素の上境界の幅を表す数値を返します。 +- {{DOMxRef("Element.clientWidth")}} {{readOnlyInline}} + - : この要素の内部の幅を表す数値を返します。 +- {{domxref("Element.firstElementChild")}} {{readonlyInline}} + - : この要素の最初の子要素を返します。 +- {{DOMxRef("Element.id")}} + - : {{DOMxRef("DOMString")}} で、この要素の id を表します。 +- {{DOMxRef("Element.innerHTML")}} + - : {{DOMxRef("DOMString")}} で、この要素の内容のマークアップを表します。 +- {{domxref("Element.lastElementChild")}} {{readonlyInline}} + - : この要素の最後の子要素を返します。 +- {{DOMxRef("Element.localName")}} {{readOnlyInline}} + - : {{DOMxRef("DOMString")}} で、この要素の修飾名のローカル部分を表します。 +- {{DOMxRef("Element.namespaceURI")}} {{readonlyInline}} + + - : この要素の名前空間の URI。名前空間がない場合は `null` になります。 + + > **Note:** Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) 名前空間内に存在します。 + +- {{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}} + - : {{DOMxRef("Element")}} で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ `null` になります。 +- {{DOMxRef("Element.outerHTML")}} + - : {{DOMxRef("DOMString")}} で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。 +- {{DOMxRef("Element.part")}} + - : 要素のパート識別子 (すなわち、 `part` 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。 +- {{DOMxRef("Element.prefix")}} {{readOnlyInline}} + - : {{DOMxRef("DOMString")}} で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は `null` です。 +- {{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}} + - : {{DOMxRef("Element")}} で、ツリー上で自身の直前の要素を表します。兄弟ノードが無ければ `null` です。 +- {{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}} + - : この要素のスクロールビューの高さを表す数値を返します。 +- {{DOMxRef("Element.scrollLeft")}} + - : 数値型で、この要素の左スクロールオフセット値を表します。 +- {{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}} + - : この要素で可能な左スクロールオフセットの最大値を表す数値を返します。 +- {{DOMxRef("Element.scrollTop")}} + - : この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。 +- {{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}} + - : 要素で可能な上スクロールオフセットの最大値を表す数値を返します。 +- {{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}} + - : 要素のスクロールビュー幅を表す数値を返します。 +- {{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}} + - : 要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。 +- {{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}} + - : オープン・クローズに関係なく、要素が所持しているさh同ルートを返します。**[WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) に限り使用できます。** +- {{DOMxRef("Element.setHTML")}} + - : HTML の文字列を解釈して[無害化](/ja/docs/Web/API/HTML_Sanitizer_API)し、 DOM の中にこの要素のサブツリーとして挿入します。 +- {{DOMxRef("Element.slot")}} {{Experimental_Inline}} + - : この要素が挿入されているシャドウ DOM スロットの名前を返します。 +- {{DOMxRef("Element.tagName")}} {{readOnlyInline}} + - : この要素のタグ名を文字列で返します。 + +### ARIA から導入されたプロパティ + +_`Element` インターフェイスには、 `ARIAMixin` ミックスインで定義されている以下のプロパティを持っています。_ + +- {{domxref("Element.ariaAtomic")}} + - : {{domxref("DOMString")}} で [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映し、 [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。 +- {{domxref("Element.ariaAutoComplete")}} + - : {{domxref("DOMString")}} で、 [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。 +- {{domxref("Element.ariaBusy")}} + - : {{domxref("DOMString")}} で [`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。 +- {{domxref("Element.ariaChecked")}} + - : {{domxref("DOMString")}} で [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。 +- {{domxref("Element.ariaColCount")}} + - : {{domxref("DOMString")}} で [`aria-colcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。 +- {{domxref("Element.ariaColIndex")}} + - : {{domxref("DOMString")}} で [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。 +- {{domxref("Element.ariaColIndexText")}} + - : {{domxref("DOMString")}} で [`aria-colindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。 +- {{domxref("Element.ariaColSpan")}} + - : {{domxref("DOMString")}} で [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。 +- {{domxref("Element.ariaCurrent")}} + - : {{domxref("DOMString")}} で [`aria-current`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current) 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。 +- {{domxref("Element.ariaDescription")}} + - : {{domxref("DOMString")}} で [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。 +- {{domxref("Element.ariaDisabled")}} + - : {{domxref("DOMString")}} で [`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。 +- {{domxref("Element.ariaExpanded")}} + - : {{domxref("DOMString")}} で [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。 +- {{domxref("Element.ariaHasPopup")}} + - : {{domxref("DOMString")}} で [`aria-haspopup`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。 +- {{domxref("Element.ariaHidden")}} + - : {{domxref("DOMString")}} で [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。 +- {{domxref("Element.ariaKeyShortcuts")}} + - : {{domxref("DOMString")}} で [`aria-keyshortcuts`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。 +- {{domxref("Element.ariaLabel")}} + - : {{domxref("DOMString")}} で [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を反映し、現在の要素をラベル付けする文字列値を定義します。 +- {{domxref("Element.ariaLevel")}} + - : {{domxref("DOMString")}} で [`aria-level`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-level) 属性を反映し、構造内の要素の階層レベルを定義します。 +- {{domxref("Element.ariaLive")}} + - : {{domxref("DOMString")}} で [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。 +- {{domxref("Element.ariaModal")}} + - : {{domxref("DOMString")}} で [`aria-modal`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。 +- {{domxref("Element.ariaMultiline")}} + - : {{domxref("DOMString")}} で [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。 +- {{domxref("Element.ariaMultiSelectable")}} + - : {{domxref("DOMString")}} で [`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。 +- {{domxref("Element.ariaOrientation")}} + - : {{domxref("DOMString")}} で [`aria-orientation`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。 +- {{domxref("Element.ariaPlaceholder")}} + - : {{domxref("DOMString")}} で [`aria-placeholder`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder) 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。 +- {{domxref("Element.ariaPosInSet")}} + - : {{domxref("DOMString")}} で [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。 +- {{domxref("Element.ariaPressed")}} + - : {{domxref("DOMString")}} で [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性を反映し、トグルボタンの現在の「押された」状態を示します。 +- {{domxref("Element.ariaReadOnly")}} + - : {{domxref("DOMString")}} で [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。 +- {{domxref("Element.ariaRelevant")}} + - : {{domxref("DOMString")}} で [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 `aria-live` リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。 +- {{domxref("Element.ariaRequired")}} + - : {{domxref("DOMString")}} で [`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。 +- {{domxref("Element.ariaRoleDescription")}} + - : {{domxref("DOMString")}} で [`aria-roledescription`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。 +- {{domxref("Element.ariaRowCount")}} + - : {{domxref("DOMString")}} で [`aria-rowcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。 +- {{domxref("Element.ariaRowIndex")}} + - : {{domxref("DOMString")}} で [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。 +- {{domxref("Element.ariaRowIndexText")}} + - : {{domxref("DOMString")}} で [`aria-rowindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。 +- {{domxref("Element.ariaRowSpan")}} + - : {{domxref("DOMString")}} で [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。 +- {{domxref("Element.ariaSelected")}} + - : {{domxref("DOMString")}} で [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。 +- {{domxref("Element.ariaSetSize")}} + - : {{domxref("DOMString")}} で [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。 +- {{domxref("Element.ariaSort")}} + - : {{domxref("DOMString")}} で [`aria-sort`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。 +- {{domxref("Element.ariaValueMax")}} + - : {{domxref("DOMString")}} で [`aria-valueMax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) 属性を反映し、 range ウィジェットの最大許容値を定義します。 +- {{domxref("Element.ariaValueMin")}} + - : {{domxref("DOMString")}} で [`aria-valueMin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) 属性を反映し、 range ウィジェットに許容される最小値を定義します。 +- {{domxref("Element.ariaValueNow")}} + - : {{domxref("DOMString")}} で [`aria-valueNow`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) 属性を反映し、 range ウィジェットの現在の値を定義します。 +- {{domxref("Element.ariaValueText")}} + - : {{domxref("DOMString")}} で [`aria-valuetext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。 + +## メソッド + +_`Element` は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。_ + +- {{DOMxRef("EventTarget.addEventListener()")}} + - : この要素、特定のイベント型を扱うイベントハンドラーを登録します。 +- {{DOMxRef("Element.after()")}} + - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直後に追加します。 +- {{DOMxRef("Element.attachShadow()")}} + - : 指定した要素にシャドウ DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。 +- {{DOMxRef("Element.animate()")}} {{Experimental_Inline}} + - : この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。 +- {{DOMxRef("Element.append()")}} + - : この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。 +- {{DOMxRef("Element.before()")}} + - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直前に追加します。 +- {{DOMxRef("Element.closest()")}} + - : {{DOMxRef("Element")}} 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。 +- {{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : この要素に[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) を作成し、シャドウホストにします。 {{DOMxRef("ShadowRoot")}} を返します。 +- {{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}} + - : {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスで、 {{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。 +- {{DOMxRef("EventTarget.dispatchEvent()")}} + - : DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。 +- {{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}} + - : 要素でアクティブな Animation オブジェクトの配列を返します。 +- {{DOMxRef("Element.getAttribute()")}} + - : 現在ノードから指定された名前付きの属性値を取得して文字列で返します。 +- {{DOMxRef("Element.getAttributeNames()")}} + - : 現在の要素の属性名の配列を返します。 +- {{DOMxRef("Element.getAttributeNode()")}} + - : 現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。 +- {{DOMxRef("Element.getAttributeNodeNS()")}} + - : 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。 +- {{DOMxRef("Element.getAttributeNS()")}} + - : 現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。 +- {{DOMxRef("Element.getBoundingClientRect()")}} + - : この要素のサイズと、ビューポートにおける位置を返します。 +- {{domxref("Element.getBoxQuads()")}} {{experimental_inline}} + - : このノードの CSS フラグメントを表す {{domxref("DOMQuad")}} オブジェクトのリストを返します。 +- {{DOMxRef("Element.getClientRects()")}} + - : クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。 +- {{DOMxRef("Element.getElementsByClassName()")}} + - : 生きた {{DOMxRef("HTMLCollection")}} で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた {{DOMxRef("HTMLCollection")}} で、返します。 +- {{DOMxRef("Element.getElementsByTagName()")}} + - : 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた {{DOMxRef("HTMLCollection")}} で返します。 +- {{DOMxRef("Element.getElementsByTagNameNS()")}} + - : 生きた {{DOMxRef("HTMLCollection")}} で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた {{DOMxRef("HTMLCollection")}} で返します。 +- {{DOMxRef("Element.hasAttribute()")}} + - : 要素が指定された指定された属性を持っているか否かを示す論理値を返します。 +- {{DOMxRef("Element.hasAttributeNS()")}} + - : 要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。 +- {{DOMxRef("Element.hasAttributes()")}} + - : 要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。 +- {{DOMxRef("Element.hasPointerCapture()")}} + - : 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。 +- {{DOMxRef("Element.insertAdjacentElement()")}} + - : メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。 +- {{DOMxRef("Element.insertAdjacentHTML()")}} + - : テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。 +- {{DOMxRef("Element.insertAdjacentText()")}} + - : メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。 +- {{DOMxRef("Element.matches()")}} + - : 要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。 +- {{DOMxRef("Element.prepend()")}} + - : この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。 +- {{DOMxRef("Element.querySelector()")}} + - : 要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。 +- {{DOMxRef("Element.querySelectorAll()")}} + - : 要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。 +- {{DOMxRef("Element.releasePointerCapture()")}} + - : 以前に特定の{{DOMxRef("PointerEvent","ポインターイベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。 +- {{DOMxRef("Element.remove()")}} + - : 親要素の子リストから、要素を取り除きます。 +- {{DOMxRef("Element.removeAttribute()")}} + - : 現在ノードから，指定された名前を持つ属性を取り除きます。 +- {{DOMxRef("Element.removeAttributeNode()")}} + - : 現在のノードから名前の付いた属性のノード表現を取り除きます。 +- {{DOMxRef("Element.removeAttributeNS()")}} + - : 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。 +- {{DOMxRef("EventTarget.removeEventListener()")}} + - : 要素からイベントリスナーを取り除きます。 +- {{DOMxRef("Element.replaceChildren()")}} + - : {{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。 +- {{DOMxRef("Element.replaceWith()")}} + - : 親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。 +- {{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.setAttributeNode()")}} + - : 現在のノードから指定された属性のノード表現を設定します。 +- {{DOMxRef("Element.setAttributeNodeNS()")}} + - : 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。 +- {{DOMxRef("Element.setAttributeNS()")}} + - : 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。 +- {{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}} + - : マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。 +- {{DOMxRef("Element.setPointerCapture()")}} + - : 指定された要素を、以降の[ポインターイベント](/ja/docs/Web/API/Pointer_events)のキャプチャー対象として指定します。 +- {{DOMxRef("Element.toggleAttribute()")}} + - : 論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。 + +## イベント + +これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかします。 + +- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} + + - : ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが Esc キーを押したり、ブラウザーの UI の一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。 {{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`](/ja/docs/Web/HTML/Global_attributes/contextmenu) 属性 {{deprecated_inline}} を持つ要素で発生したか、バブリングで到達した場合に発行されます。 + {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティからも利用できます。 +- {{domxref("Element/wheel_event","wheel")}} + - : ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。 + {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティからも利用できます。 +- {{domxref("Element/securitypolicyviolation_event","securitypolicyviolation")}} + - : [コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)の違反があった場合に発行されます。 + グローバルの {{DOMxRef("GlobalEventHandlers.onsecuritypolicyviolation", "onsecuritypolicyviolation")}} プロパティからも利用できます。これは要素と {{domxref("Document")}} と {{domxref("Window")}} の各オブジェクトで利用できます。 + +### クリップボードイベント + +- {{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")}} + - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行時または終了時に、 {{domxref("Element")}} に送られます。 +- {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} + - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行または終了を試みている中でエラーが発生したときに、 `Element` に送られます。 + +### キーボードイベント + +- `{{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")}} プロパティからも利用できます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf From 437cf8ebd65086548ea53d138e7ed2e9f3fffb94 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 23:44:49 +0900 Subject: 2021/09/15 時点の英語版に基づき新規翻訳 (#4335) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/element/firstelementchild/index.md | 55 ++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 files/ja/web/api/element/firstelementchild/index.md (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/firstelementchild/index.md b/files/ja/web/api/element/firstelementchild/index.md new file mode 100644 index 0000000000..a1a1182594 --- /dev/null +++ b/files/ja/web/api/element/firstelementchild/index.md @@ -0,0 +1,55 @@ +--- +title: Element.firstElementChild +slug: Web/API/Element/firstElementChild +tags: + - API + - DOM + - Element + - プロパティ +browser-compat: api.Element.firstElementChild +translation_of: Web/API/Element/firstElementChild +--- +{{ APIRef("DOM") }} + +**`Element.firstElementChild`** は読み取り専用のプロパティで、要素の最初の子を {{domxref("Element")}} で返します。子要素がない場合は `null` を返します。 + +`Element.firstElementChild` は要素ノードのみを含みます。 +テキストやコメントノードなど、要素以外のノードを含むすべての子ノードを取得するには、 {{domxref("Node.firstChild")}} を使用してください。 + +## 構文 + +```js +// ゲッター +element = el.firstElementChild; + +// セッターなし。読み取り専用プロパティ +``` + +## 例 + +```html +

First (1)
Second (2)
Third (3)

+ + +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.nextElementSibling")}} +- {{domxref("Element.lastElementChild")}} -- cgit v1.2.3-54-g00ecf From 07b1e49337d5fda31acf76572fd712b434493948 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 23:45:15 +0900 Subject: 2022/01/24 時点の英語版に基づき新規翻訳 (#4337) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/element/nextelementsibling/index.md | 59 ++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 files/ja/web/api/element/nextelementsibling/index.md (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/nextelementsibling/index.md b/files/ja/web/api/element/nextelementsibling/index.md new file mode 100644 index 0000000000..ea24a59878 --- /dev/null +++ b/files/ja/web/api/element/nextelementsibling/index.md @@ -0,0 +1,59 @@ +--- +title: Element.nextElementSibling +slug: Web/API/Element/nextElementSibling +tags: + - API + - DOM + - Element + - プロパティ +browser-compat: api.Element.nextElementSibling +translation_of: Web/API/Element/nextElementSibling +--- +{{APIRef("DOM")}} + +**`Element.nextElementSibling`** は読み取り専用のプロパティで、この要素の親の子リスト内ですぐ次にある要素を返します。このノードがリストの最後のノードであった場合は `null` を返します。 + +## 構文 + +```js +// ゲッター +element = el.nextElementSibling; + +// セッターなし。読み取り専用プロパティ +``` + +## 例 + +```html +

Here is div-01

Here is div-02

+ + +``` + +この例は読み込み時に、コンソールに以下のような出力を行います。 + +``` +Siblings of div-01: +DIV +SCRIPT +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.previousElementSibling")}} -- cgit v1.2.3-54-g00ecf From 6a0af615e351a75f1c837bf88d90b34ba81bf463 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 8 Mar 2022 23:45:35 +0900 Subject: 2022/01/25 時点の英語版に基づき新規翻訳 (#4338) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/element/previouselementsibling/index.md | 68 ++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 files/ja/web/api/element/previouselementsibling/index.md (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/previouselementsibling/index.md b/files/ja/web/api/element/previouselementsibling/index.md new file mode 100644 index 0000000000..510b6efcc7 --- /dev/null +++ b/files/ja/web/api/element/previouselementsibling/index.md @@ -0,0 +1,68 @@ +--- +title: Element.previousElementSibling +slug: Web/API/Element/previousElementSibling +tags: + - API + - DOM + - Element + - プロパティ + - 読み取り専用 + - リファレンス +browser-compat: api.Element.previousElementSibling +translation_of: Web/API/Element/nextElementSibling +--- +{{APIRef("DOM")}} + +**`Element.previousElementSibling`** は読み取り専用のプロパティで、この要素 ({{domxref("Element")}}) の親の子リスト内ですぐ前にある要素を返します。このノードがリストの最初のノードであった場合は `null` を返します。 + +## 構文 + +```js +// ゲッター +element = el.previousElementSibling; + +// セッターなし。読み取り専用プロパティ +``` + +## 例 + +```html +

Here is div-01

Here is div-02

This is a list item

This is another list item

Here is div-03

+ + +``` + +この例は読み込み時に、ぺ0時に以下のような出力を行います。 + +``` +Siblings of div-03 + + 1. LI + 2. LI + 3. DIV + 4. DIV +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.nextElementSibling")}} -- cgit v1.2.3-54-g00ecf From fcaf278de3a2d71b1a94cabdaa934b895b3916bf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 28 Feb 2022 23:16:41 +0900 Subject: Element 以下のプロパティの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/attributes/index.html | 118 ------------ files/ja/web/api/element/attributes/index.md | 118 ++++++++++++ .../web/api/element/childelementcount/index.html | 42 ---- .../ja/web/api/element/childelementcount/index.md | 42 ++++ files/ja/web/api/element/children/index.html | 58 ------ files/ja/web/api/element/children/index.md | 58 ++++++ files/ja/web/api/element/classname/index.html | 35 ---- files/ja/web/api/element/classname/index.md | 35 ++++ files/ja/web/api/element/clientheight/index.html | 67 ------- files/ja/web/api/element/clientheight/index.md | 67 +++++++ files/ja/web/api/element/clientleft/index.html | 86 --------- files/ja/web/api/element/clientleft/index.md | 86 +++++++++ files/ja/web/api/element/clienttop/index.html | 37 ---- files/ja/web/api/element/clienttop/index.md | 37 ++++ files/ja/web/api/element/clientwidth/index.html | 65 ------- files/ja/web/api/element/clientwidth/index.md | 65 +++++++ files/ja/web/api/element/id/index.html | 57 ------ files/ja/web/api/element/id/index.md | 57 ++++++ files/ja/web/api/element/innerhtml/index.html | 213 --------------------- files/ja/web/api/element/innerhtml/index.md | 213 +++++++++++++++++++++ files/ja/web/api/element/localname/index.html | 87 --------- files/ja/web/api/element/localname/index.md | 87 +++++++++ files/ja/web/api/element/namespaceuri/index.html | 35 ---- files/ja/web/api/element/namespaceuri/index.md | 35 ++++ files/ja/web/api/element/outerhtml/index.html | 118 ------------ files/ja/web/api/element/outerhtml/index.md | 118 ++++++++++++ files/ja/web/api/element/prefix/index.html | 48 ----- files/ja/web/api/element/prefix/index.md | 48 +++++ files/ja/web/api/element/scrollheight/index.html | 173 ----------------- files/ja/web/api/element/scrollheight/index.md | 173 +++++++++++++++++ files/ja/web/api/element/scrollleft/index.html | 111 ----------- files/ja/web/api/element/scrollleft/index.md | 111 +++++++++++ files/ja/web/api/element/scrolltop/index.html | 92 --------- files/ja/web/api/element/scrolltop/index.md | 92 +++++++++ files/ja/web/api/element/scrollwidth/index.html | 125 ------------ files/ja/web/api/element/scrollwidth/index.md | 125 ++++++++++++ files/ja/web/api/element/tagname/index.html | 36 ---- files/ja/web/api/element/tagname/index.md | 36 ++++ 38 files changed, 1603 insertions(+), 1603 deletions(-) delete mode 100644 files/ja/web/api/element/attributes/index.html create mode 100644 files/ja/web/api/element/attributes/index.md delete mode 100644 files/ja/web/api/element/childelementcount/index.html create mode 100644 files/ja/web/api/element/childelementcount/index.md delete mode 100644 files/ja/web/api/element/children/index.html create mode 100644 files/ja/web/api/element/children/index.md delete mode 100644 files/ja/web/api/element/classname/index.html create mode 100644 files/ja/web/api/element/classname/index.md delete mode 100644 files/ja/web/api/element/clientheight/index.html create mode 100644 files/ja/web/api/element/clientheight/index.md delete mode 100644 files/ja/web/api/element/clientleft/index.html create mode 100644 files/ja/web/api/element/clientleft/index.md delete mode 100644 files/ja/web/api/element/clienttop/index.html create mode 100644 files/ja/web/api/element/clienttop/index.md delete mode 100644 files/ja/web/api/element/clientwidth/index.html create mode 100644 files/ja/web/api/element/clientwidth/index.md delete mode 100644 files/ja/web/api/element/id/index.html create mode 100644 files/ja/web/api/element/id/index.md delete mode 100644 files/ja/web/api/element/innerhtml/index.html create mode 100644 files/ja/web/api/element/innerhtml/index.md delete mode 100644 files/ja/web/api/element/localname/index.html create mode 100644 files/ja/web/api/element/localname/index.md delete mode 100644 files/ja/web/api/element/namespaceuri/index.html create mode 100644 files/ja/web/api/element/namespaceuri/index.md delete mode 100644 files/ja/web/api/element/outerhtml/index.html create mode 100644 files/ja/web/api/element/outerhtml/index.md delete mode 100644 files/ja/web/api/element/prefix/index.html create mode 100644 files/ja/web/api/element/prefix/index.md delete mode 100644 files/ja/web/api/element/scrollheight/index.html create mode 100644 files/ja/web/api/element/scrollheight/index.md delete mode 100644 files/ja/web/api/element/scrollleft/index.html create mode 100644 files/ja/web/api/element/scrollleft/index.md delete mode 100644 files/ja/web/api/element/scrolltop/index.html create mode 100644 files/ja/web/api/element/scrolltop/index.md delete mode 100644 files/ja/web/api/element/scrollwidth/index.html create mode 100644 files/ja/web/api/element/scrollwidth/index.md delete mode 100644 files/ja/web/api/element/tagname/index.html create mode 100644 files/ja/web/api/element/tagname/index.md (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/attributes/index.html b/files/ja/web/api/element/attributes/index.html deleted file mode 100644 index f3653263ef..0000000000 --- a/files/ja/web/api/element/attributes/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Element.attributes -slug: Web/API/Element/attributes -tags: - - API - - Attributes - - DOM - - Element - - Property - - プロパティ - - リファレンス - - 属性 -translation_of: Web/API/Element/attributes ---- -

- -

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')}}	初回定義

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

構文

cName = elementNodeReference.className;
-elementNodeReference.className = cName;

cName : クラス名（文字列）

例

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

注記

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

仕様書

DOM Level 2 HTML: className

概要

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

構文

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

cName : クラス名（文字列）

例

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

注記

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

仕様書

DOM Level 2 HTML: className

構文

- -

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 オブジェクトモデルで導入されたプロパティです。

- -

ブラウザーの互換性

- -

構文

+ +

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 オブジェクトモデルで導入されたプロパティです。

+ +

ブラウザーの互換性

+ +

構文

- -

var left = element.clientLeft;
-

- -

例

- -

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

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

注

- -

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

- -

要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 layout.scrollbar.side の設定に依存します

- -

Gecko ベースのアプリケーションは、 clientLeft を Gecko 1.9 (Firefox 3、 {{ - Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。

diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md new file mode 100644 index 0000000000..7a17600640 --- /dev/null +++ b/files/ja/web/api/element/clientleft/index.md @@ -0,0 +1,86 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +tags: +- API +- CSSOM View +- NeedsAgnostify +- NeedsMarkupWork +- Property +- Reference +browser-compat: api.Element.clientLeft +translation_of: Web/API/Element/clientLeft +--- +

+ +

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

+ +

注: 要素に + display: inline が設定されている場合、境界の幅に関わらず clientLeft は 0 を返します。

+ +

構文

+ +

var left = element.clientLeft;
+

+ +

例

+ +

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

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

注

+ +

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

+ +

要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 layout.scrollbar.side の設定に依存します

+ +

Gecko ベースのアプリケーションは、 clientLeft を Gecko 1.9 (Firefox 3、 {{ + Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。

diff --git a/files/ja/web/api/element/clienttop/index.html b/files/ja/web/api/element/clienttop/index.html deleted file mode 100644 index 95ae5ad2b3..0000000000 --- a/files/ja/web/api/element/clienttop/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: element.clientTop -slug: Web/API/Element/clientTop -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Element/clientTop ---- -

- {{ApiRef}}

概要

要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。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 オブジェクトモデルで最初に導入されました。

リファレンス

MSDN's clientTop definition（日本語版）
MSDN's Measuring Element Dimension and Location（日本語版）

diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md new file mode 100644 index 0000000000..95ae5ad2b3 --- /dev/null +++ b/files/ja/web/api/element/clienttop/index.md @@ -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}}

概要

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

構文

top = element.clientTop;
+

例

padding-top

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 オブジェクトモデルで最初に導入されました。

リファレンス

MSDN's clientTop definition（日本語版）
MSDN's Measuring Element Dimension and Location（日本語版）

diff --git a/files/ja/web/api/element/clientwidth/index.html b/files/ja/web/api/element/clientwidth/index.html deleted file mode 100644 index 47753e0077..0000000000 --- a/files/ja/web/api/element/clientwidth/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Element.clientWidth -slug: Web/API/Element/clientWidth -tags: - - API - - CSSOM View - - Property - - Reference - - プロパティ -translation_of: Web/API/Element/clientWidth ---- -

- -

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 オブジェクトモデルにおいて初めて導入されました。

- -

ブラウザーの互換性

- -

構文

+ +

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 オブジェクトモデルにおいて初めて導入されました。

- -

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/id/index.md b/files/ja/web/api/element/id/index.md new file mode 100644 index 0000000000..46cf1c1a9e --- /dev/null +++ b/files/ja/web/api/element/id/index.md @@ -0,0 +1,57 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Gecko +translation_of: Web/API/Element/id +--- +

+ +

概要

+ +

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

+ +

構文

+ +

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

+ +

注意

+ +

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

+ +

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

+ +

仕様

+ + + + + + + + + + + + + + + + +

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

+ +

diff --git a/files/ja/web/api/element/innerhtml/index.html b/files/ja/web/api/element/innerhtml/index.html deleted file mode 100644 index bd63262b6c..0000000000 --- a/files/ja/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Element.innerHTML -slug: Web/API/Element/innerHTML -tags: - - API - - DOM - - DOM Parsing - - Element - - Parsing HTML - - Property - - Reference - - innerHTML - - プロパティ -browser-compat: api.Element.innerHTML -translation_of: Web/API/Element/innerHTML ---- -

- -

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

- -

メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&", "<", ">" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{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 エンティティの "<" に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 innerHTML の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。

- -

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

- -

操作の詳細

- -

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

- -

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

- -

セキュリティの考慮事項

- -

ウェブページにテキストを挿入するために 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;
-}

- -

結果

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -

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

+ +

let contents = myElement.innerHTML;

+ +

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

+ +

要素の中身の置き換え

+ +

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

+ +

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

+ +

document.body.innerHTML = "";

+ +

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

+ +

操作の詳細

+ +

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

+ +

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

+ +

セキュリティの考慮事項

+ +

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

+ +

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

+ +

例

+ +

この例は 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...");
+

+ +

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>

+ +

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

- -

ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 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 要素では大文字で返します。

- -

要素の 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') }}

+ +

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

+ +

メモ

+ +

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

+ +

ブラウザーの対応

+ +

構文

- -

string = element.prefix
-

- -

例

- -

次の例はコンソールに "x" を記録します。

- -

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

- -

注

- -

これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -

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

+ +

padding-top

+ +

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

- -

// スクロールしたピクセル数を取得
-var sLeft = element.scrollLeft;
-

- -

sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。

- -

値の設定

- -

// スクロールしたピクセル数を設定
-element.scrollLeft = 10;
-

- -

scrollLeft は任意の整数値で設定することができます。しかし、

- -

要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 scrollLeft は 0 に設定されます。
指定された値が 0 より小さかったら (右書きの要素では 0 より大きかったら)、 scrollLeft は 0 に設定されます。
指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollLeft は最大値に設定されます。

+ +

// スクロールしたピクセル数を設定
+element.scrollLeft = 10;
+

+ +

scrollLeft は任意の整数値で設定することができます。しかし、

+ +

要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 scrollLeft は 0 に設定されます。
指定された値が 0 より小さかったら (右書きの要素では 0 より大きかったら)、 scrollLeft は 0 に設定されます。
指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollLeft は最大値に設定されます。

- -

// スクロールしたピクセル数を取得
-var intElemScrollTop = someElement.scrollTop;
-

- -

このコードを実行した後、 intElemScrollTop はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。

- -

// スクロールするピクセル数を設定
-element.scrollTop = intValue;
-

- -

scrollTop は任意の整数値で設定することができます。しかし、

- -

要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "non-scrollable" のプロパティがある場合)、 scrollTop は 0 に設定されます。
scrollTop は負の数には対応していません。代わりに、 0 に戻ります。
指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollTop は最大値に設定されます。

- -

例

- -

padding-top

-If you can see this, scrollTop = 0 - -

-If you can see this, scrollTop is > 0 - -

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

- -

ブラウザーの互換性

- -

構文

+ +

// スクロールしたピクセル数を取得
+var intElemScrollTop = someElement.scrollTop;
+

+ +

このコードを実行した後、 intElemScrollTop はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。

+ +

// スクロールするピクセル数を設定
+element.scrollTop = intValue;
+

+ +

scrollTop は任意の整数値で設定することができます。しかし、

+ +

要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "non-scrollable" のプロパティがある場合)、 scrollTop は 0 に設定されます。
scrollTop は負の数には対応していません。代わりに、 0 に戻ります。
指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollTop は最大値に設定されます。

+ +

例

+ +

padding-top

+If you can see this, scrollTop = 0 + +

+If you can see this, scrollTop is > 0 + +

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

+ +

ブラウザーの互換性

+ +

構文

- -

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")}}	初回定義

- -

ブラウザーの対応

- -

構文

+ +

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")}}	初回定義

+ +

ブラウザーの対応

+ +

概要

要素の名前を返します。

構文

elementName = element.tagName
-

elementName : 現在の要素の名前を含む文字列

注記

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/tagname/index.md b/files/ja/web/api/element/tagname/index.md new file mode 100644 index 0000000000..e10c5acf43 --- /dev/null +++ b/files/ja/web/api/element/tagname/index.md @@ -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
+

elementName : 現在の要素の名前を含む文字列

注記

例

以下のようなマークアップを想定します。

<span id="born">When I was born...</span>
+

上記 HTML に対し以下のスクリプトを実行した場合...

var span = document.getElementById("born");
+
+alert(span.tagName);
+

XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。

仕様

-- cgit v1.2.3-54-g00ecf From 10ba082441b43b1b232a2439ee2d181316bae8fa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 28 Feb 2022 23:27:56 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/attributes/index.md | 136 ++++++++------------- .../ja/web/api/element/childelementcount/index.md | 39 +++--- files/ja/web/api/element/children/index.md | 47 ++++--- files/ja/web/api/element/classname/index.md | 82 ++++++++----- files/ja/web/api/element/clientheight/index.md | 66 ++++------ files/ja/web/api/element/clientwidth/index.md | 64 ++++------ files/ja/web/api/element/localname/index.md | 96 +++++++-------- files/ja/web/api/element/prefix/index.md | 44 +++---- files/ja/web/api/element/tagname/index.md | 85 ++++++++----- 9 files changed, 324 insertions(+), 335 deletions(-) (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/attributes/index.md b/files/ja/web/api/element/attributes/index.md index f3653263ef..05f85d4bf7 100644 --- a/files/ja/web/api/element/attributes/index.md +++ b/files/ja/web/api/element/attributes/index.md @@ -6,113 +6,85 @@ tags: - Attributes - DOM - Element - - Property - プロパティ - リファレンス - - 属性 +browser-compat: api.Element.attributes translation_of: Web/API/Element/attributes --- -

+{{ APIRef("DOM") }} -

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

構文

+## 構文 -

var attr = element.attributes;
-

+```js +var attr = element.attributes; +``` -

例

+## 例 -

基本的な例

+### 基本的な例 -

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

+var atts = para.attributes; +``` -

要素の属性を列挙する

+### 要素の属性を列挙する -

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

<!DOCTYPE html>
+```html
+
 
-<html>
+
 
- <head>
-  <title>Attributes example</title>
-  <script type="text/javascript">
+ 
+  Attributes example
+  
+ 
+
+
+ サンプルの段落
+ 
+  
+    
+    
+  
+ 
+
+
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 返却される値のインターフェースである {{domxref("NamedNodeMap")}}
+- [quirksmode](https://www.quirksmode.org/dom/w3c_core.html#attributes) におけるブラウザー間の互換性の考慮事項
diff --git a/files/ja/web/api/element/childelementcount/index.md b/files/ja/web/api/element/childelementcount/index.md
index c3520c9a31..1e869a7dc2 100644
--- a/files/ja/web/api/element/childelementcount/index.md
+++ b/files/ja/web/api/element/childelementcount/index.md
@@ -4,39 +4,40 @@ slug: Web/API/Element/childElementCount
 tags:
   - API
   - DOM
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
 browser-compat: api.Element.childElementCount
 translation_of: Web/API/Element/childElementCount
 original_slug: Web/API/ParentNode/childElementCount
 ---
-{{ APIRef("DOM") }}
+{{ APIRef("DOM") }}
 
-Element.childElementCount は読み取り専用のプロパティで、この要素の子要素の数を返します。
+**`Element.childElementCount`** は読み取り専用のプロパティで、この要素の子要素の数を返します。
 
-構文
+## 構文
 
-element.childElementCount;
+```js
+element.childElementCount;
+```
 
-例
+## 例
 
-let sidebar = document.getElementById('sidebar');
-if (sidebar.childElementCount > 0) {
-  // 何もしない
+```js
+let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount > 0) {
+  // 何かを行う
 }
-
+```
 
-仕様書
+## 仕様書
 
 {{Specifications}}
 
-ブラウザーの互換性
+## ブラウザーの互換性
 
-{{Compat}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
-  {{domxref("Document.childElementCount")}}
-  {{domxref("DocumentFragment.childElementCount")}}
-
+- {{domxref("Document.childElementCount")}}
+- {{domxref("DocumentFragment.childElementCount")}}
diff --git a/files/ja/web/api/element/children/index.md b/files/ja/web/api/element/children/index.md
index 5dd887af4f..01e0dc6627 100644
--- a/files/ja/web/api/element/children/index.md
+++ b/files/ja/web/api/element/children/index.md
@@ -6,53 +6,50 @@ tags:
   - DOM
   - Element
   - HTMLCollection
-  - Property
+  - プロパティ
   - children
 browser-compat: api.Element.children
 translation_of: Web/API/Element/children
 original_slug: Web/API/ParentNode/children
 ---
-{{ APIRef("DOM") }}
+{{ APIRef("DOM") }}
 
-children は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。
+**`children`** は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。
 
-Element.children は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。
+`Element.children` は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。
 
-構文
+## 構文
 
--// Getter
+```js
+// ゲッター
 collection = myElement.children;
 
-// No setter; read-only property
-
+// セッターはありません。読み取り専用プロパティです。
+```
 
-返値
+### 返値
 
-生きた {{ domxref("HTMLCollection") }} で、 node の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。
+生きた {{ domxref("HTMLCollection") }} で、 `node` の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。
 
-ノードが子要素を持たない場合、 children は要素を含まず、length は 0 です。
+ノードが子要素を持たない場合、 `children` は要素を含まず、`length` は `0` です。
 
-例 
+## 例
 
-const myElement = document.getElementById('foo');
-for (let i = 0; i < myElement.children.length; i++) {
+```js
+const myElement = document.getElementById('foo');
+for (let i = 0; i < myElement.children.length; i++) {
   console.log(myElement.children[i].tagName);
 }
-
+```
 
-仕様書
+## 仕様書
 
 {{Specifications}}
 
-ブラウザーの互換性
+## ブラウザーの互換性
 
-{{Compat}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
-  
-    {{domxref("Node.childNodes")}}
-  
-
+- {{domxref("Node.childNodes")}}
diff --git a/files/ja/web/api/element/classname/index.md b/files/ja/web/api/element/classname/index.md
index 00f15100e7..bbdbcc000b 100644
--- a/files/ja/web/api/element/classname/index.md
+++ b/files/ja/web/api/element/classname/index.md
@@ -1,35 +1,61 @@
 ---
-title: element.className
+title: Element.className
 slug: Web/API/Element/className
 tags:
+  - API
   - DOM
   - Gecko
-  - Gecko DOM Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.className
 translation_of: Web/API/Element/className
 ---
-
- {{ApiRef}}
-概要
-className は要素の class 属性の値の取得 / 設定に用います。
-構文
-cName = elementNodeReference.className;
-elementNodeReference.className = cName;
-
- cName : クラス名（文字列）
-
-例
-var elm = document.getElementById("div1"); //対象要素を取得
-
-if (elm.className == "fixed") {
-  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
-}
-注記
-"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために className という名称となっています。
-仕様書
-
- DOM Level 2 HTML: className
-
-関連情報
-
- {{domxref("element.classList")}}
-
+{{APIRef("DOM")}}
+
+**`className`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)の値を取得したり設定したりします。
+
+## 構文
+
+```js
+var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+```
+
+- `cName` は文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。
+
+## 例
+
+```js
+let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+```
+
+## メモ
+
+このプロパティでは、 `className` という名前が `class` の代わりに使用されています。
+これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。
+
+`className` は {{domxref("SVGAnimatedString")}} のインスタンスにも、 `element` が {{domxref("SVGElement")}} であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の `className` は {{domxref("Element.getAttribute")}} や {{domxref("Element.setAttribute")}} を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)が空であった場合、 {{domxref("Element.getAttribute")}} は`""` ではなく [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) を返すことに注意してください。
+
+```js
+elm.setAttribute('class', elm.getAttribute('class'))
+```
+
+> **Note:** `class` は **HTML 属性**であり、 `className` は **DOM プロパティ**です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("element.classList")}}
diff --git a/files/ja/web/api/element/clientheight/index.md b/files/ja/web/api/element/clientheight/index.md
index 4cde36518d..15d1cc596a 100644
--- a/files/ja/web/api/element/clientheight/index.md
+++ b/files/ja/web/api/element/clientheight/index.md
@@ -5,63 +5,47 @@ tags:
   - API
   - CSSOM View
   - NeedsMarkupWork
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientHeight
 translation_of: Web/API/Element/clientHeight
 ---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}
 
-Element.clientHeight は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。
+**`Element.clientHeight`** は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）水平スクロールバーは含みません。
 
-clientHeight は CSS height + CSS padding - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。
+`clientHeight` は CSS `height` + CSS `padding` - 水平スクロールバーの高さ (もしあれば) として計算できます。
 
-clientHeight がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。これは clientHeight の特例です。
+`clientHeight` がルート要素（`` 要素）（または文書が後方互換モードである場合は ``）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientHeight` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight)。
 
-
-注: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-構文
+## 構文
 
-var intElemClientHeight = element.clientHeight;
+```js
+var intElemClientHeight = element.clientHeight;
+```
 
-intElemClientHeight は element の clientHeight をピクセル単位で表す整数値です。 clientHeight プロパティは読み取り専用です。
+`intElemClientHeight` は `element` の `clientHeight` をピクセル単位で表す整数値です。 `clientHeight` プロパティは読み取り専用です。
 
-例
+## 例
 
-
+![](dimensions-client.png)
 
-仕様書
+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-仕様書 状態 備考
{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}} {{Spec2("CSSOM View")}} 
+{{Specifications}}
 
-注
+### メモ
 
-clientHeight は Internet Explorer オブジェクトモデルで導入されたプロパティです。
+`clientHeight` は Internet Explorer オブジェクトモデルで導入されたプロパティです。
 
-ブラウザーの互換性
+## ブラウザーの互換性
 
-{{Compat("api.Element.clientHeight")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{domxref("HTMLElement.offsetHeight")}}
- {{domxref("Element.scrollHeight")}}
- 要素の寸法の決定
-
+- {{domxref("HTMLElement.offsetHeight")}}
+- {{domxref("Element.scrollHeight")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/ja/web/api/element/clientwidth/index.md b/files/ja/web/api/element/clientwidth/index.md
index 47753e0077..af5d5481ca 100644
--- a/files/ja/web/api/element/clientwidth/index.md
+++ b/files/ja/web/api/element/clientwidth/index.md
@@ -4,62 +4,46 @@ slug: Web/API/Element/clientWidth
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
+  - NeedsMarkupWork
+  - リファレンス
   - プロパティ
+browser-compat: api.Element.clientWidth
 translation_of: Web/API/Element/clientWidth
 ---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}
 
-Element.clientWidth プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。
+**`Element.clientWidth`** プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）垂直スクロールバーは含みません。
 
-clientWidth がルート要素 (<html> 要素) (または文書が後方互換モードである場合は <body>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。これは clientWidth の特例です。
+`clientWidth` がルート要素（`` 要素）（または文書が後方互換モードである場合は ``）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientWidth` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth)。
 
-
-メモ: このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-構文
+## 構文
 
-var intElemClientWidth = element.clientWidth;
+```js
+var intElemClientWidth = element.clientWidth;
+```
 
-intElemClientWidth は element の clientWidth をピクセル数で表す整数値です。 clientWidth プロパティは読み取り専用です。
+`intElemClientWidth` は `element` の `clientWidth` をピクセル数で表す整数値です。 `clientWidth` プロパティは読み取り専用です。
 
-例
+## 例
 
-
+![](dimensions-client.png)
 
-仕様書
+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-仕様書 状態 備考
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}} {{Spec2("CSSOM View")}} 
+{{Specifications}}
 
-メモ
+## メモ
 
-clientWidth は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。
+`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。
 
-ブラウザーの互換性
+## ブラウザーの互換性
 
-{{Compat("api.Element.clientWidth")}}
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- {{domxref("HTMLElement.offsetWidth")}}
- {{domxref("Element.scrollWidth")}}
- 要素の寸法の決定
-
+- {{domxref("HTMLElement.offsetWidth")}}
+- {{domxref("Element.scrollWidth")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/ja/web/api/element/localname/index.md b/files/ja/web/api/element/localname/index.md
index b92152fbfa..c676607ad5 100644
--- a/files/ja/web/api/element/localname/index.md
+++ b/files/ja/web/api/element/localname/index.md
@@ -6,82 +6,80 @@ tags:
 - DOM
 - NeedsBrowserCompatibility
 - NeedsMobileBrowserCompatibility
-- Property
-- Reference
+- プロパティ
+- リファレンス
 browser-compat: api.Element.localName
 translation_of: Web/API/Element/localName
 ---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}
 
-Element.localName は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。
+**`Element.localName`** は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。
 
-構文
+## 構文
 
-name = element.localName
-
+```js
+name = element.localName
+```
 
-返値
+### 返値
 
-要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
-
+要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
 
-例
+## 例
 
-(text/xml や application/xhtml+xml のような、XML のコンテンツタイプで送出される必要があります。)
+(`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[
+```xml
+
+
+  
+
+
+  
+    viewBox="0 0 100 100">
+    
+  
+  +</body>
+</html>
+```
 
-<h2 id="Notes">注</h2>
+## メモ
 
-<p>ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p>
+ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、`ecomm:partners` という修飾名において、 `partners` はローカル名、`ecomm` は接頭辞です。
 
-<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
-  <ecomm:partners>
-    <ecomm:partner id="1001">Tony's Syrup Warehouse
-    </ecomm:partner>
-  </ecomm:partner>
-</ecomm:business>
-</pre>
+```xml
+<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+```
 
-<div class="note">
-<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。</p>
-</div>
+> **Note:** {{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 要素では大文字で返します。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.prefix")}}</li>
-  <li>{{domxref("Attr.localName")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.localName")}}
diff --git a/files/ja/web/api/element/prefix/index.md b/files/ja/web/api/element/prefix/index.md
index b2baf67888..e45b334480 100644
--- a/files/ja/web/api/element/prefix/index.md
+++ b/files/ja/web/api/element/prefix/index.md
@@ -6,43 +6,43 @@ tags:
 - DOM
 - NeedsBrowserCompatibility
 - NeedsMobileBrowserCompatibility
-- Property
-- Reference
+- プロパティ
+- リファレンス
 browser-compat: api.Element.prefix
 translation_of: Web/API/Element/prefix
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.prefix</strong></code> は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は <code>null</code> を返します。</p>
+**`Element.prefix`** は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は `null` を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js"><var>string</var> = <var>element</var>.prefix
-</pre>
+```js
+string = element.prefix
+```
 
-<h2 id="Examples">例</h2>
+## 例
 
-<p>次の例はコンソールに "x" を記録します。</p>
+次の例はコンソールに "x" を記録します。
 
-<pre class="brush:xml"><x:div onclick="console.log(this.prefix)"/>
-</pre>
+```xml
+<x:div onclick="console.log(this.prefix)"/>
+```
 
-<h2 id="Notes">注</h2>
+## 注
 
-<p>これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。</p>
+これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.localName")}}</li>
-  <li>{{domxref("Attr.prefix")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.localName")}}
+- {{domxref("Attr.prefix")}}
diff --git a/files/ja/web/api/element/tagname/index.md b/files/ja/web/api/element/tagname/index.md
index e10c5acf43..520ec73461 100644
--- a/files/ja/web/api/element/tagname/index.md
+++ b/files/ja/web/api/element/tagname/index.md
@@ -1,36 +1,63 @@
 ---
-title: element.tagName
+title: Element.tagName
 slug: Web/API/Element/tagName
 tags:
+  - API
   - DOM
+  - DOM リファレンス
+  - Element
   - Gecko
-  - Gecko DOM Reference
+  - NeedsBrowserCompatibility
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+  - tagName
+browser-compat: api.Element.tagName
 translation_of: Web/API/Element/tagName
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の名前を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>elementName</var> = element.tagName
-</pre>
-<ul>
- <li><code>elementName</code> : 現在の要素の名前を含む文字列</li>
-</ul>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p>
-<h2 id="Example" name="Example">例</h2>
-<p>以下のようなマークアップを想定します。</p>
-<pre class="brush:html"><span id="born">When I was born...</span>
-</pre>
-<p>上記 HTML に対し以下のスクリプトを実行した場合...</p>
-<pre class="brush:js">var span = document.getElementById("born");
-
-alert(span.tagName);
-</pre>
-<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p>
-<h2 id="Specifications" name="Specifications">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
+{{ApiRef("DOM")}}
+
+**`tagName`** は {{domxref("Element")}} インターフェイスのプロパティで、呼び出された要素のタグ名を返します。
+
+例えば、この要素が {{HTMLElement("img")}} であれば、 `tagName` プロパティは `"IMG"` となります（HTML 文書の場合。 XML/XHTML 文書では大文字小文字が違うかもしれません）。
+
+## 構文
+
+```js
+elementName = Element.tagName;
+```
+
+### 値
+
+この要素のタグ名を示す文字列です。文字列が大文字であるかどうかは、文書型によって変わります。
+
+- HTML 文書を表す DOM ツリーでは、タグ名は常に大文字に正規化されます。例えば、 `tagName` が {{HTMLElement("div")}} 要素で呼び出された場合は、 `"DIV"` を返します。
+- XML の DOM ツリー内にある要素のタグ名は、元の XML ファイルに書かれているのと大文字小文字が同じになります。 XML 文書に `"<SomeTag>"` タグがあった場合、 `tagName` プロパティの値は `"SomeTag"` になります。
+
+{{domxref("Element")}} オブジェクトにおいては、 `tagName` の値は要素オブジェクトの継承元である {{domxref("Node")}} の {{domxref("Node.nodeName", "nodeName")}} プロパティの値と同じになります。
+
+## 例
+
+### HTML
+
+```html
+<span id="born">When I was born...</span>
+```
+
+### JavaScript
+
+```js
+var span = document.getElementById("born");
+console.log(span.tagName);
+```
+
+XHTML (および他の XML 形式) では、元の大文字小文字が保持されるので、元のタグ名が小文字で生成されている場合は `"span"` が出力されます。
+HTML では、元の文書を生成したときに大文字小文字のどちらが使われたかに関わらず、 `"SPAN"` と出力されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 3382aad40019bc130174bcfecea68884bc4922a2 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 00:28:03 +0900
Subject: 2022/01/25 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/clientleft/index.md | 115 ++++++++++++---------------
 files/ja/web/api/element/clienttop/index.md  | 104 ++++++++++++++++--------
 2 files changed, 123 insertions(+), 96 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md
index 7a17600640..0f7ccf8fb9 100644
--- a/files/ja/web/api/element/clientleft/index.md
+++ b/files/ja/web/api/element/clientleft/index.md
@@ -2,85 +2,72 @@
 title: Element.clientLeft
 slug: Web/API/Element/clientLeft
 tags:
-- API
-- CSSOM View
-- NeedsAgnostify
-- NeedsMarkupWork
-- Property
-- Reference
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
 browser-compat: api.Element.clientLeft
 translation_of: Web/API/Element/clientLeft
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
+要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 `clientLeft` は、左マージンまたは左パディングを含みません。 `clientLeft` は読み取り専用です。
 
-<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<div class="note">
-	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-	</p>
-</div>
+> **Note:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。
 
-<p style="height: 5px !important; margin: 0px;"></p>
+## 構文
 
-<div class="note">
-	<p><strong>注:</strong> 要素に
-		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
-</div>
+```js
+var left = element.clientLeft;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。
+
+### HTML
 
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
-</pre>
-
-<h2 id="Example">例</h2>
-
-<div id="offsetContainer"
-	style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-	<div id="idDiv"
-		style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-		<p id="PaddingTopLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-top</p>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-			nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-		</p>
-
-		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-			fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-			culpa qui officia deserunt mollit anim id est laborum.</p>
-
-		<p id="PaddingBottomLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-bottom</p>
-	</div>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong>
-	<em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
 </div>
+```
 
-<h2 id="Specifications">仕様書</h2>
+### CSS
 
-{{Specifications}}
+```css
+
+#container {
+  margin: 3rem;
+  background-color: rgb(255, 255, 204);
+  border: 4px dashed black;
+}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+#contained {
+  margin: 1rem;
+  border-left: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
 
-<p>{{Compat}}</p>
+### 結果
 
-<h2 id="Notes">注</h2>
+{{EmbedLiveSample("Example", 400, 350)}}
 
-<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
+## 仕様書
+
+{{Specifications}}
 
-<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>
+## ブラウザーの互換性
 
-<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
-	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md
index 95ae5ad2b3..1438ca59a4 100644
--- a/files/ja/web/api/element/clienttop/index.md
+++ b/files/ja/web/api/element/clienttop/index.md
@@ -1,37 +1,77 @@
 ---
-title: element.clientTop
+title: Element.clientTop
 slug: Web/API/Element/clientTop
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientTop
 translation_of: Web/API/Element/clientTop
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p>
-<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop;
-</pre>
-<h2 id="Example" name="Example">例</h2>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
-  <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
-  <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{mediawiki.external('endif')}}</span></div>
-<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>W3C の仕様の一部ではありません。</p>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-<h2 id="References" name="References">リファレンス</h2>
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li>
- <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li>
-</ul>
+{{ APIRef("DOM") }}
+
+要素の上境界の幅をピクセル数で表します。これは要素の読み取り専用で整数型のプロパティです。
+
+たまたま、 2 つの位置（`offsetTop` とクライアント領域の上端）の間にあるのは、要素の境界だけです。これは、 `offsetTop` が（マージンではなく）境界の上端の位置を示し、クライアント領域は境界の直下から始まるからです（クライアント領域はパディングを含みます）。したがって、 **clientTop** 値は常に "border-top-width" に対する `.getComputedStyle()` 値の整数部分と一致します。（実際には Math.round(parseFloat()) かもしれません。）例えば、計算された "border-top-width" が 0 の場合、 **`clientTop`** も 0 になります。
+
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+
+## 構文
+
+```js
+var top = element.clientTop;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-top` が 24px の黒になっています。 `clientTop` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。
+
+### HTML
+
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+
+#container {
+  margin: 3rem;
+  background-color: rgb(255, 255, 204);
+  border: 4px dashed black;
+}
+
+#contained {
+  margin: 1rem;
+  border-top: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Example", 400, 350)}}
+
+## メモ
+
+`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From da6cac831bf3c0dbb0e744f8cb92448932b515bf Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 00:57:33 +0900
Subject: 2022/01/14 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/id/index.md | 63 +++++++++++++++---------------------
 1 file changed, 26 insertions(+), 37 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/id/index.md b/files/ja/web/api/element/id/index.md
index 46cf1c1a9e..9cd313c8ca 100644
--- a/files/ja/web/api/element/id/index.md
+++ b/files/ja/web/api/element/id/index.md
@@ -1,57 +1,46 @@
 ---
-title: element.id
+title: Element.id
 slug: Web/API/Element/id
 tags:
+  - API
   - DOM
-  - Gecko
+  - Element
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.id
 translation_of: Web/API/Element/id
 ---
-<div>{{ApiRef}}</div>
+{{ ApiRef("DOM") }}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`id`** は {{domxref("Element")}} インターフェイスのプロパティで、グローバル属性の [**`id`**](/ja/docs/Web/HTML/Global_attributes/id) を反映した要素の識別子を表します。
 
-<p>要素の 識別子 (identifier) を取得 / 設定します。</p>
+`id` の値が空文字列でない場合は、文書内で固有でなければなりません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+`id` はよく {{domxref("Document.getElementById()", "getElementById()")}} で特定の要素を受け取るために使用します。他の一般的な用途としては、要素の [ID をセレクターとして](/ja/docs/Web/CSS/ID_selectors) [CSS](/ja/docs/Web/CSS) で文書をスタイル付けするために使用されます。
 
-<pre class="syntaxbox"><var>idStr</var> =<em>element</em>.id; // 取得
-<em>element</em>.id = <var>idStr</var>; // 設定
-</pre>
+> **Note:** 識別子は大文字小文字の区別がありますが、大文字小文字の区別だけで見分ける ID を作ることは避けてください。
 
-<h2 id="Notes" name="Notes">注意</h2>
 
-<p>ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 <code>id</code> の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。</p>
+## 構文
 
-<p>document によっては(特に <a href="/ja/docs/Web/HTML">HTML</a> 、 <a href="/ja/docs/XUL">XUL</a> 、<a href="/ja/docs/SVG">SVG</a>)、要素の <code>id</code> は次のような要素の属性として指定することができます: <code><div id="part_3"></code>.</p>
+```js
+var idStr = element.id; // id を取得
+```
 
-<p>但しカスタム XML 文書に於いては、<code>id</code> 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『<a href="http://blog.bitflux.ch/wiki/GetElementById_Pitfalls">getElementById Pitfalls (getElementById の落とし穴)</a>』をご覧下さい。</p>
+```js
+element.id = 'newid'; // id を設定
+```
 
-<p><code>id</code> 属性は、<a href="/ja/docs/CSS">スタイルシート</a>でスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した <code>id</code> 属性値の先頭に <code>#</code> を付けます。</p>
+- `idStr` はこの要素の識別子です。
 
-<pre class="brush:css">#thisID {
-  background: darkblue;
-  color; ghostwhite;
-}</pre>
+## 仕様書
 
-<p><code>id</code> 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "<code>thisID</code>" と "<code>ThisID</code>" は別の <code>id</code> として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : <a href="/ja/docs/Case_Sensitivity_in_class_and_id_Names">class 属性 / id 属性 / name 属性はケースセンシティブである</a>)</p>
+{{Specifications}}
 
-<h2 id="Specification" name="Specification">仕様</h2>
+## ブラウザーの互換性
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{Compat}}
 
-<p> </p>
+## 関連情報
+
+- DOM の [**id**](/ja/docs/Web/HTML/Global_attributes/id) グローバル属性
-- 
cgit v1.2.3-54-g00ecf


From 239b41906761fa70d23244f8bf068391e3e6366a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 23:20:15 +0900
Subject: 2022/01/22 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/namespaceuri/index.md | 79 +++++++++++++++++---------
 1 file changed, 51 insertions(+), 28 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/namespaceuri/index.md b/files/ja/web/api/element/namespaceuri/index.md
index ebf84fb77c..cd898c602d 100644
--- a/files/ja/web/api/element/namespaceuri/index.md
+++ b/files/ja/web/api/element/namespaceuri/index.md
@@ -1,35 +1,58 @@
 ---
-title: Node.namespaceURI
+title: Element.namespaceURI
 slug: Web/API/Element/namespaceURI
 tags:
+  - API
   - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
-translation_of: Web/API/Node/namespaceURI
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.namespaceURI
+translation_of: Web/API/Element/namespaceURI
 original_slug: Web/API/Node/namespaceURI
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p>ノードの名前空間 URI か、もし指定されていなければ <code>null</code>(読み込み専用)。</p>
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-<pre class="eval"><i>namespace</i> =<i>node</i>.namespaceURI
-</pre>
-<ul>
- <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li>
-</ul>
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-<p>この断片では、ノードの <a href="/ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code><browser/></code> と理解されます。</p>
-<pre>if (node.localName == "browser" &&
-    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // これは XUL browser です。
+{{APIRef("DOM")}}
+
+**`Element.namespaceURI`** は読み取り専用のプロパティで、この要素の名前空間 URI を返します。この要素が名前空間に所属していない場合は `null` を返します。
+
+## 構文
+
+```js
+namespace = element.namespaceURI
+```
+
+## 例
+
+このスニペットでは、ある要素が {{domxref("Element.localName", "localName")}} と `namespaceURI` で調べます。この `namespaceURI` は XUL の名前空間を返し、 `localName` は "browser" を返すので、このノードは XUL の `<browser/>` と解釈されます。
+
+```js
+if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // これは XUL browser です
 }
-</pre>
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
-<p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p>
-<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="/ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p>
-<p>DOM Level 2 の <a href="/ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p>
-<p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></p>
+```
+
+## メモ
+
+これは、スコープ内の名前空間宣言を調べて名前空間を検索した結果であり、計算値ではありません。ノードの名前空間 URI は、ノードの生成時に凍結されます。
+
+Firefox 3.5 以前では、 HTML 文書中の HTML 要素の名前空間 URI は `null` です。それ以降のバージョンでは、 HTML5 に準拠し、 XHTML と同様に [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) となります。
+
+DOM Level 2 のメソッド [document.createElementNS](/en-US/docs/Web/API/Document/createElementNS) を用いると、指定した `namespaceURI` を持つ要素を作成することができる。
+
+DOM はそれ自体で名前空間の検証を行ったり強制したりすることはありません。必要な検証を行うのは DOM アプリケーションに任されています。また、一度特定の要素に関連付けられた名前空間接頭辞は、変更することができないことに注意しましょう。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.localName")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.namespaceURI")}}
-- 
cgit v1.2.3-54-g00ecf


From f1de0acba8891d05407df18d01153c1f368533b2 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 23:33:48 +0900
Subject: 2021/12/08 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/outerhtml/index.md | 184 +++++++++++++++-------------
 1 file changed, 99 insertions(+), 85 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/outerhtml/index.md b/files/ja/web/api/element/outerhtml/index.md
index 1b476879bf..3b6278d25e 100644
--- a/files/ja/web/api/element/outerhtml/index.md
+++ b/files/ja/web/api/element/outerhtml/index.md
@@ -4,115 +4,129 @@ slug: Web/API/Element/outerHTML
 tags:
   - API
   - DOM
-  - DOM Parsing
+  - DOM 解釈
   - Element
+  - NeedsMobileBrowserCompatibility
   - Parsing
-  - Property
-  - Reference
-  - Serialization
+  - プロパティ
+  - リファレンス
+  - シリアライズ
   - Serializing
   - outerHTML
+browser-compat: api.Element.outerHTML
 translation_of: Web/API/Element/outerHTML
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p>
+**`outerHTML`** は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで、指定された文字列を解釈したノードの要素に置き換えることができます。
 
-<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p>
+要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML;
+```js
+var content = element.outerHTML;
 
-<var>element</var>.outerHTML = <var>htmlString</var>;
-</pre>
+element.outerHTML = htmlString;
+```
 
-<h3 id="Value" name="Value">値</h3>
+### 値
 
-<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p>
+`outerHTML` の値を読み取ると、 `element` およびその子孫を HTML にシリアライズしたものを含む {{domxref("DOMString")}} が返されます。 `outerHTML` の値を設定すると、その要素とそのすべての子孫を、指定された `htmlString` を解釈して構築された新しい DOM ツリーで置き換えます。
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+### 例外
 
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd>
-</dl>
+- `SyntaxError` {{domxref("DOMException")}}
+  - : `outerHTML` に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。
+- `NoModificationAllowedError` {{domxref("DOMException")}}
+  - : `outerHTML` を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p>
+要素の `outerHTML` プロパティの値を得る例を示します。
 
-<pre class="brush: js">// HTML:
-// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
+### HTML
 
-d = document.getElementById("d");
+```html
+<div id="d">
+  <p>Content</p>
+  <p>Further Elaborated</p>
+</div>
+```
+
+### Javascript
+
+```js
+var d = document.getElementById("d");
 console.log(d.outerHTML);
 
-// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
-// が、コンソールウィンドウに出力されます。
-</pre>
+// 文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+// がコンソールウィンドウに書き出されます。
+```
+
+次の例では、 `outerHTML` プロパティに値を設定し、ノードを置換します。
+
+### HTML
+
+```html
+<div id="container">
+  <div id="d">これは div です。</div>
+</div>
+```
 
-<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p>
+### Javascript
 
-<pre class="brush: js">// HTML:
-// <div id="container"><div id="d">This is a div.</div></div>
+```js
+var container = document.getElementById("container");
+var d = document.getElementById("d");
 
-container = document.getElementById("container");
-d = document.getElementById("d");
-console.log(container.firstChild.nodeName); // "DIV" が記録される
+console.log(container.firstElementChild.nodeName); // "DIV" と出力
 
-d.outerHTML = "<p>This paragraph replaced the original div.</p>";
-console.log(container.firstChild.nodeName); // "P" が記録される
+d.outerHTML = "<p>この段落は元の div を置き換えたものです。</p>";
 
-// #d の div 要素はもはや文書ツリーの一部ではなく、
+console.log(container.firstElementChild.nodeName); // "P" と出力
+
+// #d の div 要素は文書ツリーの一部ではなくなり、
 // 新たな段落に置き換えられました。
-</pre>
-
-<h2 id="Notes" name="Notes">メモ</h2>
-
-<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p>
-
-<pre class="brush: js">var div = document.createElement("div");
-div.outerHTML = "<div class=\"test\">test</div>";
-console.log(div.outerHTML); // output: "<div></div>"</pre>
-
-<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p>
-
-<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
-console.log(p.nodeName); // "P" を表示
-p.outerHTML = "<div>This div replaced a paragraph.</div>";
-console.log(p.nodeName); // "P" のまま
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
-   <td>{{ Spec2('DOM Parsing') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.outerHTML")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li>
- <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li>
- <li>{{domxref("HTMLElement.outerText")}}</li>
-</ul>
+```
+
+## メモ
+
+要素が親要素を持たない場合、その `outerHTML` プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。
+
+```js
+var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+```
+
+また、文書の中で要素が置換された場合も、 `outerHTML` プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。
+
+```js
+var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // shows: "P"
+p.outerHTML = "<div>This div replaced a paragraph.</div>";
+console.log(p.nodeName); // still "P";
+```
+
+返値には HTML エスケープされた属性が入ります。
+
+```js
+var anc = document.createElement("a");
+anc.href = "https://developer.mozilla.org?a=b&c=d";
+console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- DOM ツリーを XML 文字列にシリアライズ: {{domxref("XMLSerializer")}}
+- XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}
+- {{domxref("HTMLElement.outerText")}}
-- 
cgit v1.2.3-54-g00ecf


From 3c8c08b293f12013ae05a770b754c9ce2e10a01c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 23:54:19 +0900
Subject: 2022/02/12 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/scrollheight/index.md | 172 ++++++++++++-------------
 1 file changed, 83 insertions(+), 89 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/scrollheight/index.md b/files/ja/web/api/element/scrollheight/index.md
index a2146b9db5..cead8be682 100644
--- a/files/ja/web/api/element/scrollheight/index.md
+++ b/files/ja/web/api/element/scrollheight/index.md
@@ -5,68 +5,70 @@ tags:
   - API
   - CSSOM View
   - NeedsDHTMLRemovalInExample
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollHeight
 translation_of: Web/API/Element/scrollHeight
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。</p>
+**`Element.scrollHeight`** は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。
 
-<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p>
+![](scrollheight.png)
 
-<div class="note">
-<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+`scrollHeight` の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その `scrollHeight` は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。
 
-<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre>
+## 構文
 
-<h3 id="Value" name="Value">値</h3>
+```js
+elemScrollHeight = element.scrollHeight;
+```
 
-<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p>
+### 値
 
-<h2 id="Example" name="Example">例</h2>
+整数値で、要素の scrollHeight ピクセル値に対応します。
 
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+## 問題と解決方法
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+## 要素が完全にスクロールされたかどうかの判定
 
-<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+`scrollTop` は丸められない数値で、 `scrollHeight` と `clientHeight` は丸められます。したがって、スクロール領域が下までスクロールされているかどうかを判断する唯一の方法は、スクロール量が何らかの閾値 (この例では `1`) に十分に近いかどうかを確認することです。
 
-<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
-</div>
-<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+```js
+Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
+```
 
-<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+次の例は動作しません。 `scrollTop` が小数を含む可能性があるからです。
 
-<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2>
+```js
+element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight
+```
 
-<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3>
+### 要素がスクロール可能かどうかを判定
 
-<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p>
+コンテナーは、スクロールしないがあふれる子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。
 
-<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight
-</pre>
+```js
+window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'
+```
 
-<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p>
+## 例
 
-<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible'
-window.getComputedStyle(element).overflowY !== 'hidden'
-</pre>
+### ユーザーがテキストを読んだかどうかをチェック
 
-<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2>
+{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。
 
-<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p>
+以下のデモにあるチェックボックスは無効になっており、テキストエリアの内容が最後までスクロールするまでチェックして同意を表すことができなくなっています。
 
-<h3 id="HTML">HTML</h3>
+#### HTML
 
-<pre class="brush: html notranslate"><form name="registration">
-  <p>
-    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+```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
@@ -88,18 +90,20 @@ ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maec
 interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
 laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    </textarea>
-  </p>
-  <p>
-    <input type="checkbox" id="agree" name="accept" />
-    <label for="agree">I agree</label>
-    <input type="submit" id="nextstep" value="Next" />
-  </p>
-</form></pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">#notice {
+    
+  
+  
+    
+    I agree
+    
+  
+
+```
+
+#### CSS
+
+```css
+#notice {
   display: inline-block;
   margin-bottom: 12px;
   border-radius: 5px;
@@ -114,17 +118,19 @@ nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci
   padding: 5px;
   border: #2A9F00 solid 2px;
   border-radius: 5px;
-}
+}
+```
 
-JavaScript
+#### JavaScript
 
-function checkReading () {
+```js
+function checkReading () {
   if (checkReading.read) {
     return;
   }
-  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  checkReading.read = this.scrollHeight - Math.round(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.";
+  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
 }
 
 onload = function () {
@@ -136,38 +142,26 @@ onload = function () {
   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")}}
-
-関連情報
-
-
- MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9
- {{domxref("Element.clientHeight")}}
- {{domxref("HTMLElement.offsetHeight")}}
- 要素の寸法の決定
-
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Checking_that_the_user_has_read_a_text', '640', '400')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN:
+  Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer
+  9]()
+- {{domxref("Element.clientHeight")}}
+- {{domxref("HTMLElement.offsetHeight")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
-- 
cgit v1.2.3-54-g00ecf


From 9f0e826282054eab8175b4cae7e93112a380a7e0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Wed, 2 Mar 2022 00:00:04 +0900
Subject: 2022/02/07 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/scrollleft/index.md | 129 +++++++++++------------
 files/ja/web/api/element/scrolltop/index.md  | 148 +++++++++++++++------------
 2 files changed, 141 insertions(+), 136 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md
index 4a593af238..0d7dc3bbb4 100644
--- a/files/ja/web/api/element/scrollleft/index.md
+++ b/files/ja/web/api/element/scrollleft/index.md
@@ -4,58 +4,59 @@ slug: Web/API/Element/scrollLeft
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollLeft
 translation_of: Web/API/Element/scrollLeft
 ---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}
 
-Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。
+**`Element.scrollLeft`** プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。
 
-要素の {{cssxref("direction")}} が rtl (right-to-left、右書き) の場合、 scrollLeft が 0 のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。
+要素の {{cssxref("direction")}} が `rtl` (right-to-left、右書き) の場合、 `scrollLeft` が `0` のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。
 
-
-画面拡大を使用するシステムでは、 scrollLeft が小数になることがあります。
-
+> **Warning:** 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。
 
-構文
+## 構文
 
-値の取得
+### 値の取得
 
-// スクロールしたピクセル数を取得
-var sLeft = element.scrollLeft;
-
+```js
+// スクロールしたピクセル数を取得
+var sLeft = element.scrollLeft;
+```
 
-sLeft は element が左端からスクロールしたピクセル数を整数で表現したものです。
+`sLeft` は `element` が左端からスクロールしたピクセル数を整数で表現したものです。
 
-値の設定
+### 値の設定
 
-// スクロールしたピクセル数を設定
-element.scrollLeft = 10;
-
+```js
+// スクロールしたピクセル数を設定
+element.scrollLeft = 10;
+```
 
-scrollLeft は任意の整数値で設定することができます。しかし、
+`scrollLeft` は任意の整数値で設定することができます。しかし、
 
-
- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 scrollLeft は 0 に設定されます。
- 指定された値が 0 より小さかったら (右書きの要素では 0 より大きかったら)、 scrollLeft は 0 に設定されます。
- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollLeft は最大値に設定されます。
-
+- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 `scrollLeft` は `0` に設定されます。
+- 指定された値が `0` より小さかったら (右書きの要素では `0` より大きかったら)、 `scrollLeft` は `0` に設定されます。
+- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。
 
-例
+## 例
 
-HTML
+### HTML
 
-<div id="container">
-  <div id="content">ボタンをクリックすると右にスライドします。</div>
-</div>
+```html
+
+  ボタンをクリックすると右へスライドします。
+
 
-<button id="slide" type="button">右へスライド</button>
+
+```
 
-CSS
+### CSS
 
-#container {
+```css
+#container {
   width: 100px;
   height: 100px;
   border: 1px solid #ccc;
@@ -65,47 +66,33 @@ var sLeft = element.scrollLeft;
 #content {
   width: 250px;
   background-color: #ccc;
-}
+}
+```
 
-JavaScript
+### JavaScript
 
-const button = document.getElementById('slide');
+```js
+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")}}
-
-関連情報
-
-
- MSDN's Measuring Element Dimension and Location
- {{domxref("Element.scrollTop")}}
- {{domxref("Element.scrollTo()")}}
-
+};
+```
+
+### 結果
+
+{{EmbedLiveSample("Example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN's Measuring Element Dimension and Location]( "MSDN Measuring Element Dimension and Location")
+- {{domxref("Element.scrollTop")}}
+- {{domxref("Element.scrollTo()")}}
diff --git a/files/ja/web/api/element/scrolltop/index.md b/files/ja/web/api/element/scrolltop/index.md
index 21f8478a46..898f8cc7bb 100644
--- a/files/ja/web/api/element/scrolltop/index.md
+++ b/files/ja/web/api/element/scrolltop/index.md
@@ -6,87 +6,105 @@ tags:
   - CSSOM View
   - NeedsArtUpdate
   - NeedsMarkupWork
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollTop
 translation_of: Web/API/Element/scrollTop
 ---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}
 
-Element.scrollTop プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
+**`Element.scrollTop`** プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
 
-要素の scrollTop の値は、要素の上から最も上の表示されているコンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 scrollTop の値は 0 になります。
+要素の `scrollTop` の値は、要素の上から最も上の*表示されている*コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 `scrollTop` の値は `0` になります。
 
-scrollTop がルート要素 (<html> 要素) に対して使用されると、ウィンドウの scrollY が返されます。 これは scrollTop の特例です。
+`scrollTop` がルート要素 (`` 要素) に対して使用されると、ウィンドウの `scrollY` が返されます。[これは `scrollTop` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop)。
 
-
-画面の拡大縮小を使用するシステムでは、 scrollTop が小数になることがあります。
-
+> **Warning:** 画面の拡大縮小を使用するシステムでは、 `scrollTop` が小数になることがあります。
+
+## 構文
 
-構文
+```js
+// スクロールしたピクセル数を取得
+var intElemScrollTop = someElement.scrollTop;
+```
 
-// スクロールしたピクセル数を取得
-var intElemScrollTop = someElement.scrollTop;
-
+このコードを実行した後、 `intElemScrollTop` はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。
 
-このコードを実行した後、 intElemScrollTop はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。
+```js
+// スクロールするピクセル数を設定
+element.scrollTop = intValue;
+```
 
-// スクロールするピクセル数を設定
-element.scrollTop = intValue;
-
+`scrollTop` は任意の整数値で設定することができます。しかし、
 
-scrollTop は任意の整数値で設定することができます。しかし、
+- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "**non-scrollable**" のプロパティがある場合)、 `scrollTop` は `0` に設定されます。
+- `scrollTop` は負の数には対応していません。代わりに、 `0` に戻ります。
+- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollTop` は最大値に設定されます。
 
-
- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "non-scrollable" のプロパティがある場合)、 scrollTop は 0 に設定されます。
- scrollTop は負の数には対応していません。代わりに、 0 に戻ります。
- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 scrollTop は最大値に設定されます。
-
+## 例
 
-例
+### 要素のスクロール
 
-
-
-padding-top
-If you can see this, scrollTop = 0
+この例で、破線の境界線の付いた内部のコンテナーをスクロールしてみて、 `scrollTop` の値がどのように変わるかを確認してください。
 
-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
+#### HTML
 
-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
+```html
 
-padding-bottom
+
+  
+      Far out in the uncharted backwaters of the unfashionable end
+      of the western spiral arm of the Galaxy lies a small unregarded
+      yellow sun. Orbiting this at a distance of roughly ninety-two million
+      miles is an utterly insignificant little blue green planet whose
+      ape-descended life forms are so amazingly primitive that they still
+      think digital watches are a pretty neat idea.
+  
 
-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")}}
-
-関連情報
-
-
- MSDN's Measuring Element Dimension and Location
- {{domxref("Element.scrollLeft")}}
- {{domxref("Element.scrollTo()")}}
-
+
+scrollTop: 0
+```
+
+#### CSS
+
+```css
+#scroller {
+  overflow: scroll;
+  height: 150px;
+  width: 150px;
+  border: 5px dashed orange;
+}
+
+#output {
+  padding: 1rem 0;
+}
+```
+
+#### JavaScript
+
+```js
+const scroller = document.querySelector("#scroller");
+const output = document.querySelector("#output");
+
+scroller.addEventListener("scroll", event => {
+  output.textContent = `scrollTop: ${scroller.scrollTop}`;
+});
+```
+
+#### 結果
+
+{{EmbedLiveSample("Scrolling_an_element", 400, 250)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN's Measuring Element Dimension and Location]( "MSDN Measuring Element Dimension and Location")
+- {{domxref("Element.scrollLeft")}}
+- {{domxref("Element.scrollTo()")}}
-- 
cgit v1.2.3-54-g00ecf


From d30020571ea7fb60de06f9b8fa8ad876dda1006d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Tue, 1 Mar 2022 22:58:26 +0900
Subject: 2022/02/18 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/innerhtml/index.md   | 254 +++++++++++++++-----------
 files/ja/web/api/element/scrollwidth/index.md | 222 +++++++++++-----------
 2 files changed, 249 insertions(+), 227 deletions(-)

(limited to 'files/ja/web/api/element')

diff --git a/files/ja/web/api/element/innerhtml/index.md b/files/ja/web/api/element/innerhtml/index.md
index bd63262b6c..f3e54ca72c 100644
--- a/files/ja/web/api/element/innerhtml/index.md
+++ b/files/ja/web/api/element/innerhtml/index.md
@@ -7,160 +7,205 @@ tags:
   - DOM Parsing
   - Element
   - Parsing HTML
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
   - innerHTML
   - プロパティ
 browser-compat: api.Element.innerHTML
 translation_of: Web/API/Element/innerHTML
 ---
-{{APIRef("DOM")}}
+{{APIRef("DOM")}}
 
-{{domxref("Element")}} オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。
+{{domxref("Element")}} オブジェクトの **`innerHTML`** プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。
 
-メモ: {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが (&), (<), (>) の文字を含むテキストの子ノードを持っている場合、 innerHTML はこれらの文字を HTML エンティティの "&amp;", "&lt;", "&gt;" としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。
+要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。
 
-要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。
+## 構文
 
-構文
+```js
+const content = element.innerHTML;
 
-const content = element.innerHTML;
+element.innerHTML = content;
+```
 
-element.innerHTML = htmlString;
-
+### 値
 
-値
+要素の子孫を HTML にシリアライズしたものを含んだ {{domxref("DOMString")}} です。 `innerHTML` に値を設定すると、要素のすべての子孫を削除して、 _htmlString_ の文字列で与えられた HTML を解釈して構築されたノードに置き換えます。
 
-要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 innerHTML に値を設定すると、要素のすべての子孫を削除して、 htmlString の文字列で与えられた HTML を解析して構築されたノードに置き換えます。
+### 例外
 
-例外
+- `SyntaxError` {{domxref("DOMException")}}
+  - : 正しくない形の HTML の文字列を使用して `innerHTML` の値を設定しようとした場合に発生します。
+- `NoModificationAllowedError` {{domxref("DOMException")}}
+  - : 親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合に発生します。
 
-
-  SyntaxError
-  正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。
-  NoModificationAllowedError
-  親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。
-
+## 使用上のメモ
 
-使用上のメモ
+`innerHTML` プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。
 
-innerHTML プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。
+### 要素の HTML コンテンツの読み取り
 
-要素の HTML コンテンツの読み取り
+`innerHTML` を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。
 
-innerHTML を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。
+```js
+let contents = myElement.innerHTML;
+```
 
-let contents = myElement.innerHTML;
+これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。
 
-これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。
+> **Note:** 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。
 
-
-  メモ: 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。
-
+### 要素の中身の置き換え
+
+`innerHTML` の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。
+
+> **Note:** 挿入される文字列に悪意のある内容が含まれる可能性がある場合、[セキュリティ上のリスク](#セキュリティの考慮事項)になります。
+> ユーザーが提供したデータを挿入する場合は、 {{domxref("Element.SetHTML()")}} を使用するよう常に検討してください。こちらは挿入する前に無害化を行います。
+
+例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。
 
-要素の中身の置き換え
+```js
+document.body.innerHTML = "";
+```
 
-innerHTML の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。
+この例は文書の現在の HTML マークアップを走査し、 `"<"` の文字を HTML エンティティの `"<"` に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 `innerHTML` の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。
 
-例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。
+```js
+document.documentElement.innerHTML = "" +
+         document.documentElement.innerHTML.replace(/";
+```
 
-document.body.innerHTML = "";
+#### 操作の詳細
 
-この例は文書の現在の HTML マークアップを走査し、 "<" の文字を HTML エンティティの "&lt;" に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 innerHTML の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。
+`innerHTML` に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。
 
-document.documentElement.innerHTML = "<pre>" +
-         document.documentElement.innerHTML.replace(/</g,"&lt;") +
-            "</pre>";
+1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。
+2. 中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 `