本文详细介绍了如何使用纯 javascript 根据 html 元素的自定义属性值查找特定元素，提取其文本内容，并利用这些信息动态更新页面上另一个相关元素的文本和自定义属性。教程将通过一个实际的下拉菜单示例，演示 `document.queryselector`、`element.closest` 和 `element.setattribute` 等核心 dom 操作方法，实现高效且响应式的用户界面更新。
在现代 Web 开发中，动态更新用户界面是常见的需求。例如，当用户在一个交互式组件中选择一个选项时，我们可能需要根据这个选择来更新页面上其他区域的显示内容。本教程将以一个典型的下拉菜单组件为例，演示如何利用 javaScript 实现这一功能：根据一个外部触发的 ID 值，在复杂的html 结构中定位到对应的选项元素，提取其文本，然后用这个文本来更新一个作为下拉菜单显示按钮的文本和相关属性。
HTML 结构概览
为了更好地理解操作目标，我们首先来看一下涉及到的 HTML 结构。这里包含一个隐藏的 <select> 元素和一套模拟下拉菜单行为的 <div> 和 <button> 组合。我们的主要目标是更新显示下拉菜单当前选中项的那个 <button>。
<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 onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" 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" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button> <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button> <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button> <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button> <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button> </div> <div class="dselect-no-results d-none">No results found</div> </div> </div> </div> <!-- 外部触发按钮，提供 ID --> <button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>我们的任务是：当点击 id=”1106″ 的“Select client”按钮时，获取其 ID 值（例如 1106），然后：
- 找到 data-dselect-value=”1106″ 的那个 <button class=”dropdown-item”> 元素。
- 提取这个按钮的文本内容（例如“Robert”）。
- 找到主下拉菜单的显示按钮（<button class=”form-select” data-bs-toggle=”dropdown”>）。
- 将这个显示按钮的文本内容和 data-dselect-text 属性更新为提取到的“Robert”。
javascript实现
我们将使用纯 JavaScript（Vanilla js）来完成这个任务，避免引入额外的库，以便更好地理解 DOM 操作的基础。
立即学习“Java 免费学习笔记（深入）”；
function myFunc(clicked_id) {// 1. 根据传入的 ID 值，查找具有匹配 data-dselect-value 属性的元素 // 使用属性 选择器 [attribute="value"] var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]'); // 2. 提取找到元素的文本内容 var text = elem.innerText; // 3. 向上遍历 DOM 树，找到最近的父级 .dropdown 容器 // closest() 方法从当前元素开始，沿着 DOM 树向上查找，直到找到匹配选择器的祖先元素 var parent = elem.closest(".dropdown"); // 4. 在 .dropdown 容器内部，查找具有 data-bs-toggle="dropdown" 属性的按钮 // 这个按钮就是我们希望更新的下拉菜单显示按钮 var button = parent.querySelector("[data-bs-toggle=dropdown]"); // 5. 更新目标按钮的文本内容 button.innerText = text; // 6. 更新目标按钮的 data-dselect-text 属性 button.setAttribute('data-dselect-text', text); }代码解析
-
document.querySelector(‘[data-dselect-value=”‘ + clicked_id + ‘”]’):
-
elem.innerText:
- 一旦找到了目标元素 elem，innerText 属性可以方便地获取该元素及其所有子元素的可见文本内容。在这个例子中，它将获取到“Robert”。
-
elem.closest(“.dropdown”):
- Element.closest() 方法从当前元素（elem，即 data-dselect-value 所在的按钮）开始，沿着 DOM 树向上查找，返回第一个匹配指定 CSS 选择器（.dropdown）的祖先元素。
- 这一步非常关键，因为它帮助我们在复杂的嵌套结构中找到包含下拉菜单的顶级容器，为后续定位显示按钮提供了一个明确的上下文。
-
parent.querySelector(“[data-bs-toggle=dropdown]”):
- 在找到的。dropdown 父容器 parent 内部，我们再次使用 querySelector()。
- 这次，我们查找的是具有 data-bs-toggle=”dropdown” 属性的元素。这个选择器准确地定位了负责显示下拉菜单内容的那个主按钮。
-
button.innerText = text:
- 将之前提取到的文本内容（例如“Robert”）赋值给目标按钮的 innerText 属性，从而改变其显示的文本。
-
button.setAttribute(‘data-dselect-text’, text):
关键 DOM 操作方法总结
- document.querySelector(selector): 根据 CSS 选择器返回文档中第一个匹配的元素。适用于根据 ID、类、标签名或属性值进行精确查找。
- Element.innerText: 获取或设置元素的可见文本内容。
- Element.closest(selector): 返回与选择器匹配的最近的祖先元素（包括元素本身）。非常适合在复杂嵌套结构中向上查找特定类型的父容器。
- Element.setAttribute(name, value): 设置元素上指定属性的值。如果属性不存在，则创建该属性。
总结
通过上述 JavaScript 代码和 DOM 操作方法，我们成功地实现了根据一个动态 ID 值，在复杂的 HTML 结构中查找特定元素，提取其文本，并利用这些信息动态更新另一个相关元素的显示文本和自定义属性。这种模式在构建交互式和数据驱动的 web 应用程序 时非常有用，它展示了纯 JavaScript 在处理 DOM 操作方面的强大能力和灵活性。掌握这些核心 DOM 方法是进行高效 前端 开发的基础。
