以下是一个简单的例子,演示如何使用 JavaScript 获取和操作与 <li> 元素关联的 Li 对象:
<!DOCTYPE html>
<html>
<head>
<title>Li 对象示例</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li id="item1">苹果</li>
<li id="item2">香蕉</li>
<li id="item3">橙子</li>
</ol>
<!-- JavaScript 代码 -->
<script>
function updateListItem() {
// 获取 Li 对象
var listItem = document.getElementById('item2');
// 修改列表项文本内容
listItem.innerText = "葡萄";
}
</script>
<!-- 按钮触发 JavaScript 函数 -->
<button onclick="updateListItem()">更新列表项</button>
</body>
</html>
在这个例子中,我们创建了一个有序列表(<ol>)包含三个列表项(<li>)。通过 JavaScript,我们使用 document.getElementById 方法获取了与第二个列表项相关联的 Li 对象。然后,我们通过修改 innerText 属性来更新列表项的文本内容。点击页面上的按钮将触发 updateListItem 函数,从而更新第二个列表项的文本。
实际应用中,你可以根据需要使用不同的选择器方法来获取 <li> 元素,例如使用 querySelector 或其他选择器方法。
转载请注明出处:http://www.zyzy.cn/article/detail/4416/HTML