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

HTML DOM MenuItemオブジェクトの使い方を徹底解説！主なプロパティと実装例

HTML DOM の MenuItem オブジェクトは、HTML の <menuitem> 要素を JavaScript から操作するためのインターフェースです。コンテキストメニュー（右クリックメニュー）に独自のコマンド項目を追加したい場合などに利用されます。

注意： <menuitem> 要素は、かつて Mozilla Firefox のみが独自にサポートしていた要素です。現在では HTML 仕様から削除され非推奨となっているため、最新のブラウザでは動作しない点に留意してください。本記事では、参考情報としてこのオブジェクトの構造と使い方を解説します。

MenuItemオブジェクトを作成する構文

<menuitem> 要素を新しく作成するには、以下のように document.createElement() メソッドを使用します。

var menuItemObject = document.createElement("MENUITEM");

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

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

プロパティ説明
checkedメニュー項目がチェック済みかどうかを true / false で設定・取得します
commandcommand 属性の値を設定・取得します
defaultそのメニュー項目がデフォルト項目かどうかを設定・取得します
disabledメニュー項目を無効化するかどうかを設定・取得します
iconメニュー項目を表すアイコン画像の URL を設定・取得します
labellabel 属性の値（メニューに表示されるテキスト）を設定・取得します
radiogroupradiogroup 属性の値を設定・取得します
typetype 属性の値（command / checkbox / radio など）を設定・取得します

MenuItemオブジェクトの使用例

ここでは、フォーム上で右クリックしたときに表示されるコンテキストメニューに、<menuitem> を使って「Get URL」と「Get Hostname」の2つの項目を追加する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Menu Object</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 contextmenu="MENU">
<fieldset>
<legend>Menu-Object</legend>
<label for="urlSelect">Current URL:</label>
<input type="url" size="30" id="urlSelect" value="https://www.example.com/aboutUs">
<div id="divDisplay"></div>
</fieldset>
<menu type="context"
id="MENU">
<menuitem label="Get URL"
onclick="contextFunction(1);">
</menuitem>
<menuitem label="Get Hostname"
onclick="contextFunction(2);">
</menuitem>
</menu>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var urlSelect = document.getElementById("urlSelect");
   function gethref(){
      divDisplay.textContent = 'URL Path: '+location.href;
   }
   function getHostname(){
      divDisplay.textContent = 'Hostname: '+location.hostname;
   }
   function contextFunction(role){
      if(role === 1)
         this.gethref();
      else
         this.getHostname();
   }
</script>
</body>
</html>

コードのポイント

  • <form contextmenu="MENU"> により、フォーム内で右クリックした際に表示されるメニューとして id="MENU" の <menu> を関連付けています。
  • <menu type="context"> 内に配置された2つの <menuitem> が、コンテキストメニューの項目として表示されます。
  • 各 menuitem の onclick イベントで contextFunction() を呼び出し、引数に応じて URL パスまたはホスト名を画面に表示します。

出力結果

このコードを実行すると、以下のような動作になります。

▼ フォーム上で右クリックした状態：

HTML DOM MenuItemオブジェクトの使い方を徹底解説！主なプロパティと実装例

▼ コンテキストメニューから「Get URL」をクリックした後：

HTML DOM MenuItemオブジェクトの使い方を徹底解説！主なプロパティと実装例

▼ コンテキストメニューから「Get Hostname」をクリックした後：

HTML DOM MenuItemオブジェクトの使い方を徹底解説！主なプロパティと実装例

まとめ

HTML DOM の MenuItem オブジェクトを使うと、コンテキストメニューに独自の項目を追加し、JavaScript で動的に制御できます。ただし、<menuitem> 要素は Firefox 専用の実装であり、すでに標準仕様から除外されているため、実際の開発ではカスタムコンテキストメニューライブラリや CSS・JavaScript による自作メニューの採用を検討することをおすすめします。

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