HTML | DOM 菜单对象

HTML是一种标记语言，用于构建 Web 页面。DOM(Document Object Model)是 HTML 的编程接口，它可以让开发者使用脚本语言（如JavaScript）来操作 HTML 文档。菜单对象是 DOM 的一个重要组成部分，可用于创建网页上的菜单。

创建菜单对象

要创建菜单对象，可以使用 HTML 的 select 元素。这个元素通常用于创建下拉菜单。下面是一个基本的例子：

<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

在 JavaScript 代码中，可以使用 document.getElementById() 方法来获取菜单对象：

let mySelect = document.getElementById("mySelect");

获取选中的菜单项

要获取选中的菜单项，可以使用菜单对象的 selectedIndex 属性。这个属性返回当前选中项的索引值（从 0 开始计数）。

let selectedIndex = mySelect.selectedIndex;

要获取选中的菜单项的值，可以使用菜单对象的 value 属性。

let selectedValue = mySelect.value;

修改菜单项

要修改菜单项，可以使用菜单对象的 options 集合。这个集合包含了所有的菜单项，可以通过索引值来访问。

let options = mySelect.options;
options[0].text = "New Apple";
options[1].value = "cherry";
options[2].disabled = true;

上面的代码将第一个菜单项的文本修改为 "New Apple"，将第二个菜单项的值修改为 "cherry"，并将第三个菜单项禁用。

添加和删除菜单项

要向菜单中添加新的选项，可以使用菜单对象的 add() 方法。

let options = mySelect.options;
let newOption = new Option("Pineapple", "pineapple");
options.add(newOption);

上面的代码将一个新的菜单项添加到菜单的末尾。

要从菜单中删除一个选项，可以使用菜单对象的 remove() 方法。

let options = mySelect.options;
options[1].remove();

上面的代码将第二个菜单项从菜单中删除。

参考链接

• HTML | DOM 菜单对象