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

HTML DOM Menuオブジェクトとは？構文とサンプルコードで解説

HTML DOM Menuオブジェクトとは

HTML DOM Menuオブジェクトは、HTMLドキュメント内の<menu>要素を表し、JavaScriptから操作するためのインターフェースです。

注意： <menu>要素は、Mozilla Firefoxブラウザでのみサポートされています。ChromeやEdge、Safariなどの他の主要ブラウザでは正しく動作しないため、実務で利用する際は対象ブラウザに十分注意してください。

構文

<menu>要素を新規作成する場合は、以下の構文を使用します。

var menuObject = document.createElement("MENU")

実装例

ここでは、HTML DOM Menuオブジェクトを使った具体的な例を紹介します。フォーム上で右クリックするとコンテキストメニューが表示され、メニュー項目を選択することで現在のページのURLやホスト名を取得して画面に表示できます。

<!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>

実行結果

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

フォーム上で右クリックした場合：

HTML DOM Menuオブジェクトとは？構文とサンプルコードで解説

コンテキストメニューの「Get URL」をクリックした場合：

HTML DOM Menuオブジェクトとは？構文とサンプルコードで解説

コンテキストメニューの「Get Hostname」をクリックした場合：

HTML DOM Menuオブジェクトとは？構文とサンプルコードで解説

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