HTML DOM Menu 对象

HTML DOM Menu 对象

HTML Document Object Model (DOM) 是把 HTML 页面定义为文档的对象。HTML DOM 定义了对象的层次结构，允许 JavaScript 访问和操作 HTML 文档中的所有元素。

HTML DOM Menu 对象表示 HTML 页面中的菜单。可以使用它来访问和操作菜单的属性和方法，可以实现动态修改菜单、响应菜单事件等功能。

创建 Menu 对象

可以通过 document.createElement() 方法创建 Menu 对象，例如：

var menu = document.createElement("menu");

Menu 对象有一些常用的属性，列举如下：

属性 类型 描述
type String 获取或设置菜单类型，如contextmenu
label String 获取或设置菜单标签
id String 获取或设置菜单唯一标识符
className String 获取或设置菜单类名
innerHTML String 获取或设置菜单的 HTML 内容
isContainer Boolean 获取菜单是否为菜单容器
menuElement HTMLElement 获取菜单所在的元素

Menu 对象有一些常用的方法，列举如下：

方法 描述
addEventListener() 添加菜单事件监听器，如 click、mouseover 等事件
removeEventListener() 移除菜单事件监听器
appendChild() 向菜单添加子项
insertBefore() 在指定位置之前插入菜单项
removeChild() 移除指定菜单项
isMenuElement() 判断指定元素是否为菜单元素
querySelector() 返回第一个匹配指定选择器的菜单项
querySelectorAll() 返回所有匹配指定选择器的菜单项

示例

以下是一个使用 Menu 对象的示例，该示例创建了一个带有子菜单的上下文菜单：

<!DOCTYPE html>
<html>
<body oncontextmenu="return false;">
  
  <menu id="context-menu" type="contextmenu">
    <menuitem label="Cut" id="cut"></menuitem>
    <menuitem label="Copy" id="copy"></menuitem>
    <menuitem label="Paste" id="paste"></menuitem>
    <menu label="More...">
      <menuitem label="Bold" id="bold"></menuitem>
      <menuitem label="Italic" id="italic"></menuitem>
      <menuitem label="Underline" id="underline"></menuitem>
    </menu>
  </menu>

  <script>
    // 获取上下文菜单元素
    var contextMenu = document.getElementById("context-menu");

    // 添加 click 事件监听器
    contextMenu.addEventListener("click", function(event) {
      switch (event.target.id) {
        case "cut":
          alert("cut");
          break;
        case "copy":
          alert("copy");
          break;
        case "paste":
          alert("paste");
          break;
        case "bold":
          alert("bold");
          break;
        case "italic":
          alert("italic");
          break;
        case "underline":
          alert("underline");
          break;
      }
    }, false);

    // 将上下文菜单添加到页面中
    document.body.appendChild(contextMenu);
  </script>

</body>
</html>

总结

HTML DOM Menu 对象提供了访问和操作菜单的途径，具有丰富的属性和方法，可以实现动态修改菜单、响应菜单事件等功能。

HTML DOM Map 对象 HTML DOM MenuItem 对象