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

HTML DOM Markオブジェクトとは？使い方をサンプルコード付きで解説

HTML DOMのMarkオブジェクトは、HTMLの<mark>要素をJavaScriptから操作するためのオブジェクトです。<mark>要素は、テキストの一部をマーカーで塗ったようにハイライト表示するために使用され、ユーザーの注意を引きたい部分を強調するのに便利です。JavaScriptを使えば、この要素を動的に生成してページに挿入することもできます。

構文

Markオブジェクトを作成するための構文は以下の通りです。

<mark>要素の作成

var markObject = document.createElement("MARK")

サンプルコード

HTML DOM Mark要素の具体的な使用例を見てみましょう。以下の例では、テキスト入力フィールドが空のまま「Submit」ボタンをクリックすると、<mark>要素を動的に作成し、「Name Required（名前は必須です）」という警告メッセージをハイライト表示して画面に挿入します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Mark</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Mark</legend>
<label>Full Name:
<input type="text" id="textSelect" autocomplete="off">
<input type="button" value="Submit" onclick="createMark()">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function createMark() {
        if(textSelect.value === ''){
            var mark = document.createElement('MARK');
            var textInput = document.createTextNode('Name Required');
            mark.appendChild(textInput);
            divDisplay.insertAdjacentElement("afterbegin", mark);
        }
    }
</script>
</body>
</html>

コードのポイント

このサンプルの処理の流れは以下の通りです。

1. document.createElement('MARK') で新しい<mark>要素を生成します。
2. createTextNode() で表示するテキストノードを作成し、appendChild() で<mark>要素に追加します。
3. insertAdjacentElement("afterbegin", mark) により、表示用のdiv要素の先頭に<mark>要素を挿入します。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

「Submit」ボタンをクリックする前：

HTML DOM Markオブジェクトとは？使い方をサンプルコード付きで解説

入力フィールドが空の状態で「Submit」ボタンをクリックした後：

HTML DOM Markオブジェクトとは？使い方をサンプルコード付きで解説

このように、Markオブジェクトを活用することで、バリデーションエラーの通知など、ユーザーの目を引くハイライト表示を動的に実装できます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

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

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