【前端教程】DOM操作实战案例集：从基础到进阶 - 指南

DOM（文档对象模型）是JavaScript操作网页元素的基础，掌握DOM操作是前端开发的核心技能之一。以下整理了15个实用的DOM操作案例，涵盖元素选择、属性修改、事件处理等多个方面，所有代码均按照规范格式呈现。

1. 图片大小切换器

通过按钮控制图片的放大和缩小功能，使用标签选择器获取元素并修改其样式属性。

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      <title>图片大小切换</title>
        <script>
          window.onload = function() {
          
          // 获取所有input元素（按钮）
          var inputButtons = document.getElementsByTagName("input");
          // 放大按钮点击事件
          inputButtons[0].onclick = function() {
          
          // 获取图片元素
          var image = document.getElementsByTagName("img")[0];
          var currentWidth = image.width;
          var currentHeight = image.height;
          // 增加尺寸
          image.style.width = (currentWidth + 23) + "px";
          image.style.height = (currentHeight + 23) + "px";
          };
          // 缩小按钮点击事件
          inputButtons[1].onclick = function() {
          
          var image = document.getElementsByTagName("img")[0];
          var currentWidth = image.width;
          var currentHeight = image.height;
          // 限制最小尺寸
          if (currentWidth >
          23 && currentHeight >
          23) {
          
          image.style.width = (currentWidth - 23) + "px";
          image.style.height = (currentHeight - 23) + "px";
          }
          };
          };
        </script>
      </head>
      <body>
        <img src="img/三连.jpg" width="400px" height="100px" />
        <br />
        <input type="button" value="放大" />
        <input type="button" value="缩小" />
      </body>
    </html>

2. 文本框内容修改器

通过按钮事件触发弹窗，获取用户输入并修改文本框内容，展示表单元素值的操作方法。

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      <title>文本框内容修改</title>
        <script>
          function updateTextBox() {
          
          var userInput = prompt("请输入要添加或修改的内容");
          if (userInput !== null) {
          
          // 获取文本框元素并修改其值
          var textBox = document.getElementById("textBoxId");
          textBox.value = userInput;
          }
          }
        </script>
      </head>
      <body>
      <p>诗书画唱</p>
        <input type="text" id="textBoxId" />
        <input
          type="button"
          value="点击修改文本框内容"
          onclick="updateTextBox()"
        />
      </body>
    </html>

3. 超链接地址修改

演示如何获取超链接元素并动态修改其href属性，实现页面加载后自动更改链接目标。

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      <title>修改超链接地址</title>
        <script>
          window.onload = function() {
          
          // 获取第一个超链接元素并修改其href属性
          var link = document.getElementsByTagName("a")[0];
          link.href = "http://www.baidu.com";
          };
        </script>
      </head>
      <body>
          <a href="https://space.bilibili.com/434918741">
          点击我跳转到百度呀 ヾ(o◕∀◕)ﾉ
        </a>
      </body>
    </html>

4. 批量修改div内容

通过按钮点击事件，获取页面中所有div元素并批量修改其内容，展示元素集合的遍历方法。

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      <title>批量修改div内容</title>
        <style>
          div {
          
          width: 200px;
          height: 200px;
          border: 2px solid blue;
          float: left;
          margin-left: 23px;
          }
        </style>
        <script>
          window.onload = function() {
          
          // 获取按钮元素
          var changeButton = document.getElementsByTagName("input")[0];
          // 绑定点击事件
          changeButton.onclick = function() {
          
          var userInput = prompt("请输入要显示的内容");
          if (userInput !== null) {
          
          // 获取所有div元素
          var divElements = document.getElementsByTagName("div");
          // 遍历并修改每个div的内容
          for (var div of divElements) {
          
          div.innerHTML = userInput;
posted @ 2025-09-22 19:04  ycfenxi  阅读(21)  评论(0)    收藏  举报