在现代web开发中，根据用户交互动态更新页面内容是常见的需求。本教程将引导您完成一个简单的示例，该示例根据用户在输入框中输入的值，在页面上显示不同的图片，并提供一个按钮来清空显示区域。我们将重点关注javascript中高效且健壮的dom操作实践。
核心HTML结构
首先，我们需要一个基础的HTML结构来承载输入框、按钮和图片显示区域。以下是一个简单的表格布局，其中包含一个输入框、两个操作按钮和一个用于显示内容的段落元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态内容管理</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
#middleCell {
min-height: 100px; /* 确保有足够空间显示图片 */
display: flex;
align-items: center;
justify-content: center;
}
#middleCell img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<input id="input1" type="number" placeholder="请输入数字">
<button id="leftButton" onclick="fruitTest();">Enter</button>
</td>
<td>
<p id="middleCell">Hello</p>
</td>
<td>
<button id="clearButton" onclick="clearBox();">Clear</button>
</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>在这个HTML结构中：
- <input id="input1">：用户输入数字的区域。
- <button id="leftButton" onclick="fruitTest();">：点击后触发 fruitTest 函数，根据输入显示图片。
- <p id="middleCell">：用于显示图片或初始文本的区域。
- <button id="clearButton" onclick="clearBox();">：点击后触发 clearBox 函数，清空 middleCell 的内容。
- script.js：我们将把所有的JavaScript逻辑放在这个文件中。
JavaScript逻辑实现
接下来，我们将编写JavaScript代码来实现动态图片显示和清空功能。这里我们将采用更现代、更健壮的DOM操作方法。
// script.js
// 定义图片URL常量
const appleImgUrl = "https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af";
const pearImgUrl = "https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e";
// 获取DOM元素的引用，使用const声明，表示引用不变
const middleCell = document.getElementById("middleCell");
/**
* 根据用户输入值，在middleCell中显示对应的图片。
*/
function fruitTest() {
const myInput = document.getElementById("input1");
// 获取输入框的值，注意其为字符串类型
const inputValue = parseInt(myInput.value, 10); // 将输入值转换为整数
// 每次显示新内容前，先清空middleCell的现有内容
middleCell.innerHTML = '';
// 创建一个新的图片元素
const imgElement = document.createElement('img');
let imageSet = false; // 标记是否设置了图片
if (inputValue > 100) {
imgElement.src = appleImgUrl;
imgElement.alt = "Apple Image"; // 为图片添加alt属性，提高可访问性
imageSet = true;
} else if (inputValue < 0) {
imgElement.src = pearImgUrl;
imgElement.alt = "Pear Image"; // 为图片添加alt属性
imageSet = true;
} else {
// 如果输入值不符合条件，可以显示默认文本或不显示图片
middleCell.textContent = "请输入大于100或小于0的数字";
}
// 如果设置了图片，则将其添加到middleCell中
if (imageSet) {
middleCell.appendChild(imgElement);
}
}
/**
* 清空middleCell中的所有内容。
*/
function clearBox() {
middleCell.innerHTML = ''; // 清空所有子元素和文本
middleCell.textContent = "Hello"; // 恢复初始文本
}关键改进点与最佳实践
- innerHTML 正确拼写： 原始代码中存在 innerHtml 的拼写错误，正确的属性名是 innerHTML (注意大写H)。JavaScript对大小写敏感，错误的拼写会导致属性无法识别，从而无法更新DOM。
-
动态创建DOM元素：
- 问题： 原始方法通过拼接HTML字符串（如 "<img src=\"...\">"）然后赋值给 innerHTML 来插入图片。
- 改进： 使用 document.createElement('img') 创建一个 <img> 元素，然后通过 imgElement.src = imageUrl; 设置其 src 属性，最后使用 middleCell.appendChild(imgElement); 将其添加到父元素中。
- 优点： 这种方法更安全，可以有效防止XSS（跨站脚本攻击），因为它不会解析任意HTML字符串。同时，它也更灵活，方便设置其他属性（如 alt、width、height 等）和事件监听器。
-
使用 const 和 let：
- 问题： 原始代码使用了 var 来声明变量。
- 改进： 在现代JavaScript中，推荐使用 const 声明常量（一旦赋值不能更改），使用 let 声明变量（可以重新赋值）。
- 优点： const 和 let 提供了块级作用域，有助于避免变量污染和意外的重新赋值，使代码更易于理解和维护。
- 清空现有内容： 在 fruitTest 函数中，每次显示新图片前，我们都先执行 middleCell.innerHTML = ''; 来清空 middleCell 中的所有内容。这确保了每次只显示一张图片，避免了图片重复叠加的问题。
- 输入值类型转换： input 元素的 value 属性总是返回一个字符串。在进行数值比较（> 或 <）之前，需要使用 parseInt() 或 parseFloat() 将其转换为数字类型。parseInt(myInput.value, 10) 是一个安全的做法，其中 10 表示使用十进制。
- 可访问性 (Accessibility)： 为 <img> 元素添加 alt 属性是一个良好的实践，它为视觉障碍用户提供了图片的文字描述，也有利于SEO。
- 清晰的清空逻辑： clearBox 函数不仅清空了内容，还恢复了初始的 "Hello" 文本，提供了更好的用户体验。
总结
通过本教程，我们学习了如何使用JavaScript动态地操作DOM，以响应用户输入并更新页面内容。我们不仅修正了常见的拼写错误，还介绍了使用 document.createElement 和 appendChild 进行DOM操作的优势，以及采用 const/let 等现代JavaScript语法的重要性。这些实践将帮助您编写更健壮、更安全、更易于维护的Web应用程序。在实际开发中，您还可以进一步考虑输入验证、错误处理以及更复杂的UI交互逻辑。
立即学习“Java免费学习笔记（深入）”；
