本文详细介绍了如何使用纯JavaScript（Vanilla JS）根据自定义属性值查找特定的HTML元素，并提取其文本内容，进而更新页面上另一个相关元素的文本和自定义属性。教程涵盖了DOM查询、文本提取以及父子元素间导航的关键技术，旨在帮助开发者高效地实现动态UI更新功能。
动态更新UI：根据属性值查找与修改元素
在Web开发中，经常需要根据用户交互或特定数据动态更新页面上的UI元素。一个常见的场景是，用户选择一个选项后，需要将该选项的文本内容反映到另一个显示区域，并更新相关的数据属性。本教程将以一个下拉选择框（Dropdown Select）为例，演示如何通过一个按钮的ID值，找到对应的下拉选项，提取其文本，然后用这个文本更新主显示按钮的文本和数据属性。
HTML结构概述
我们来看一个典型的HTML结构，它包含一个隐藏的 元素和一套自定义的模拟下拉菜单：
Charles Fred Lionel Robert Mike
在这个结构中，有几个关键点：
立即学习“Java免费学习笔记（深入）”；
一个带有 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 + "' 的元素"); }}
语义化HTML： 良好的HTML结构和有意义的属性名称（尤其是 data-* 属性）可以使JavaScript代码更易于编写和维护。
通过本教程，您应该能够理解并实现根据特定属性值查找元素、提取信息并动态更新页面上其他相关元素的功能。这种模式在构建交互式和响应式Web界面时非常有用。
以上就是JavaScript DOM操作：通过属性值查找元素并更新其他标签内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1590048.html
微信扫一扫 
支付宝扫一扫 
