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

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

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

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

HTML结构概述

我们来看一个典型的HTML结构，它包含一个隐藏的

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

一个带有 data-dselect-value 属性的
一个作为下拉菜单入口的
一个独立的

我们的目标是：当点击外部按钮（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 祖先元素。
```
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 + "' 的元素");
    }
}