recursal/MDN huggingface dataset:
FontFaceSet: check() メソッド
=========================

`check()` は `FontFaceSet` のメソッドで、まだ完全に読み込まれていない `FontFaceSet` 内のフォントを使用しようとせずに、指定されたフォント指定を使ってテキストをレンダリングすることができれば `true` を返します。すなわち、フォントスワップを発生させることなく、フォント指定を使用することができます。

構文
--


```js
check(font)
check(font, text)
```

### 引数

`font`

CSS の `font` プロパティの構文を使用するフォント指定、例えば `"italic bold 16px Roboto"` です。

`text`

Unicode 範囲がテキスト中の文字の少なくとも 1 つを含んでいるフォントフェイスに限定します。これは個々のグリフが網羅されているかどうかは調べません。

### 返値

論理値で、指定されたフォント指定でテキストをレンダリングする場合、まだ完全に読み込まれていない `FontFaceSet` 内のフォントを使用しようしないならば `true` になります。

すなわち、この `FontFaceSet` に含まれる、指定されたフォント指定に一致するすべてのフォントは、`status` プロパティが `"loaded"` に設定されている、という意味です。

そうでない場合、この関数は `false` を返します。

例
-

次の例では、新しい `FontFace` を作成し、それを `FontFaceSet` に追加します。


```js
const font = new FontFace(
  "molot",
  "url(https://interactive-examples.mdn.mozilla.net/media/fonts/molot.woff2)",
  {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  },
);

document.fonts.add(font);
```

### 読み込まれていないフォント

フォントはまだ読み込まれていないので、　`check("12px molot")` は `false` を返します。これは、指定されたフォント指定を使用しようとするとフォントの読み込みが発生することを示します。


```js
console.log(document.fonts.check("12px molot"));
// false: 一致するフォントは設定に入っているが、まだ読み込まれていないフォント
```

### システムフォント

`check()` の引数にシステムフォントだけを指定すると、設定するにはフォントを読み込まずにシステムフォントを使用することができるので、 `true` を返します。


```js
console.log(document.fonts.check("12px Courier"));
// true: 一致するフォントはシステムフォント
```

### 存在しないフォント

`FontFaceSet` になく、システムフォントでもないフォントを指定した場合、 `check()` は `true` を返します。


```js
console.log(document.fonts.check("12px i-dont-exist"));
// true: 一致するフォントは存在しないフォント
```


**メモ:** この状況で Chrome は不正に `false` を返します。これは攻撃者がブラウザーがどのシステムフォントを保有しているかを簡単にテストできるため、フィンガープリンティングを容易にする可能性があるためです。

### システムフォントと読み込まれていないフォント

システムフォントとまだ読み込まれていない集合のフォントの両方を指定した場合、 `check()` は `false` を返します。


```js
console.log(document.fonts.check("12px molot, Courier"));
// false: `molot` が集合の中にあるが、読み込まれていない
```

### 読み込み中のフォント

集合から読み込み中のフォントを指定した場合、 `check()` は `false` を返します。


```js
function check() {
  font.load();
  console.log(document.fonts.check("12px molot"));
  // false: フォントが読み込み中
  console.log(font.status);
  // "loading"
}

check();
```

### 読み込み済みのフォント

読み込んである集合からフォントを指定すると、 `check()` は `true` を返します。


```js
async function check() {
  await font.load();
  console.log(document.fonts.check("12px molot"));
  // true: フォントが読み込み完了
  console.log(font.status);
  // "loaded"
}

check();
```

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-check |

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

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

`load()` は `FontFaceSet` のメソッドで、引数で指定されたフォントをすべて読み込ませます。

構文
--


```js
load(font)
load(font, text)
```

### 引数

`font`

CSS の値構文を使用するフォント指定。例えば `"italic bold 16px Roboto"` です。

`text`

Unicode 範囲がテキスト中の文字の少なくとも 1 つを含んでいるフォントフェイスに限定します。これは個々のグリフが網羅されているかどうかは調べません。

### 返値

`Promise` で、読み込まれた `FontFace` オブジェクトの配列 (`Array`) で履行されます。このプロミスは、すべてのフォントが読み込まれたときに履行され、フォントが 1 つでも読み込めなかった場合は拒否されます。

例
-

次の例は、 "MyFont" の読み込みが成功したかどうかに応じて履行または拒否されるプロミスを返します。 `then()` のコードは、そのフォントが利用できるとみなされます。


```js
document.fonts.load("12px MyFont", "ß").then(/\* ... \*/);
```

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-load |

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

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

`loading` イベントは、文書がフォントの読み込みを始めるときに発行されます。

構文
--

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


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

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

例
-

次の例では、フォント `Ephesis` が読み込まれ始めると、"Font is loading..." とコンソールに表示されます。


```js
document.fonts.onloading = () => {
  console.log("Font is loading");
};

(async () => {
  await document.fonts.load("16px Ephesis");
})();
```

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-onloading |

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

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

**`keys()`** は `FontFaceSet` インターフェイスのメソッドで、 `FontFaceSet.values` の別名です。

構文
--


```js
keys()
```

### 引数

なし。

### 返値

指定された `FontFaceSet` の各要素の値を挿入順に保持する、新しいイテレーターオブジェクトです。

仕様書
---

#### No specification found

No specification data found for `api.FontFaceSet.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

**`has()`** は `FontFaceSet` インターフェイスのメソッドで、指定された値を持つ要素が存在するかどうかを検査して `Boolean` を返します。

構文
--


```js
has(value)
```

### 引数

`value`

`FontFaceSet` オブジェクトでテストする値。

### 返値

論理値で、 `value` が `FontFaceSet` に存在する場合に `true` となります。

仕様書
---

#### No specification found

No specification data found for `api.FontFaceSet.has`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

**`add()`** は `FontFaceSet` インターフェイスのメソッドで、集合に新しいフォントを追加します。

構文
--


```js
add(font)
```

### 引数

`font`

集合に追加する `FontFace` です。

### 返値

新しい `FontFaceSet` です。

### 例外

`InvalidModificationError` `DOMException`

このフォントがすでに CSS の `@font-face` ルールによって含まれている場合に発生します。

例
-

次の例では、新しい `FontFace` オブジェクトを作成し、`FontFaceSet` に追加しています。


```js
const font = new FontFace("MyFont", "url(myFont.woff2)");
document.fonts.add(font);
```

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-add |

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

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

**`size`** は `FontFaceSet` インターフェイスのプロパティで、 `FontFaceSet` に含まれるアイテムの数を返します。

値
-

`FontFaceSet` に含まれるアイテムの数を示す整数です。

例
-

次の例では、`FontFaceSet` の `size` がコンソールに表示されます。


```js
console.log(document.fonts.size);
```

仕様書
---

#### No specification found

No specification data found for `api.FontFaceSet.size`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

**`entries()`** は `FontFaceSet` インターフェイスのメソッドで、 `FontFaceSet` のそれぞれの要素に対して `[value,value]` の配列を含む新しい `Iterator` オブジェクトを返します。

構文
--


```js
entries()
```

### 引数

なし。

### 返値

`CustomStateSet` のそれぞれの要素に対して `[value, value]` の配列を挿入順に保持する、新しいイテレーターオブジェクトです。

仕様書
---

#### No specification found

No specification data found for `api.FontFaceSet.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

**`values()`** は `FontFaceSet` インターフェイスのメソッドで、 `FontFaceSet` オブジェクトの各要素の値を挿入順に返す新しいイテレーターオブジェクトを返します。

構文
--


```js
values()
```

### 引数

なし。

### 返値

指定された `FontFaceSet` の各要素の値を挿入順に返す、新しいイテレーターオブジェクトです。

仕様書
---

#### No specification found

No specification data found for `api.FontFaceSet.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

`loadingdone` イベントは、文書がすべてのフォントを読み込んだときに発行されます。

構文
--

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


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

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

例
-

次の例では、フォント `Ephesis` の読み込みが完了すると、"Font loading complete" とコンソールに出力されます。


```js
document.fonts.onloadingdone = () => {
  console.log("Font loading complete");
};

(async () => {
  await document.fonts.load("16px Ephesis");
})();
```

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-onloadingdone |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RelativeOrientationSensor: RelativeOrientationSensor() コンストラクター
===============================================================

**`RelativeOrientationSensor()`** コンストラクターは、デバイスの物理的な向きを表す新しい `RelativeOrientationSensor` オブジェクトを生成します。

構文
--


```js
new RelativeOrientationSensor()
new RelativeOrientationSensor(options)
```

### 引数

`options` 省略可

以下のオプションがあります。

`frequency`

1 秒間にサンプルを何回取得したいかであり、`reading` イベントが呼ばれる 1 秒あたりの回数になります。整数または小数が使用でき、小数は 1 秒に 1 回未満の頻度を設定するのに用います。実際の取得頻度はデバイスハードウェアに依存するので、要求値より少なくなる可能性があります。

`referenceFrame`

`'device'` または `'screen'` です。デフォルトは `'device'` です。


### 例外

`SecurityError` `DOMException`

この機能の使用が Permissions Policy によりブロックされました。

仕様書
---

| Specification |
| --- |
| Orientation Sensor # dom-relativeorientationsensor-relativeorientationsensor |

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

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

関連情報
----

* `reading` イベント
Element: tagName プロパティ
======================

**`tagName`** は `Element` インターフェイスのプロパティで、呼び出された要素のタグ名を返します。

例えば、この要素が `<img>` であれば、 `tagName` プロパティは `"IMG"` となります（HTML 文書の場合。 XML/XHTML 文書では大文字小文字が違うかもしれません）。

値
-

この要素のタグ名を示す文字列です。文字列が大文字であるかどうかは、文書型によって変わります。

* HTML 文書を表す DOM ツリーでは、タグ名は常に大文字に正規化されます。例えば、 `tagName` が `<div>` 要素で呼び出された場合は、 `"DIV"` を返します。
* XML の DOM ツリー内にある要素のタグ名は、元の XML ファイルに書かれているのと大文字小文字が同じになります。 XML 文書に `"<SomeTag>"` タグがあった場合、 `tagName` プロパティの値は `"SomeTag"` になります。

`Element` オブジェクトにおいては、 `tagName` の値は要素オブジェクトの継承元である `Node` の `nodeName` プロパティの値と同じになります。

例
-

### HTML


```html
<span id="born">When I was born…</span>
```

### JavaScript


```js
const span = document.getElementById("born");
console.log(span.tagName);
```


 XHTML（および他の XML 形式）では、元の大文字小文字が保持されるので、元のタグ名が小文字で生成されている場合は `"span"` が出力されます。
 HTML では、元の文書を生成したときに大文字小文字のどちらが使われたかに関わらず、 `"SPAN"` と出力されます。

仕様書
---

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

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

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

`setAttributeNS` は、指定された名前空間と名前で、新しい属性を追加したり、属性の値を変更したりします。

構文
--


```js
setAttributeNS(namespace, name, value)
```

### 引数

* `namespace` は属性の名前空間を指定する文字列です。
* `name` は修飾名で属性を識別する文字列です。すなわち、名前空間接頭辞に続いてコロン、続いてローカル名です。
* `value` は新しい属性の希望する文字列値です。
### 返値

なし (`undefined`)。

### 例


```js
let d = document.getElementById("d1");
d.setAttributeNS(
  "http://www.mozilla.org/ns/specialspace",
  "spec:align",
  "center",
);
```

メモ
--

DOM メソッドは要素の属性を取り扱います。

| 名前空間に無関係、最も一般的に使用されるメソッド | 名前空間に限定される変数(DOM Level 2) | `Attr` ノードを直接扱う DOM レベル 1 のメソッド(ほとんど使用されない) | `Attr` ノードを直接扱う DOM レベル 2 名前空間に限定されるメソッド(ほとんど使用されない) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

`setAttributeNS` は名前空間属性のための唯一のメソッドで、完全修飾名、つまり `"namespace:localname"` を期待します。

仕様書
---

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

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

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

**`scroll`** イベントは、要素がスクロールしたときに発行されます。
 スクロールの終了を検出するには、 `Element: scrollend イベント`を参照してください。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

 以下の例では、`scroll` イベントをイベントリスナーと `onscroll` イベントハンドラープロパティによって使用する方法を示しています。
 `scroll` イベントは高頻度で発行されるため、`setTimeout()` メソッドを使用してイベントハンドラをスロットルで制御しています。
 その他の `requestAnimationFrame` を使用した例については、`Document: scroll イベント`ページを参照してください。

### `scroll` をイベントリスナーで使用

次の例では、`scroll` イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。


```html
<div
 id="scroll-box"
 style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
```



```js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.innerHTML = "Scroll event fired!";
  setTimeout(() => {
    output.innerHTML = "Waiting on scroll events...";
  }, 1000);
});
```

### `onscroll` イベントハンドラープロパティの使用

次の例では、`onscroll` イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。


```html
<div
 id="scroll-box"
 style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
```



```js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.innerHTML = "Element scroll event fired!";
  setTimeout(() => {
    output.innerHTML = "Waiting on scroll events...";
  }, 1000);
};
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

関連情報
----

* Element の `scrollend` イベント
* Document の `scroll` イベント
* Document の `scrollend` イベント
Element: compositionstart イベント
==============================

**`compositionstart`** イベントは、 IME などのテキスト変換システムが新しい変換セッションを開始した時に発生します。

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

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

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

`CompositionEvent.data` 読取専用 

イベントを発生させたインプットメソッドによって生成された文字を返します。これは `CompositionEvent` オブジェクトを生成したイベントの種類によって異なります。

`CompositionEvent.locale` 読取専用  
非推奨

現在の入力メソッドのロケール（例えば、変換が IME に関連付けられている場合はキーボードレイアウトのロケール）を返します。

例
-


```js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});
```

### 実行例

#### HTML


```html
<div class="control">
  <label for="example">
    最初にテキストボックスを選択して、IME を開いてください。
    <ul>
      <li>macOS では <kbd>option</kbd> + <kbd>`</kbd></li>
      <li>Windows では <kbd>windows</kbd> + <kbd>.</kbd></li>
    </ul>
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">イベントログ:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="25"
 id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>
```


```
body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


#### JavaScript


```js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
```


#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-compositionstart |

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

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

関連情報
----

* 関連イベント: `compositionend`, `compositionupdate`。
Element: ariaPosInSet プロパティ
===========================

**`ariaPosInSet`** は `Element` インターフェイスのプロパティで、現在のリストアイテムまたはツリーアイテムの集合における要素の番号または位置を定義する `aria-posinset` (en-US) 属性の値を反映します。

値
-

整数の入った文字列です。

例
-

この例では、IDが `article2` の要素の `aria-posinset` 属性は "2" に設定されています。`ariaPosInSet` を使用して、値を "3" に更新します。


```html
<article id="article1" aria-posinset="1">…</article>
<article id="article2" aria-posinset="2">…</article>
```



```js
let el = document.getElementById("article2");
console.log(el.ariaPosInSet); // "2"
el.ariaPosInSet = "3";
console.log(el.ariaPosInSet); // "3"
```

仕様書
---

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

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

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

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

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

[...]

例
-


```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 version="1.2"
 baseProfile="tiny"
 xmlns:ev="http://www.w3.org/2001/xml-events"
 width="6cm"
 height="5cm"
 viewBox="0 0 600 500">
  <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc>

  <!-- ECMAScript to change the radius -->
  <script type="application/ecmascript">
 <![CDATA[ function change(evt) { const circle = evt.target; const
 currentRadius = circle.getFloatTrait("r"); if (currentRadius === 100) {
 circle.setFloatTrait("r", currentRadius \* 2); } else {
 circle.setFloatTrait("r", currentRadius \* 0.5); } } ]]>
 </script>

  <!-- Act on each DOMActivate event -->
  <circle cx="300" cy="225" r="100" fill="red">
    <handler type="application/ecmascript" ev:event="DOMActivate">
      change(evt);
    </handler>
  </circle>

  <text
 x="300"
 y="480"
 font-family="Verdana"
 font-size="35"
 text-anchor="middle">
    Activate the circle to change its size
  </text>
</svg>
```

仕様書
---

| Specification |
| --- |
| UI Events # event-type-DOMActivate |

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

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

関連情報
----

* `MouseEvent`
* `mousedown`
* `mouseup`
* `mousemove`
Element: afterscriptexecute イベント
================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**警告:** このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。

**`afterscriptexecute`** イベントは、スクリプトの実行が完了した後に発行されます。

これは Gecko (Firefox) 固有のイベントです。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* `beforescriptexecute` イベント
Element: insertAdjacentHTML() メソッド
==================================

**`insertAdjacentHTML()`** は `Element` インターフェイスのメソッドで、指定されたテキストを HTML または XML として解釈し、結果のノードを DOM ツリーの指定された位置に挿入します。

構文
--


```js
insertAdjacentHTML(position, text)
```

### 引数

`position`

文字列で、要素の相対的な位置を表します。以下のいずれかでなければなりません。

`"beforebegin"`

要素の前。要素が DOM ツリー内にあり、親要素がある場合にのみ有効です。

`"afterbegin"`

要素のすぐ内側、最初の子の前。

`"beforeend"`

要素のすぐ内側、最後の子の後。

`"afterend"`

要素の後。要素が DOM ツリー内にあり、親要素がある場合にのみ有効です。


`text`

HTML または XML として解釈し、ツリーに挿入する文字列です。

### 返値

なし (`undefined`)。

### 例外

このメソッドは、以下の種類の `DOMException` を発生させることがあります。

`NoModificationAllowedError` `DOMException`

`position` が `"beforebegin"` または `"afterend"` で、要素が親を持っていないか、親が `Document` オブジェクトである場合に発生します。

`SyntaxError` `DOMException`

`position` が掲載されている 4 つの値のいずれでもない場合に発生します。

解説
--

`insertAdjacentHTML()` は挿入先の要素を再解釈するものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、`innerHTML` の操作よりもはるかに高速な動作となります。

挿入されるコンテンツの使用可能な位置は、以下のように可視化できます。


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```

### セキュリティの考慮事項

`insertAdjacentHTML()` を使用してページに HTML を挿入する場合、エスケープされていないユーザー入力を使用しないように注意してください。

プレーンテキストを挿入する場合は、`insertAdjacentHTML()` を使用しないでください。代わりに `Node.textContent` プロパティか `Element.insertAdjacentText()` メソッドを使用してください。これは、渡されたコンテンツを HTML として解釈せず、生のテキストとして挿入します。

例
-

### HTML の挿入

#### HTML


```html
<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>
```


#### CSS


```css
code {
  color: red;
}
```


#### JavaScript


```js
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

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

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

関連情報
----

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentText()`
* `XMLSerializer`: DOM ツリーを XML 文字列へシリアライズ
* Henri Sivonen 氏による hacks.mozilla.org へのゲストポスト には、幾つかのケースでは insertAdjacentHTML がより速い方法であることを示すベンチマークが含まれています。