以下是一个简单的例子，演示如何使用 JavaScript 获取和操作与 <ol> 元素关联的 Ol 对象：
<!DOCTYPE html>
<html>
<head>
<title>Ol 对象示例</title>
</head>
<body>
<!-- 有序列表 -->
<ol id="exampleOl">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
<!-- JavaScript 代码 -->
<script>
function addItemToList() {
// 获取 Ol 对象
var exampleOl = document.getElementById('exampleOl');
// 创建新的列表项
var newItem = document.createElement('li');
newItem.textContent = "葡萄";
// 将新的列表项添加到有序列表中
exampleOl.appendChild(newItem);
}
function removeLastItem() {
// 获取 Ol 对象
var exampleOl = document.getElementById('exampleOl');
// 获取最后一个列表项
var lastItem = exampleOl.lastElementChild;
// 从有序列表中移除最后一个列表项
exampleOl.removeChild(lastItem);
}
</script>
<!-- 按钮触发 JavaScript 函数 -->
<button onclick="addItemToList()">添加列表项</button>
<button onclick="removeLastItem()">移除最后一项</button>
</body>
</html>
在这个例子中，我们创建了一个包含有序列表 <ol> 元素的 HTML 页面。通过 JavaScript，我们使用 document.getElementById 方法获取了与 <ol> 元素关联的 Ol 对象，并通过创建新的列表项和添加/移除列表项的操作来演示对有序列表的操作。点击页面上的按钮将触发相应的 JavaScript 函数。
请注意，这只是一个简单的演示，实际应用中可以根据需要使用不同的选择器方法来获取 <ol> 元素。
转载请注明出处：http://www.zyzy.cn/article/detail/4421/HTML