前言
上一节是本文的知识点讲解,有需要的码客们先看一下,本文是练习题
题目要求
编写一个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!