JavaScript DOM操作：通过属性值查找元素并更新其他标签内容-html教程-PHP中文网

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

花韻仙語

发布： 2025-10-30 10:44:38

原创

824人浏览过

javascript dom操作：通过属性值查找元素并更新其他标签内容

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

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

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

HTML结构概述

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

<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>

登录后复制

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

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

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

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

JavaScript 实现步骤

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

获取触发ID： myFunc 函数接收 clicked_id 参数，这个参数就是我们用来查找元素的依据。
查找目标下拉选项： 使用 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 值的元素。
提取文本内容： 获取找到的元素的 innerText 属性，即其可见文本。
```
var text = elem.innerText;
```
登录后复制
此时，如果 clicked_id 是 "1106"，那么 text 将会是 "Robert"。
向上查找父级容器： 主显示按钮并不直接是下拉选项的兄弟元素，它们都位于一个共同的父级 .dropdown 容器内。我们需要使用 closest() 方法向上遍历DOM树，找到最近的 .dropdown 祖先元素。

标书对比王
标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情
```
var parent = elem.closest(".dropdown");
```
登录后复制
closest(".dropdown") 会从 elem 元素开始，向上查找第一个匹配 .dropdown 选择器的祖先元素。
向下查找主显示按钮： 在找到的 .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] 选择器的元素。
更新主显示按钮： 最后，更新主显示按钮的 innerText 和 data-dselect-text 属性。
```
button.innerText = text;
button.setAttribute('data-dselect-text', text);
```
登录后复制

完整 JavaScript 代码

将上述步骤整合到 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和JavaScript代码放在同一个页面中，点击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 + "' 的元素");
    }
}

登录后复制