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

HTML DOMの強調（em）オブジェクトとは？作成方法と使い方をわかりやすく解説

HTML DOMの強調（em）オブジェクトとは

HTML DOMの強調オブジェクトは、HTMLの<em>要素に対応するオブジェクトです。<em>要素は、テキストの特定部分を強調するために使用され、ブラウザ上ではそのテキストが斜体（イタリック体）で表示されます。

強調オブジェクトを作成するにはcreateElement()メソッドを使用し、既存の<em>要素へアクセスするにはgetElementById()メソッドを使用します。

構文

強調オブジェクトの作成

var e = document.createElement("EM");

サンプルコード

ここでは、ボタンをクリックすると新しい<em>要素が動的に生成される例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>emphasized object example</h1>
<p>下のボタンをクリックすると、em要素が作成されます</p>
<button onclick="createEM()">CREATE</button>
<br><br>
<script>
    function createEM() {
        var e = document.createElement("EM");
        var txt = document.createTextNode("HELLO WORLD");
        e.appendChild(txt);
        document.body.appendChild(e);
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、まず「CREATE」ボタンだけが表示されたページが出力されます。ボタンをクリックすると、ページ上に斜体で「HELLO WORLD」というテキストが追加表示されます。

コードの解説

まず、「CREATE」ボタンを用意し、ユーザーがクリックしたときにcreateEM()メソッドが実行されるように設定しています。

<button onclick="createEM()">CREATE</button>

createEM()メソッドの内部では、以下のような処理が行われています。

  • documentオブジェクトのcreateElement()メソッドを使って<em>要素を生成し、変数eに代入します。
  • createTextNode()メソッドを使って、表示するテキストを持つテキストノードを作成します。
  • 作成したテキストノードをappendChild()メソッドで<em>要素に追加します。
  • 最後に、テキストノードを含んだ<em>要素全体を、appendChild()メソッドによってドキュメントのbodyに追加します。
function createEM() {
    var e = document.createElement("EM");
    var txt = document.createTextNode("HELLO WORLD");
    e.appendChild(txt);
    document.body.appendChild(e);
}

このように、DOM操作を組み合わせることで、ページを再読み込みすることなく動的に強調テキストを追加することができます。

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