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

HTML DOM Codeオブジェクトとは？基本的な使い方とサンプルコードを解説

HTML DOM Codeオブジェクトとは

HTML DOMのCodeオブジェクトは、HTML5の<code>タグに関連付けられたオブジェクトです。<code>要素でコード部分を囲むことで、プログラムコードをマークアップするために使用されます。Codeオブジェクトは、基本的に<code>要素そのものを表します。

構文

Codeオブジェクトの構文は以下のとおりです。

Codeオブジェクトの作成

var a = document.createElement("CODE");

サンプルコード

HTML DOM Codeオブジェクトの使用例を見てみましょう。ボタンをクリックすると、テキストを含むCODE要素が動的に生成されます。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、テキストを含むCODE要素が作成されます</p>
<button onclick="createCode()">CREATE</button><br><br>
<script>
    function createCode() {
        var x = document.createElement("CODE");
        var t = document.createTextNode("print('HELLO WORLD')");
        x.appendChild(t);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Codeオブジェクトとは？基本的な使い方とサンプルコードを解説

CREATEボタンをクリックすると、次のようにコードが表示されます。

HTML DOM Codeオブジェクトとは？基本的な使い方とサンプルコードを解説

コードの解説

このサンプルコードの動作を順番に見ていきましょう。

ボタンの設置

まず、クリックされるとcreateCode()メソッドを実行するCREATEボタンを作成しています。

<button onclick="createCode()">CREATE</button><br><br>

CODE要素とテキストノードの生成

createCode()メソッドでは、documentオブジェクトのcreateElement("CODE")メソッドを使って<code>要素を生成し、変数xに代入しています。次に、createTextNode()メソッドでテキストノードを作成し、変数xに対してappendChild()メソッドを呼び出すことで、このテキストノードを<code>要素の子要素として追加しています。

ドキュメントへの追加

最後に、テキストノードを含む<code>要素を、appendChild()メソッドを使ってdocumentのbody要素の子要素として追加しています。

function createCode() {
    var x = document.createElement("CODE");
    var t = document.createTextNode("print('HELLO WORLD')");
    x.appendChild(t);
    document.body.appendChild(x);
}

このように、JavaScriptを使えば<code>要素を動的に生成し、ページに挿入することができます。コードサンプルを表示するWebアプリケーションなどで活用できる基本的なテクニックです。

  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 ではサポートされていないため注