以下是一个简单的示例，演示如何使用 JavaScript 和 HTML DOM 操纵 <option> 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Option Object Example</title>
</head>
<body>
<!-- 示例的 <select> 元素 -->
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<script>
// 获取 <select> 元素的引用
var selectElement = document.getElementById('mySelect');
// 获取 <select> 元素的子元素（<option> 元素）
var optionElements = selectElement.getElementsByTagName('option');
// 遍历并输出每个 <option> 元素的值和文本内容
for (var i = 0; i < optionElements.length; i++) {
var option = optionElements[i];
console.log('Option Value:', option.value);
console.log('Option Text:', option.textContent);
}
// 通过 JavaScript 动态创建和添加新的 <option> 元素
var newOption = document.createElement('option');
newOption.value = 'option4';
newOption.textContent = 'Option 4';
selectElement.appendChild(newOption);
</script>
</body>
</html>
在这个例子中，我们创建了一个包含三个选项的下拉列表（<select>）。通过 JavaScript，我们获取了 <select> 元素的引用，然后使用 getElementsByTagName 方法获取了所有的 <option> 元素。接着，我们遍历每个 <option> 元素，并输出其值和文本内容。
最后，我们通过 JavaScript 动态创建了一个新的 <option> 元素，并使用 appendChild 方法将其添加到 <select> 元素中。
Option 对象通常用于处理和操作 <option> 元素的属性和方法。
转载请注明出处：http://www.zyzy.cn/article/detail/6230/JavaScript 和 HTML DOM