JavaScript DOM操作：通过属性值查找元素、提取文本并动态更新UI

     Charles     Fred     Lionel     Robert     Mike
        

我们的任务是：当点击id=”1106″的“Select client”按钮时，获取其ID值（例如1106），然后：

找到data-dselect-value=”1106″的那个元素。提取这个按钮的文本内容（例如“Robert”）。找到主下拉菜单的显示按钮（）。将这个显示按钮的文本内容和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 + ‘”]’):

document.querySelector() 是一个强大的方法，用于根据CSS选择器查找文档中的第一个匹配元素。[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):

Element.setAttribute() 方法用于设置指定元素上的新属性或更改现有属性的值。我们将目标按钮的data-dselect-text属性更新为新的文本内容，这对于一些UI库（如Bootstrap的dselect组件）来说是必要的，以确保组件内部状态与显示内容保持同步。

关键DOM操作方法总结

document.querySelector(selector): 根据CSS选择器返回文档中第一个匹配的元素。适用于根据ID、类、标签名或属性值进行精确查找。Element.innerText: 获取或设置元素的可见文本内容。Element.closest(selector): 返回与选择器匹配的最近的祖先元素（包括元素本身）。非常适合在复杂嵌套结构中向上查找特定类型的父容器。Element.setAttribute(name, value): 设置元素上指定属性的值。如果属性不存在，则创建该属性。

总结

通过上述JavaScript代码和DOM操作方法，我们成功地实现了根据一个动态ID值，在复杂的HTML结构中查找特定元素，提取其文本，并利用这些信息动态更新另一个相关元素的显示文本和自定义属性。这种模式在构建交互式和数据驱动的Web应用程序时非常有用，它展示了纯JavaScript在处理DOM操作方面的强大能力和灵活性。掌握这些核心DOM方法是进行高效前端开发的基础。