recursal/MDN huggingface dataset:
Element: getAttributeNames() メソッド
=================================

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

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

**`getAttributeNames()`** から返される名前は*修飾*属性名です。すなわち、名前空間接頭辞がついた属性であり、名前空間接頭辞（実際の名前空間では*ない*）にコロンが続き、属性名が続きます（例えば **`xlink:href`**）。名前空間接頭辞のない属性は、そのままの名前になります（例えば **`href`**）。

構文
--


```js
getAttributeNames()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下の例は、次の方法を示しています。

* 名前空間接頭辞のある属性については、 `getAttributeNames()` は属性名と一緒に名前空間接頭辞を返します。
* 名前空間接頭辞のない属性については、 `getAttributeNames()` は属性名のみをそのまま返します。

以下のことを理解することが重要です。

1. DOM には名前空間に所属していても、名前空間接頭辞がない場合があります。
2. 名前空間に所属しているが、名前空間接頭辞のない DOM 内の属性については、 `getAttributeNames()` は属性名だけを返し、その属性が名前空間に所属していることを示しません。

以下の例では、このような「名前空間に所属しているが、名前空間接頭辞がない」場合を示しています。


```js
const element = document.createElement("a");

// "href" 属性を名前空間なし、名前空間接頭辞なしで設定
element.setAttribute("href", "https://example.com");
// "href" 属性を名前空間あり、 "xlink" 名前空間接頭辞で設定
element.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "https://example.com",
);
// "show" 属性を名前空間あり、名前空間接頭辞なしで設定
element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");

// 要素の属性を反復処理する
for (const name of element.getAttributeNames()) {
  const value = element.getAttribute(name);
  console.log(name, value);
}

// 出力結果:
// href https://example.com
// xlink:href https://example.com
// show new
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getattributenames① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: getAnimations() メソッド
=============================

`getAnimations()` は `Element` インターフェイスのメソッドで（`Animatable` ミックスインで指定されており）、この要素に影響を与える、あるいは将来的に影響を与える予定のすべての `Animation` オブジェクトの配列を返します。オプションとして、子孫要素の `Animation` オブジェクトも返すことができます。

**メモ:** この配列には CSS アニメーション、CSS トランジション、ウェブアニメーションが含まれます。

構文
--


```js
getAnimations()
getAnimations(options)
```

### 引数

`options` 省略可

以下のプロパティを含むオプションオブジェクトです。

`subtree`

論理値で、`true` の場合、 *Element* の子孫をターゲットとしたアニメーションも返すようになります。これは、 *Element* やその子孫に付けられた CSS 擬似要素をターゲットとするアニメーションを含みます。既定値は `false` です。


### 返値

`Animation` オブジェクトの配列 (`Array`) で、それぞれが
 このメソッドが呼び出された `Element`、または `{ subtree: true }` が指定されている場合は、その子孫の要素の 1 つを現在ターゲットにしているアニメーションです。

例
-

以下のコードでは、 `elem` とその子孫のすべてのアニメーションが終了するのを待ってから、文書からその要素を削除します。


```js
Promise.all(
  elem.getAnimations({ subtree: true }).map((animation) => animation.finished),
).then(() => elem.remove());
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animatable-getanimations |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* CSS アニメーション
* CSS トランジション
* `Document.getAnimations()` - 文書内のすべてのアニメーションを読み取る
* `Animation`
Element: touchcancel イベント
=========================

`touchcancel` イベントは、1 つ以上のタッチポイントが実装固有の理由で中断されたとき（例えば、タッチポイントが多すぎるとき）に発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("touchcancel", (event) => {});

ontouchcancel = (event) => {};
```

イベント型
-----

`TouchEvent` です。 `Event` を継承しています。

Event

UIEvent

TouchEventイベントプロパティ
---------

*このインターフェイスは `UIEvent` および `Event` からプロパティを継承しています。*

`TouchEvent.altKey` 読取専用 

論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。

`TouchEvent.changedTouches` 読取専用 

前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての `Touch` オブジェクトの `TouchList` です。

`TouchEvent.ctrlKey` 読取専用 

論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。

`TouchEvent.metaKey` 読取専用 

論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。

`TouchEvent.shiftKey` 読取専用 

論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。

`TouchEvent.targetTouches` 読取専用 

現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての `Touch` オブジェクトの `TouchList` です。

`TouchEvent.touches` 読取専用 

対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す `Touch` オブジェクトの `TouchList` です。

`TouchEvent.rotation` 
Non-standard
 読取専用 

イベント開始時からの角度の変化（度）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。

`TouchEvent.scale` 
Non-standard
 読取専用 

イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。

例
-

サンプルコードはタッチイベントの専用のページにあります。

仕様書
---

| Specification |
| --- |
| Touch Events # event-touchcancel |
| Touch Events # dom-globaleventhandlers-ontouchcancel |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参照
--

* `Document` をターゲットとしたこのイベント: `touchcancel`
Element: slot プロパティ
===================

**`slot`** は `Element` インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。

スロットはウェブコンポーネント内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、テンプレートとスロットの使用をご覧ください）。

値
-

文字列です。

例
-

simple-template の例 (ライブで見る) では、`<my-paragraph>` という些細なカスタム要素の例を作りました。この要素にはシャドウルートが取り付けられ、次に `my-text` というスロットを含むテンプレートの内容を使って入力されるようになっています。

文書内で `<my-paragraph>` が使用されると、スロットは `my-text` という値を持つ `slot` 属性を持つ要素内に含めることによって、 slotable 要素によって生成されることになります。以下はそのような例です。


```html
<my-paragraph>
  <span slot="my-text">別なテキストにしましょう。</span>
</my-paragraph>
```


JavaScript ファイルで `<span>` への参照を取得すると、対応する `<slot>` の名前が取得できます。


```js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // 'my-text' と表示
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-slot① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: children プロパティ
=======================

**`children`** は読み取り専用のプロパティで、生きた `HTMLCollection` で呼び出された要素の子要素をすべて返します。

`Element.children` は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 `Node.childNodes` を使用してください。

値
-

生きた `HTMLCollection` で、 `node` の子の DOM 要素の順序付きコレクションを返します。コレクションの `item()` メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。

ノードが子要素を持たない場合、 `children` は要素を含まず、`length` は `0` です。

例
-


```js
const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-children① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Node.childNodes`
Element: localName プロパティ
========================

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

返値
--

文字列で、要素の修飾名の、ローカル部分を示します。

例
-

（`text/xml` や `application/xhtml+xml` のような、XML のコンテンツタイプで送出される必要があります。）


```xml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <script type="application/javascript"><![CDATA[
 function test() {
 const text = document.getElementById('text');
 const circle = document.getElementById('circle');

 text.value = "<svg:circle> has:\n" +
 "localName = '" + circle.localName + "'\n" +
 "namespaceURI = '" + circle.namespaceURI + "'";
 }
 ]]></script>
</head>
<body onload="test()">
  <svg:svg version="1.1"
 width="100px" height="100px"
 viewBox="0 0 100 100">
    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
  </svg:svg>
  <textarea id="text" rows="4" cols="55"/>
</body>
</html>
```

メモ
--

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


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


**メモ:** このプロパティは内部 DOM ストレージの大文字小文字を忠実に返しますが、`tagName` プロパティは HTML DOM における HTML 要素でを大文字で返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-localname① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element.namespaceURI`
* `Element.prefix`
* `Attr.localName`
Element: beforexrselect イベント
============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`beforexrselect`** イベントは、WebXR の選択イベント (`select` (en-US), `selectstart` (en-US), `selectend` (en-US)) が配信される前に発行されます。ユーザーが DOM オーバーレイ UI を走査する間、XR ワールド入力イベントを抑制するために使用することができます。

このイベントはバブリングし、キャンセル可能で、合成されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("beforexrselect", (event) => {});

onbeforexrselect = (event) => {};
```

イベント型
-----

`XRSessionEvent` (en-US) です。`Event` から継承されています。

Event

XRSessionEvent

(en-US)イベントプロパティ
---------

`session` (en-US) 読取専用 

イベントが参照する `XRSession` (en-US) です。

イベントの可用性
--------

**`beforexrselect`** イベントはグローバルイベントであり、以下のインターフェイスで利用できます。

* `Window`
* `Document`
* `HTMLElement`
* `SVGElement`
* `MathMLElement` (en-US)
例
-

WebXR の選択イベント (`select` (en-US), `selectstart` (en-US), `selectend` (en-US)) を抑制するために、アプリケーションは `beforexrselect` イベントを待ち受けすることができます。このイベントはバブリングするので、`preventDefault()` を DOM オーバーレイ要素で呼び出すと、このコンテナー内の WebXR select イベントが DOM 要素と対話するのを防ぎ、XR の世界への重複したイベント入力を避けることができます。


```js
document
  .getElementById("xr-overlay")
  .addEventListener("beforexrselect", (ev) => ev.preventDefault());
```

仕様書
---

| Specification |
| --- |
| WebXR DOM Overlays Module # onbeforexrselect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `select` (en-US) イベント
* `selectstart` (en-US) イベント
* `selectend` (en-US) イベント
Element: ariaModal プロパティ
========================

**`ariaModal`** は `Element` インターフェイスのプロパティで、要素が表示される際にモーダルであるかどうかを示す `aria-modal` 属性の値を反映します。`aria-modal` プロパティを `role="dialog"` の要素に適用すると、ダイアログ外のコンテンツが不活性であることを支援技術に知らせるために、背景で aria-hidden を使用する技術に置き換わります。

値
-

以下のいずれかの値を持つ文字列です。

`"true"`

この要素はモーダルです。

`"false"`

この要素はモーダルではありません。

例
-

この例では、ID が `address-modal` の要素の `aria-modal` 属性は "true" に設定されており、モーダルダイアログであることを示しています。`ariaModal` を使用して、値を "false" に更新します。


```html
<div
 role="dialog"
 id="address-modal"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc"
 aria-modal="true"></div>
```



```js
let el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";
console.log(el.ariaModal); // "false"
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariamodal |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ARIA: dialog ロール
Element: scrollBy() メソッド
========================

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

構文
--


```js
scrollBy(x-coord, y-coord)
scrollBy(options)
```

### 引数

* `x-coord` は、スクロールしたい水平ピクセル数です。
* `y-coord` は、スクロールしたい垂直ピクセル数です。

- または -

`options`

以下の引数を持つ辞書です。

`top`

ウィンドウや要素をスクロールする Y 軸方向のピクセル数を指定します。

`left`

ウィンドウや要素をスクロールする X 軸方向のピクセル数を指定します。

`behavior`

スクロールを滑らかにアニメーションさせるか (`smooth`)、瞬時にジャンプさせるか (`instant`)、ブラウザーに選択させるか (`auto`, 既定値) を指定します。


### 返値

なし (`undefined`)。

例
-


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


`options` を使用する場合:


```js
element.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollby |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: transitionstart イベント
=============================

**`transitionstart`** イベントは、 CSS トランジションが実際に始まったとき、すなわち `transition-delay` が終了した後に発生します。

このイベントはキャンセルできません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("transitionstart", (event) => {});

ontransitionstart = (event) => {};
```

イベント型
-----

`TransitionEvent` です。 `Event` を継承しています。

Event

TransitionEventイベントプロパティ
---------

*親である `Event` から継承したプロパティもあります。*

`TransitionEvent.propertyName` 読取専用 

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

`TransitionEvent.elapsedTime` 読取専用 

float` で、このイベントが発行されたときにトランジションが実行されていた時間を秒単位で表します。この値は `transition-delay` プロパティの影響を受けません。

`TransitionEvent.pseudoElement` 読取専用 

文字列で、アニメーションが実行する擬似要素の名前が入ります。トランジションが擬似要素上で実行されず、要素上で実行される場合は空文字列 (`''`) です。

例
-

このコードは `transitionstart` イベントのリスナーを追加します。


```js
element.addEventListener("transitionstart", () => {
  console.log("トランジション開始");
});
```


同じことを、`ontransitionstart` プロパティを `addEventListener()` の代わりに使用して行います。


```js
element.ontransitionstart = () => {
  console.log("トランジション開始");
};
```

### ライブ例

次の例では、単純な `<div>` 要素に遅延を含むトランジションをスタイル設定しています。


```html
<div class="transition">ここにポインターを当ててください</div>
<div class="message"></div>
```



```css
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}
```


これにいくらかの JavaScript を追加して、`transitionstart` および `transitionrun` イベントが発生すると実行されるようにします。


```js
const transition = document.querySelector(".transition");
const message = document.querySelector(".message");

transition.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun が発生";
});

transition.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart が発生";
});

transition.addEventListener("transitionend", () => {
  message.textContent = "transitionend が発生";
});
```


違いは次の通りです。

* `transitionrun` は、トランジションが作成されたとき（つまり、遅延が始まるとき）に発生します。
* `transitionstart` は、実際のアニメーションが始まったとき（つまり、遅延が終わったとき）に発生します。
仕様書
---

| Specification |
| --- |
| CSS Transitions # transitionstart |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `TransitionEvent` インターフェイス
* CSS プロパティ: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* 関連イベント: `transitionend`, `transitionrun`, `transitioncancel`
Element: clientWidth プロパティ
==========================

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

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

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

値
-

数値です。

例
-

![大きなパディング、境界、マージンを持つ要素の例。clientWidth は、パディングを含めるために、マージン、境界、および垂直スクロールバーを除いた要素内の幅です。](/ja/docs/Web/API/Element/clientWidth/dimensions-client.png)

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

### メモ

`clientWidth` は MS IE DHTML オブジェクトモデルで最初に導入されたものです。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLElement.offsetWidth`
* `Element.scrollWidth`
* 要素の寸法の決定
Element: closest() メソッド
=======================

**`closest()`** は `Element` インターフェイスのメソッドで、この要素とその親に（文書ルートに向かって）、指定された CSS セレクターに一致するノードが見つかるまで探索します。

構文
--


```js
closest(selectors)
```

### 引数

`selectors`

有効な CSS セレクターを表す文字列です。これをこの要素 (`Element`) およびその祖先に向けて照合します。

### 返値

`selectors` に一致する最も近い祖先の `Element` または自分自身です。そのような要素がない場合は `null` を返します。

### 例外

`SyntaxError` `DOMException`

`selectors` が有効なセレクターリストの文字列ではない場合に発生します。

例
-

### HTML


```html
<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>
```

### JavaScript


```js
const el = document.getElementById("div-03");

// "div-02" の id を持つ直近の祖先
console.log(el.closest("#div-02")); // <div id="div-02">

// div の中にある div である直近の祖先
console.log(el.closest("div div")); // <div id="div-03">

// div であって親に article がある直近の祖先
console.log(el.closest("article > div")); // <div id="div-01">

// div ではない直近の祖先
console.log(el.closest(":not(div)")); // <article>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### 互換性のメモ

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

* CSS セレクターモジュール
* セレクターを取る他の `Element` のメソッド: `Element.querySelector()`, `Element.querySelectorAll()`, `Element.matches()`
Element: clientLeft プロパティ
=========================

要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。`clientLeft` は、左マージンまたは左パディングを含みません。`clientLeft` は読み取り専用です。

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

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

値
-

数値です。

例
-

次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 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-left: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientleft |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: replaceWith() メソッド
===========================

**`Element.replaceWith()`** メソッドは、この `Element` を親の子リストの中で一連の `Node` オブジェクトまたは文字列に置換します。文字列は `Text` ノードと等価なノードとして挿入されます。

構文
--


```js
replaceWith(param1)
replaceWith(param1, param2)
replaceWith(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

一連の `Node` オブジェクトまたは文字列で置換します。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

階層の指定の位置にノードを挿入できなかったときに発生します。

例
-

### `replaceWith()` の使用


```js
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
const span = document.createElement("span");

p.replaceWith(span);

console.log(div.outerHTML);
// "<div><span></span></div>"
```

### `replaceWith()` はスコープに非対応

`replaceWith()` メソッドは `with` 文でのスコープに対応していません。詳細は `Symbol.unscopables` をご覧ください。


```js
with (node) {
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-replacewith① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Node.replaceChild()`
* `NodeList`
Element: ariaLabel プロパティ
========================

**`ariaLabel`** は `Element` インターフェイスのプロパティで、`aria-label` (en-US) 属性の値を反映し、現在の要素にラベル付けする文字列値を定義します。

値
-

文字列または `null` です。

例
-

この例では、`close-button` という ID を持つ要素の `aria-label` (en-US) 属性には "Close" が設定されています。`ariaLabel` を使用して、値を "Close dialog" に更新します。


```html
<button aria-label="Close" id="close-button">X</button>
```



```js
let el = document.getElementById("close-button");
console.log(el.ariaLabel); // "Close"
el.ariaLabel = "Close dialog";
console.log(el.ariaLabel); // "Close dialog"
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialabel |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: getBoundingClientRect() メソッド
=====================================

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

構文
--


```js
getBoundingClientRect()
```

### 引数

なし。

### 返値

返値は `DOMRect` オブジェクトで、（パディングと境界の幅を含む）要素全体が収まる最小の長方形です。`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, `height` の各プロパティは、長方形の全体の位置と大きさをピクセル数で記述します。`width` と `height` 以外のプロパティは、ビューポートの左上を基準としています。

![要素全体を格納する最小の長方形である DOMRect オブジェクト。](/ja/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png)

このメソッドが返す `DOMRect` オブジェクトの `width` と `height` プロパティは、内容物の幅や高さだけでなく、 `padding` と `border-width` も含まれます。標準的なボックスモデルでは、これは要素の `width` または `height` プロパティ + `padding` + `border-width` と同じになります。しかし、もし `box-sizing: border-box` が要素に設定されていれば、これは `width` または `height` と等しくなります。

返される値は、その要素に対して `getClientRects()` が返す矩形の和、つまり、その要素に関連する CSS の border-box と見なすことができます。

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

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

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

例
-

### 基本

この単純な例では、単純な `<div>` 要素のクライアント矩形を表す `DOMRect` オブジェクトを取得し、その下にプロパティを出力しています。


```html
<div></div>
```



```css
div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}
```



```js
let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}
```


なお、 `width`/`height` は `width`/`height` + `padding` と等しくなります。

また、`x`/`left`, `y`/`top`, `right`, `bottom` の値は、それぞれのケースで、ビューポートの関連する辺から要素のその側までの絶対的な距離に等しいことに注意してください。

### スクロール

この例では、文書がスクロールされたときに、クライアント矩形の境界がどのように変化するかを示しています。


```html
<div id="example"></div>
<div id="controls"></div>
```



```css
div#example {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

body {
  padding-bottom: 1000px;
}
p {
  margin: 0;
}
```



```js
function update() {
  const container = document.getElementById("controls");
  const elem = document.getElementById("example");
  const rect = elem.getBoundingClientRect();

  container.innerHTML = "";
  for (const key in rect) {
    if (typeof rect[key] !== "function") {
      let para = document.createElement("p");
      para.textContent = `${key} : ${rect[key]}`;
      container.appendChild(para);
    }
  }
}

document.addEventListener("scroll", update);
update();
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-getboundingclientrect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `getClientRects()`
* MSDN: `getBoundingClientRect`
* MSDN: `ClientRect`、初期バージョンの `DOMRect`