HTMLScriptElement
=================

HTML の `<script>` 要素は **`HTMLScriptElement`** インターフェイスを公開しています。これは（通常の `HTMLElement` から継承によって利用できるものに加えて） `<script>` 要素の動作や実行を操作するための特別なプロパティやメソッドを提供します。

JavaScript ファイルは `application/javascript` の MIME タイプで提供されますが、 しかし、ブラウザーは寛大で、スクリプトが画像型 (`image/*`)、動画型 (`video/*`)、音声型 (`audio/*`)、または `text/csv` で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は `error` イベントを受け取ります。それ以外の場合は、`load` イベントを受け取ります。

EventTarget

Node

Element

HTMLElement

HTMLScriptElementインスタンスプロパティ
-----------

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

`HTMLScriptElement.type`

文字列で、スクリプトの MIME タイプを表します。これは `type` 属性を反映します。

`HTMLScriptElement.src`

文字列で、外部スクリプトの URL を表します。これは `src` 属性を反映します。

`HTMLScriptElement.event` 
非推奨

文字列です。 HTML 文書で要素にイベントハンドラーを設定するための廃止された方法です。

`HTMLScriptElement.charset` 
非推奨

文字列で、外部スクリプトの文字エンコーディングを表します。これは `charset` 属性を反映します。

`HTMLScriptElement.async`, `HTMLScriptElement.defer`

`async` および `defer` 属性は論理属性で、スクリプトの実行方法を制御します。 **`defer` および `async` 属性は、`src` 属性がないときには指定しないでください。**

取りうる実行モードは 3 種類あります。

1. `async` 属性が存在した場合、スクリプトはダウンロードされ次第、非同期に実行されます。
2. `async` 属性がなく `defer` 属性が存在した場合、スクリプトはページの解釈の終了時に実行されます。
3. どちらの属性もなかった場合、スクリプトは直ちに読み取られて実行され、ページの解釈はブロックされます。

`defer` 属性は `async` 属性と共に指定することができます。 `defer` のみに対応している（そして `async` には対応していない）ブラウザーでは、既定のブロックが発生する動作の代わりに `defer` で代替することができます。

**メモ:** これらの属性における正確な処理の詳細は、 HTML の多くの異なる側面を含むため複雑であり、そのため仕様全体に散らばっています。これらのアルゴリズムは、核となる考えを記述していますが、 `<script>` の開始および終了タグの HTML、外部コンテンツ、XMLにおける解釈ルール、 `document.write()` メソッドのルール、スクリプティングの扱い、などによります。

`HTMLScriptElement.crossOrigin` (en-US)

文字列で、 script 要素の CORS 設定 を反映します。他のオリジンのスクリプトについては、エラー情報が公開されるかどうかを制御します。

`HTMLScriptElement.text`

この `<script>` 要素の中にあるすべての `Text` ノード（コメントなどの他のノードを除く）の内容をツリー順で連結した文字列です。設定すると、 `textContent` IDL 属性と同様に動作します。

**メモ:** `document.write()` メソッドで挿入された場合、 `<script>` 要素は（ふつう同期的に）実行されますが、 `innerHTML` または `outerHTML` を使用して挿入された場合は実行されません。

`HTMLScriptElement.fetchPriority` 
Experimental

オプションの文字列で、ブラウザーが外部スクリプトの取得を他の外部スクリプトと比較してどのように優先させるべきかのヒントを表します。この値を指定する場合は、許可された値のいずれかでなければなりません。高い優先度で取得する場合は `high` 、低い優先度で取得する場合は `low` 、優先度がない場合は `auto` （既定値）となります。

`HTMLScriptElement.noModule`

論理値で、 true ならば ES モジュールに対応したブラウザーにおいてスクリプトの実行を停止します。 — JavaScript モジュールに対応して*いない*古いブラウザーで代替スクリプトを実行するために使用します。

`HTMLScriptElement.referrerPolicy`

文字列で、 HTML 属性 `referrerPolicy` を反映し、スクリプトを取得する際、そのスクリプトの取得が完了した時にどのリファラーを使用するかを示します。

静的メソッド
------

`HTMLScriptElement.supports_static`

 ブラウザーが指定された種類のスクリプトに対応している場合は `true` を、それ以外の場合は `false` を返します。
 このメソッドは、スクリプト関連の機能検出のためのシンプルで統一された方法を提供します。


インスタンスメソッド
----------

*独自のメソッドはありません。親である `HTMLElement` からメソッドを継承しています。*

イベント
----

*独自のイベントはありません。親である `HTMLElement` からイベントを継承しています。*

例
-

### スクリプトの動的なインポート

文書内の新しいスクリプトをインポートする関数を作成しましょう。次のコードをホストする `<script>` の直前に `<script>` ノードを作成します（`document.currentScript` を使用）。これらのスクリプトは**非同期**で実行されます。詳細については、 `defer` および `async` プロパティを参照してください。


```js
function loadError(oError) {
  throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}

function prefixScript(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.currentScript.parentNode.insertBefore(
    newScript,
    document.currentScript,
  );
  newScript.src = url;
}
```


次の関数は、新しいスクリプトを `document.currentScript` 要素の直前に追加するのではなく、 `<head>` タグの子として追加するものです。


```js
function loadError(oError) {
  throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}

function affixScriptToHead(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.head.appendChild(newScript);
  newScript.src = url;
}
```


サンプルの使用法:


```js
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
  alert('The script "myScript2.js" has been correctly loaded.');
});
```

### あるスクリプト種別に対応しているかどうかをチェック

`HTMLScriptElement.supports_static` は、ブラウザーが特定の種類のスクリプトに対応しているかどうかをチェックする統一的な仕組みを提要します。

以下の例では、 `noModule` 属性の存在を代替として使用して、モジュールの対応をチェックする方法を示しています。


```js
function checkModuleSupport() {
  if ("supports" in HTMLScriptElement) {
    return HTMLScriptElement.supports("module");
  }
  return "noModule" in document.createElement("script");
}
```


クラシックスクリプトはすべてのブラウザーで対応していると想定できます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlscriptelement |

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

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

関連情報
----

* HTML の `<script>` 要素
* HTML の `<noscript>` 要素
* `document.currentScript`
* ウェブワーカー （script と似たコードの断片だが、別なグローバルコンテキストで実行されるもの）