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

HTML DOM Spanオブジェクトの使い方と作成方法をわかりやすく解説

HTML DOMのSpanオブジェクトは、HTMLの<span>要素に対応するオブジェクトです。<span>要素は、文章の一部をグループ化してスタイルを適用したり、JavaScriptから動的に操作したりする際によく使われるインライン要素です。

JavaScriptでは、createElement()メソッドを使って新しいspan要素を生成でき、getElementById()メソッドを使えば、すでにページ上に存在するspan要素へアクセスすることができます。

構文

それぞれの操作を行うための基本的な構文は以下のとおりです。

spanオブジェクトを作成する場合

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

実行例

ここで、spanオブジェクトの具体的な使用例を見てみましょう。ボタンをクリックすると、新しいspan要素が動的に生成され、ページに追加されるシンプルなデモです。

<!DOCTYPE html>
<html>
<body>
<h1>Spanオブジェクトの例</h1>
<p>下のボタンをクリックすると、span要素が作成されます</p>
<button onclick="createSpan()">CREATE</button>
<p>これはp要素内のテキストです</p>
<script>
   function createSpan() {
      var s = document.createElement("SPAN");
      var txt = document.createTextNode("これはspan要素内のテキストです");
      s.appendChild(txt);
      document.body.appendChild(s);
   }
</script>
</body>
</html>

コードのポイント

  • document.createElement("SPAN"): 新しいspan要素を生成します。
  • document.createTextNode(): span要素の中に挿入するテキストノードを作成します。
  • appendChild(): 作成したテキストノードをspan要素に追加し、さらにそのspan要素をbodyに挿入して画面に表示させます。

出力結果

このコードを実行すると、最初は以下のような画面が表示されます。

HTML DOM Spanオブジェクトの使い方と作成方法をわかりやすく解説

続いて、「CREATE」ボタンをクリックすると、span要素が動的に追加され、次のように表示されます。

HTML DOM Spanオブジェクトの使い方と作成方法をわかりやすく解説

まとめ

Spanオブジェクトを活用すれば、ユーザーの操作に応じてテキストを動的に追加・変更するインタラクティブなWebページを簡単に作れます。<span>要素はインライン表示であるため、段落全体ではなく文中の特定の部分だけを装飾・操作したい場合に特に便利です。

  1. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

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

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