HTML | DOM 菜单项对象

HTML | DOM 提供了菜单（Menu）项对象（菜单项），菜单是一个可选的组合框，可在用户点击时弹出。菜单项中的每个项目包含一个文本项和一个（可选的）关联值。

创建菜单项

要创建一个菜单项，在 JS 中，可以使用 createElement() 方法创建元素节点，然后使用其他属性和方法来为其添加文本、设置类名、设置值等。创建菜单项的代码如下：

const menuItem = document.createElement('option');
menuItem.text = 'Select me';
menuItem.className = 'menu-item';
menuItem.value = 'menu-value';

在上面的代码中，我们创建了一个 select 元素的选项 option，将其文本属性设置为 “Select me”，类名设置为 “menu-item”，值设置为 “menu-value”。

添加菜单项

要将菜单项添加到菜单中，可以使用菜单对象的 add() 方法，该方法添加一个新的选项到一个菜单中。当 add() 方法被调用时，会在菜单末尾添加一个新的选项。使用 add() 方法添加菜单项的代码如下所示：

const menu = document.createElement('select');
menu.add(menuItem); // add the menuItem to the menu object

在上面的代码中，我们首先创建了一个 select 元素的菜单对象 menu，然后将 menuItem 菜单项添加到菜单中，最后将这个菜单对象添加到文档中。

删除菜单项

要从菜单中删除项，可以使用菜单对象的 remove() 方法，该方法从下拉菜单中删除选定的选项。使用 remove() 方法删除一个选项的代码如下：

const selectedItem = menu.options[0];
menu.remove(selectedItem);

在上面的代码中，我们创建一个 selectedItem 变量，将它设置为菜单的第一个选项，并将其删除。这将从菜单中删除其文本、样式和值等所有属性。

修改菜单项

要修改菜单项，先得找到要修改的菜单项对象。可以使用菜单对象的 options 属性来获取所有 option 元素数组，然后可以使用数组下标来选择要修改的项。例如，在以下代码中，我们修改了第一个菜单项的文本和值：

const menuItems = menu.options; // get all options (menu items) in the menu
menuItems[0].text = 'New menu item'; // change the first option's text
menuItems[0].value = 'new-value'; // change the first option's value

在上面的代码中，我们先使用 menu.options 获取所有菜单项，然后将第一个菜单项的文本设置为 “New menu item”，值设置为 “new-value”。

菜单项对象提供了很多方法和属性来方便我们控制菜单项，通过操作菜单项对象，我们可以轻松地创建、添加、删除和修改菜单项，使用户获得更好的使用体验。