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 对象属性
Menu 对象有一些常用的属性,列举如下:
属性 | 类型 | 描述 |
---|---|---|
type | String | 获取或设置菜单类型,如contextmenu |
label | String | 获取或设置菜单标签 |
id | String | 获取或设置菜单唯一标识符 |
className | String | 获取或设置菜单类名 |
innerHTML | String | 获取或设置菜单的 HTML 内容 |
isContainer | Boolean | 获取菜单是否为菜单容器 |
menuElement | HTMLElement | 获取菜单所在的元素 |
Menu 对象方法
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 对象提供了访问和操作菜单的途径,具有丰富的属性和方法,可以实现动态修改菜单、响应菜单事件等功能。