前言
上一节是本文的知识点讲解，有需要的码客们先看一下，本文是练习题
题目要求
编写一个HTML文档，展示DOM编程的基础知识，包括节点概念的理解、如何获取元素节点、节点属性的操作以及样式调整。要求文档中包含一个带有特定ID的div元素，以及一个按钮。当用户点击按钮时，应触发一系列DOM操作，包括修改div元素的文本内容、改变其背景色、添加class以及读写自定义的data-*属性。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程基础探索</title>
<style> /* 初始样式 */ #myDiv { width: 200px; height: 200px; background-color: lightgray; color: black; padding: 20px; text-align: center; font-size: 20px; } /* 新增的class样式 */ .new-class { border: 2px solid red; }
</style>
</head>
<body> <!-- 带有id的div元素 -->
<div id="myDiv">我是一个可操作的div元素</div> <!-- 触发DOM操作的按钮 -->
<button onclick="exploreDOM()">探索DOM</button> <script>
function exploreDOM() { // 获取元素节点 var divNode = document.getElementById('myDiv'); console.log('获取到的元素节点：', divNode); // 修改节点属性：文本内容 divNode.textContent = 'DOM编程基础探索'; console.log('修改后的文本内容：', divNode.textContent); // 修改节点样式：背景色 divNode.style.backgroundColor = 'lightblue'; console.log('修改后的背景色：', divNode.style.backgroundColor); // 修改节点属性：添加class divNode.classList.add('new-class'); console.log('添加的class：', divNode.className); // 读取节点属性：自定义data-*属性（假设不存在） var customData = divNode.getAttribute('data-custom'); if (customData) { console.log('自定义data-*属性值：', customData); } else { console.log('未找到自定义data-*属性'); } // 设置节点属性：添加自定义data-*属性 divNode.setAttribute('data-custom', 'helloDOM'); console.log('已添加的自定义data-*属性：', divNode.getAttribute('data-custom'));
}
</script> </body>
</html>在这个HTML文档中，我们首先定义了一个带有ID myDiv 的div元素，并为其指定了初始样式。然后，我们添加了一个按钮，当按钮被点击时，会触发exploreDOM函数。这个函数执行了一系列DOM操作，包括获取元素节点、修改文本内容、改变背景色、添加class以及读写自定义的data-*属性。通过控制台输出，我们可以验证每一步操作的结果。
今天的JS学习就到这里，我是星途，愿我们共同进步。
respect！
