J*aScript DOM操作：通过属性值查找元素并更新其他标签内容

本文详细介绍了如何使用纯J*aScript（Vanilla JS）根据自定义属性值查找特定的HTML元素，并提取其文本内容，进而更新页面上另一个相关元素的文本和自定义属性。教程涵盖了DOM查询、文本提取以及父子元素间导航的关键技术，旨在帮助开发者高效地实现动态UI更新功能。

动态更新UI：根据属性值查找与修改元素

在Web开发中，经常需要根据用户交互或特定数据动态更新页面上的UI元素。一个常见的场景是，用户选择一个选项后，需要将该选项的文本内容反映到另一个显示区域，并更新相关的数据属性。本教程将以一个下拉选择框（Dropdown Select）为例，演示如何通过一个按钮的ID值，找到对应的下拉选项，提取其文本，然后用这个文本更新主显示按钮的文本和数据属性。

HTML结构概述

我们来看一个典型的HTML结构，它包含一个隐藏的 元素和一套自定义的模拟下拉菜单：

<select name="client" class="select form-select" id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
    <!-- 主显示按钮，需要被更新 -->
    <button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div class="dropdown-menu">
      <div class="d-flex flex-column">
        <input type="text" class="form-control" placeholder="Search" autofocus="">
        <div class="dselect-items" style="max-height:360px;overflow:auto">
          <!-- 下拉选项，包含 data-dselect-value 属性 -->
          <button class="dropdown-item active" data-dselect-value="1109" type="button">Charles</button>
          <button class="dropdown-item" data-dselect-value="1108" type="button">Fred</button>
          <button class="dropdown-item" data-dselect-value="1107" type="button">Lionel</button>
          <button class="dropdown-item" data-dselect-value="1106" type="button">Robert</button>
          <button class="dropdown-item" data-dselect-value="1105" type="button">Mike</button>
        </div>
      </div>
    </div>
</div>

<!-- 外部触发按钮，其ID将作为查找依据 -->
<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>

在这个结构中，有几个关键点：

• 一个带有 data-dselect-value 属性的 元素，它代表了下拉菜单中的一个具体选项，其 data-dselect-value 值与 的 value 对应。
• 一个作为下拉菜单入口的 元素，它显示当前选中的值，并带有一个 data-dselect-text 属性，需要被更新。
• 一个独立的 ，当点击时，会将其自身的 id 值（例如 "1106"）传递给 myFunc 函数。

我们的目标是：当点击外部按钮（ID为"1106"）时，找到 data-dselect-value="1106" 的下拉选项，获取其文本（"Robert"），然后用这个文本更新主显示按钮的文本内容和 data-dselect-text 属性。

J*aScript 实现步骤

我们将使用纯J*aScript（Vanilla JS）来完成这个任务。

1. 获取触发ID： myFunc 函数接收 clicked_id 参数，这个参数就是我们用来查找元素的依据。

2. 查找目标下拉选项： 使用 document.querySelector() 结合属性选择器来查找 data-dselect-value 属性与 clicked_id 匹配的元素。

   var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');

   这里，[data-dselect-value="'+ clicked_id +'"] 是一个CSS选择器，它会精确匹配 data-dselect-value 属性等于 clicked_id 值的元素。

3. 提取文本内容： 获取找到的元素的 innerText 属性，即其可见文本。

   var text = elem.innerText;

   此时，如果 clicked_id 是 "1106"，那么 text 将会是 "Robert"。

4. 向上查找父级容器： 主显示按钮并不直接是下拉选项的兄弟元素，它们都位于一个共同的父级 .dropdown 容器内。我们需要使用 closest() 方法向上遍历DOM树，找到最近的 .dropdown 祖先元素。

   Jaaz

   开源的AI设计智能体

   216 查看详情

   var parent = elem.closest(".dropdown");

   closest(".dropdown") 会从 elem 元素开始，向上查找第一个匹配 .dropdown 选择器的祖先元素。

5. 向下查找主显示按钮： 在找到的 .dropdown 父级容器内，使用 querySelector() 查找需要更新的主显示按钮。这个按钮可以通过其 data-bs-toggle="dropdown" 属性来唯一标识。

   var button = parent.querySelector("[data-bs-toggle=dropdown]");

   parent.querySelector("[data-bs-toggle=dropdown]") 会在 parent 元素（即 .dropdown 容器）的子孙元素中查找第一个匹配 [data-bs-toggle=dropdown] 选择器的元素。

6. 更新主显示按钮： 最后，更新主显示按钮的 innerText 和 data-dselect-text 属性。

   button.innerText = text;
   button.setAttribute('data-dselect-text', text);

完整 J*aScript 代码

将上述步骤整合到 myFunc 函数中：

function myFunc(clicked_id) {
  // 1. 根据 data-dselect-value 属性查找对应的下拉选项元素
  var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');

  // 2. 提取该下拉选项的文本内容
  var text = elem.innerText;

  // 3. 向上查找最近的 .dropdown 父级容器
  var parent = elem.closest(".dropdown");

  // 4. 在父级容器内向下查找主显示按钮（通过 data-bs-toggle 属性）
  var button = parent.querySelector("[data-bs-toggle=dropdown]");

  // 5. 更新主显示按钮的文本内容
  button.innerText = text;

  // 6. 更新主显示按钮的 data-dselect-text 属性
  button.setAttribute('data-dselect-text', text);
}

运行示例

将上述HTML和J*aScript代码放在同一个页面中，点击ID为"1106"的“Select client (1106)”按钮，你会看到页面顶部的“Charles”按钮会立即更新为“Robert”，并且其 data-dselect-text 属性也会相应改变。

注意事项与总结

• DOM查询效率： document.querySelector() 是一个非常强大的方法，可以接受任何有效的CSS选择器。在复杂页面中，使用更具体的选择器（如ID选择器或组合选择器）可以提高查询效率。

• DOM遍历： closest() 和 querySelector() 是进行DOM遍历的两个重要方法。closest() 用于向上查找祖先元素，而 querySelector() （在特定元素上调用时）用于向下查找子孙元素。熟练掌握它们对于处理复杂DOM结构至关重要。

• 错误处理： 在实际应用中，应该考虑 elem 或 parent 是否可能为 null 的情况。例如，如果 document.querySelector() 没有找到匹配的元素，它将返回 null。在尝试访问 null 值的属性（如 elem.innerText）时会引发错误。可以添加条件判断来避免这类问题：

  function myFunc(clicked_id) {
      var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
      if (elem) { // 确保元素存在
          var text = elem.innerText;
          var parent = elem.closest(".dropdown");
          if (parent) { // 确保父级容器存在
              var button = parent.querySelector("[data-bs-toggle=dropdown]");
              if (button) { // 确保目标按钮存在
                  button.innerText = text;
                  button.setAttribute('data-dselect-text', text);
              } else {
                  console.warn("未找到主显示按钮");
              }
          } else {
              console.warn("未找到 .dropdown 父级容器");
          }
      } else {
          console.warn("未找到匹配 data-dselect-value='" + clicked_id + "' 的元素");
      }
  }

• 语义化HTML： 良好的HTML结构和有意义的属性名称（尤其是 data-* 属性）可以使J*aScript代码更易于编写和维护。

通过本教程，您应该能够理解并实现根据特定属性值查找元素、提取信息并动态更新页面上其他相关元素的功能。这种模式在构建交互式和响应式Web界面时非常有用。

以上就是J*aScript DOM操作：通过属性值查找元素并更新其他标签内容的详细内容，更多请关注其它相关文章！

# 未找到  # 建设网站分享图片app  # 金山工业区优化推广网站  # 明星关键词排名怎么看  # 印刷seo优化哪家专业  # 营销号怎么做剪映推广  # 青岛网站建设含代码  # 网站建设租赁费用  # seo网页优化代码  # 牙科数据平台营销推广  # 外贸网站推广教程视频下载安装  # 自适应  # 全选  # 网页设计  # 双击  # 容器内  # css  # 第一个  # 自定义  # 遍历  # 选择器  # ov  # 属性选择器  # id选择器  # html元素  # css选择器  # app  # js  # html  # java  # javascript 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 如何在解析前预检查XML文件的完整性？ 比如检查文件大小或特定结束标签  B站怎么快速升级 B站用户等级提升攻略【详解】  uc浏览器官网网页版使用 uc浏览器官网免费在线首页  J*aScript文本高亮功能优化：解决多词匹配错误与精确分割策略  C++ optional用法详解_C++17处理可能为空的返回值  狙击外星人小游戏在线链接_狙击外星人小游戏网页链接  百度网盘如何设置上传限额  荣耀盒子应用管理技巧  mysql中外键约束如何使用_mysql FOREIGN KEY操作  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  虫虫助手如何更新游戏  Yandex俄罗斯搜索引擎官网入口 Yandex网页端直接访问  Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  家里的小飞虫总是不断，用什么方法可以彻底根除？  悟空浏览器网页版链接 悟空浏览器网页版最新有效地址  银信通自动开通原因揭秘  《密马》发布账号方法  如何在vscode中关闭it环境  拷贝漫画2025网页版入口 拷贝漫画官网免费看全集  mysql导入sql文件能分批导入吗_mysql分批次导入大sql文件的实用技巧  PHP实现等比数列：构建数组元素基于前一个值递增的方法  微信网页版在线登录 微信网页版在线使用入口  《真我》申请退款方法  小红书网页版在线直达 小红书网页版免费登录入口  《土豆雅思》修改密码方法  青橙手机语音助手怎么唤醒_青橙手机语音助手设置与唤醒方法  原子笔记app误删找回教程  哔哩哔哩在线观看入口 B站官网免费进入  iPhone12是否要更新ios16  我的世界官方网址入口 我的世界游戏主页直达入口  动漫岛汉化官网网 动漫岛官方动漫汉化地址  iPhone 15 Pro如何查看存储空间占用_iPhone 15 Pro存储空间查看教程  抖音号怎么解除企业认证改成个人？改成个人有影响吗？  如何通过settings.json个性化您的VS Code体验  大熊猫抓取竹子的“大拇指”其实是什么？蚂蚁庄园课堂今天答案最新11月30日  《跳跳舞蹈》循环播放方法  Leaflet地图弹出窗口图片动态显示：避免缺失图标的专业指南  美发店速赢秘籍  Win10通知横幅停留时间修改 Win10自定义通知显示时长【技巧】  Python定时发送QQ消息  Three.js中动态更换3D模型纹理的教程  海外搜索引擎推广效果怎么样,怎么分析效果！  荣耀magicv5怎么上手测评  百度小说看书时如何翻页_百度小说手动翻页与自动翻页设置  macosmonterey系统外接显示器驱动怎么安装_macosmonterey外接显示器驱动与分辨率调整  电脑从睡眠中被自动唤醒怎么办_Windows唤醒源事件查看与禁用【解决】  更换小红书群背景怎么换?小红书群规则怎么设置？  PDF文件去水印平台入口 PDF水印删除网址  iSpring三分屏制作教程  教资成绩怎么查询 

 2025-10-30