DOM

：

インターフェイス

：

HTMLScriptElement インターフェイス

　編集：2022.03.12 by T.A.

→MS

DOMの ScriptオブジェクトはHTMLScriptElement（または HTML 4 HTMLScriptElement）インターフェイスに具現化されます。それは通常の Element オブジェクトインターフェイスに加えて（継承によって利用可能）、script 要素のレイアウトおよび表現を扱う特別なプロパティとメソッドを提供します。

プロパティ

親である HTMLElementからプロパティを継承しています。

HTMLScriptElement.type: DOMString。スクリプトのMIME typeを表します．これはtype 属性を反映します。
HTMLScriptElement.src: DOMString。使用される外部スクリプトリソースのアドレスを表します。これは src 属性を反映します。
HTMLScriptElement.htmlFor 廃止: DOMString。[Description missing]
HTMLScriptElement.event 廃止: DOMString。[Description missing]
HTMLScriptElement.charset: DOMString。外部スクリプトリソースの文字エンコードを表します．これは charset 属性を反映します。
HTMLScriptElement.async: Boolean。→asynとdefer
HTMLScriptElement.defer: Boolean。→asynとdefer
HTMLScriptElement.crossOrigin 実験的: DOMString。このスクリプト要素の CORS 設定に対応する DOMString です。詳細については、CORS設定属性を参照してください。それは制御する、他のオリジンから取得されたスクリプトの場合、エラー情報が公開されるかどうか。
HTMLScriptElement.text: DOMString。IDL の text プロパティは、すべてのテキストノード（Text nodes (en-US)）内容の連結を返さなければなりません。（コメントや要素のような他のノードを無視すれば）テキストノードは、木構造（tree）上の順序で script 要素の子要素です。設定上、これは IDL の textContent プロパティと同様に機能せねばなりません。
注記： document.write() メソッドを用いて、script 要素を挿入した時、実行されます（典型的には同期的に）。しかし、innerHTML と outerHTML プロパティを用いて挿入した場合、結局何も実行されません。

async と defer

async と defer 属性は boolean 属性です。スクリプトがどのように実行されるべきかを示します。defer および async 属性は、src 属性が無ければ指定してはならない。

これら2つの属性値を用いて選択可能な3つのモードがあります。
async 属性があれば、スクリプトは可能な限り非同期的に実行されます。
async 属性が無く defer 属性があれば、スクリプトはページのパースが完了した時点で実行されます。
両方の属性があれば、スクリプトはユーザーエージェントによるページのパース完了を待つこと無く、フェッチ後、直ちに実行されます。

注記：これらの属性の正確な処理の詳細は、大部分が歴史的な理由により、幾分複雑で HTML の様々な局面に関連しています。従って、実装の要件は、仕様の至る所に散らばっている必要性によります。
これらのアルゴリズムは、この処理のコアを記述します。ただし、これらのアルゴリズムは、HTMLの script 開始タグと終了タグの解析ルールを参照して参照します。外国のコンテンツでは、XMLでは、document.write() メソッドのルール、スクリプトの処理、等。
async属性が指定されている場合でも、defer属性を指定できます。延期のみをサポートするレガシーWebブラウザを発生させる（非同期ではありません）デフォルトの同期ブロッキング動作ではなく、延期動作にフォールバックします。

メソッド

固有のメソッドはありません。親である、HTMLElement から継承しています。

例

#1：スクリプトを動的にインポートする

新しいスクリプトをドキュメント内にインポート可能にするため importScript(url[, onloadFunction]) と名付けた関数を生成しましょう。インポートはドキュメントの（既存の）<script>の直前に（新たな）<script>ノードを生成して行ないます。既存の<script>は、下記のコード（document.currentScript 通じて取得）を提供するものです。これらのスクリプトは非同期的に実行されます。詳細は defer および async プロパティを参照。

function loadError (oError) {
  throw new URIError("The script " + oError.target.src + " is not accessible.");
}

function importScript (sSrc, fOnload) {
  var oScript = document.createElement("script");
  oScript.type = "text\/javascript";
  oScript.src = sSrc;
  oScript.onerror = loadError;
  if (fOnload) { oScript.onload = fOnload; }
  document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
}

同じことだがスクリプトを document.currentScript 要素の直前に加える代わりに、<head> タグの末尾の子として加えています。

var importScript = (function (oHead) {

  function loadError (oError) {
    throw new URIError("The script " + oError.target.src + " is not accessible.");
  }

  return function (sSrc, fOnload) {
    var oScript = document.createElement("script");
    oScript.type = "text\/javascript";
    oScript.src = sSrc;
    oScript.onerror = loadError;
    if (fOnload) { oScript.onload = fOnload; }
    oHead.appendChild(oScript);
  }

})(document.getElementsByTagName("head")[0]);

使用法：

importScript("myScript1.js");
importScript("myScript2.js", /* onload 関数: */ function () {
alert("スクリプト「myScript2.js」が正しく読み込まれているため、このアラートを読みました。"); });

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：

DOM