JavaScript动态DOM操作：基于用户输入显示与清除图片教程-js教程-PHP中文网

JavaScript动态DOM操作：基于用户输入显示与清除图片教程

心靈之曲

发布： 2025-09-13 10:04:23

原创

672人浏览过

JavaScript动态DOM操作：基于用户输入显示与清除图片教程

本教程详细阐述如何使用JavaScript根据用户输入动态地在网页中插入、替换和清除图片。我们将涵盖HTML结构、JavaScript核心逻辑，包括DOM元素的获取、创建与操作，同时强调常见的错误（如innerHtml拼写错误）及现代JavaScript的最佳实践，确保代码的健壮性和可维护性。

1. 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%;
        }
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        #middleCell {
            min-height: 50px; /* 确保有足够空间显示图片 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #middleCell img {
            max-width: 100px; /* 限制图片大小 */
            height: auto;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>
                <input type="number" id="input1" placeholder="输入一个数字">
                <button id="leftButton" onclick="fruitTest();">提交</button>
            </td>
            <td>
                <p id="middleCell">等待输入...</p>
            </td>
            <td>
                <button id="clearButton" onclick="clearBox();">清除</button>
            </td>
        </tr>
    </table>

    <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

登录后复制

在这个结构中：

input1：用于接收用户输入的数字。
leftButton：点击后会调用fruitTest()函数，根据输入值显示图片。
middleCell：一个 <p> 元素，其内容将根据JavaScript逻辑动态更新为图片或清空。
clearButton：点击后会调用clearBox()函数，清空middleCell的内容。

2. JavaScript核心逻辑：DOM操作与事件处理

JavaScript代码将负责获取HTML元素、监听用户交互事件、读取输入值，并根据条件动态地创建、修改或移除DOM元素。

// script.js

// 定义图片URL，使用 const 声明常量是现代JavaScript的最佳实践
const appleImgUrl = "https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af";
const pearImgUrl = "https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e";

// 获取需要操作的DOM元素
const middleCell = document.getElementById('middleCell');
const inputElement = document.getElementById('input1'); // 提前获取输入框元素

/**
 * 根据用户输入的值，在 middleCell 中显示对应的图片。
 */
function fruitTest() {
    // 获取输入框的当前值，注意 input.value 总是返回字符串，需要转换为数字进行比较
    const inputValue = parseFloat(inputElement.value);

    // 创建一个新的图片元素
    const img = document.createElement('img');
    let imageSet = false; // 标志位，表示是否设置了图片

    if (inputValue > 100) {
        img.src = appleImgUrl;
        img.alt = "苹果图片"; // 添加alt属性以提高可访问性
        imageSet = true;
    } else if (inputValue < 0) {
        img.src = pearImgUrl;
        img.alt = "梨子图片"; // 添加alt属性以提高可访问性
        imageSet = true;
    } else {
        // 如果输入不符合条件，可以清空或显示默认信息
        middleCell.innerHTML = '请输入大于100或小于0的数字。';
        return; // 不进行后续的图片插入操作
    }

    // 在插入新图片之前，先清空 middleCell 的所有现有内容
    // 这是一个关键步骤，确保每次只显示一张图片
    middleCell.innerHTML = ''; 

    // 将创建的图片元素添加到 middleCell 中
    if (imageSet) {
        middleCell.appendChild(img);
    }
} 

/**
 * 清空 middleCell 的内容。
 */
function clearBox() {
    middleCell.innerHTML = '';
    // 清空输入框的值
    inputElement.value = '';
    // 恢复默认提示
    middleCell.innerHTML = '等待输入...';
}

登录后复制

代码解析与改进点：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

变量声明： 推荐使用 const 声明常量（如图片URL和DOM元素引用），使用 let 声明可能改变值的变量。这有助于代码的可读性和维护性，避免意外的变量重新赋值。
获取元素： 使用 document.getElementById() 获取HTML元素。为了避免重复获取，可以将经常使用的元素（如middleCell和input1）在脚本开始时获取并存储为常量。
获取输入值： inputElement.value 获取的是字符串类型。在进行数值比较前，应使用 parseFloat() 或 parseInt() 将其转换为数字。
DOM操作的正确姿势：
- innerHTML vs innerHtml： 这是一个常见的拼写错误。JavaScript中正确的属性名是 innerHTML（驼峰命名法，H大写）。原始问题中出现的 innerHtml 是一个典型的错别字，导致功能失效。
- 动态创建元素： 不建议将整个 <img> 标签作为字符串硬编码。更推荐的做法是使用 document.createElement('img') 创建一个 <img> 元素，然后通过设置其 src 属性来指定图片源。这种方式更安全，避免了潜在的XSS攻击，并且在处理更复杂的元素属性时也更灵活。
- 清空与追加： 在每次显示新图片之前，使用 middleCell.innerHTML = ''; 清空目标容器的现有内容。然后使用 middleCell.appendChild(img); 将新创建的图片元素添加到容器中。这确保了容器中只有一个图片，并且旧图片被正确移除。
用户体验： 在clearBox函数中，不仅清空了图片区域，还清空了输入框的值，并恢复了默认提示，提升了用户体验。

3. 最佳实践与注意事项

使用 const 和 let： 优先使用 const 声明不会重新赋值的变量，使用 let 声明可能改变值的变量。避免使用 var，因为它存在变量提升和作用域问题。
避免 innerHTML 拼接复杂HTML： 对于简单的文本内容，innerHTML 效率高。但当需要插入复杂结构或用户提供的内容时，应优先使用 document.createElement()、appendChild() 等方法。这不仅提高了安全性，防止XSS攻击，也使代码更易于维护。
事件监听： 虽然 onclick 属性在HTML中直接绑定事件简单明了，但在更复杂的应用中，推荐使用 element.addEventListener('click', function)。这允许为一个元素绑定多个事件处理器，并且将JavaScript行为与HTML结构分离，使代码更模块化。
```
// 示例：使用 addEventListener
// document.getElementById('leftButton').addEventListener('click', fruitTest);
// document.getElementById('clearButton').addEventListener('click', clearBox);
```
登录后复制
错误处理与用户反馈： 在实际应用中，应考虑输入验证（例如，确保输入的是有效数字）、图片加载失败时的处理，以及向用户提供清晰的反馈信息。
可访问性： 为 <img> 标签添加 alt 属性，提供图片的文字描述，这对屏幕阅读器用户非常重要。

总结

通过本教程，我们学习了如何利用JavaScript进行基础的DOM操作，包括获取元素、处理用户输入、动态创建和插入图片元素，以及清除内容。关键点在于正确使用 innerHTML 属性（注意拼写），以及通过 document.createElement() 和 appendChild() 等方法以更健壮和安全的方式操作DOM。遵循现代JavaScript的最佳实践，如使用 const/let 和 addEventListener，将有助于编写出高质量、易于维护的代码。

立即学习“Java免费学习笔记（深入）”；

以上就是JavaScript动态DOM操作：基于用户输入显示与清除图片教程的详细内容，更多请关注php中文网其它相关文章！