HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM スクリプトオブジェクトとは？作成方法と主なプロパティを解説

HTML DOM のスクリプトオブジェクト（Script Object）は、HTML ドキュメント内の <script> 要素を表すオブジェクトです。JavaScript を使って動的に script 要素を生成・操作することで、ページの読み込み後に外部スクリプトを読み込んだり、コードを実行したりできます。

スクリプトオブジェクトの作成方法

構文

スクリプトオブジェクトを作成するには、document オブジェクトの createElement() メソッドを使用します。構文は以下の通りです。

document.createElement("SCRIPT");

このメソッドは新しい <script> 要素を返します。作成した要素は、appendChild() などでドキュメントに追加すると有効になります。

スクリプトオブジェクトの主なプロパティ

スクリプトオブジェクトには、以下のようなプロパティが用意されています。いずれも値の取得（get）と設定（set）が可能です。

プロパティ説明
asyncスクリプトを非同期で実行するかどうかを取得・設定します。
charsetscript 要素の charset 属性の値を取得・設定します。
deferページの解析完了後にスクリプトを実行するかどうかを取得・設定します。
src外部スクリプトファイルの URL を示す src 属性の値を取得・設定します。
crossOriginスクリプトの CORS（オリジン間リソース共有）設定を取得・設定します。
textscript 要素の子テキストノードすべての内容を取得・設定します。
typescript 要素の type 属性の値を取得・設定します。

サンプルコード

ここでは、ボタンをクリックするとスクリプトオブジェクトを動的に作成し、確認ダイアログを表示する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#fff;
        color:#0197F6;
    }
    h1{
        color:#23CE6B;
    }
    .btn{
        background-color:#fff;
        border:1.5px dashed #0197F6;
        height:2rem;
        border-radius:2px;
        width:60%;
        margin:2rem auto;
        display:block;
        color:#0197F6;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>DOM Script Object Demo</h1>
<button onclick="createScript()" class="btn">Create a script object</button>
<script>
    function createScript() {
        var scriptElement = document.createElement("SCRIPT");
        scriptElement.innerHTML="confirm('Are you able to create a script element?')";
        document.body.appendChild(scriptElement);
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTML DOM スクリプトオブジェクトとは？作成方法と主なプロパティを解説

「Create a script object」ボタンをクリックすると、JavaScript の処理によって新しい script 要素が body 内に追加され、以下のように確認ダイアログが表示されます。

HTML DOM スクリプトオブジェクトとは？作成方法と主なプロパティを解説

このように、createElement("SCRIPT") を使えば、HTML を直接編集することなく、実行時にスクリプトを動的に組み込むことができます。広告タグの遅延読み込みや、条件に応じた外部ライブラリの読み込みなど、さまざまな場面で活用できるテクニックです。

  1. HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説

    HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注