JavaScript DOM操作：根据自定义属性值动态更新UI元素-html教程-PHP中文网

JavaScript DOM操作：根据自定义属性值动态更新UI元素

本文详细介绍了如何使用纯javascript根据元素的自定义属性值来查找特定dom元素，并提取其文本内容，进而动态更新页面上另一个关联元素的文本及自定义属性。通过queryselector、closest和setattribute等dom api，实现下拉菜单选择项与显示按钮的同步更新，提升用户界面交互性。

在现代Web应用开发中，动态更新用户界面（UI）是常见的需求。例如，当用户在一个自定义下拉菜单中选择一个项时，需要将所选项的文本同步显示在下拉菜单的触发按钮上。本教程将指导您如何利用JavaScript的DOM操作能力，实现这一功能：根据一个外部触发器提供的ID，查找具有匹配自定义属性值的元素，提取其文本，并用该文本更新另一个元素的显示内容和自定义属性。

HTML 结构概述

我们首先分析涉及的HTML结构。该结构模拟了一个自定义的下拉选择器，其中包含：

隐藏的原始 <select> 元素：通常用于表单提交，但在自定义UI中可能被隐藏。

<select name="client" class="select form-select" id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <!-- ... 其他选项 ... -->
</select>

登录后复制

自定义下拉菜单容器 <div class="dropdown dselect-wrapper select">：包裹了下拉菜单的所有可见UI组件。
下拉菜单触发按钮 <button data-bs-toggle="dropdown">：这是我们需要动态更新其文本和 data-dselect-text 属性的目标元素。
```
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
</button>
```
登录后复制
下拉菜单项 <button class="dropdown-item">：这些是用户实际可以点击选择的项，每个项都包含一个 data-dselect-value 属性来存储其对应的ID，以及 innerText 来显示名称。
```
<button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>

```
登录后复制
外部触发按钮：一个独立的按钮，点击时会提供一个ID，作为我们更新UI的依据。
```
<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>
```
登录后复制

我们的目标是，当外部按钮被点击并传入ID（例如1106）时，找到 data-dselect-value="1106" 的下拉菜单项（即“Robert”），然后将下拉菜单触发按钮的文本和 data-dselect-text 属性都更新为“Robert”。

JavaScript 实现步骤

我们将通过一个名为 myFunc 的JavaScript函数来处理这个逻辑。

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

1. 获取触发ID

当外部按钮被点击时，它会调用 myFunc(this.id)，将自身的 id 属性值作为参数 clicked_id 传递给函数。

function myFunc(clicked_id) {
    // clicked_id 即为 "1106"
}

登录后复制

2. 定位数据源元素

使用 document.querySelector() 结合属性选择器来查找具有匹配 data-dselect-value 属性的下拉菜单项。

var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
// 例如，当 clicked_id 为 "1106" 时，会找到 <button class="dropdown-item" data-dselect-value="1106">Robert</button>

登录后复制

这里的 [attribute="value"] 是一个强大的CSS选择器，允许我们精确地根据元素的某个属性值来定位元素。

新CG儿

数字视觉分享平台 | AE模板_视频素材

147

查看详情

3. 提取显示文本

一旦找到了目标元素 elem，我们可以通过其 innerText 属性获取其包含的文本内容。

var text = elem.innerText;
// 在上述例子中，text 将会是 "Robert"

登录后复制

4. 定位目标显示元素

现在我们需要找到那个需要更新的下拉菜单触发按钮。这个按钮与我们找到的 elem（下拉菜单项）不在同一个父级下，但它们都位于同一个 .dropdown 容器内。我们可以通过以下两步来定位：

向上查找共同父级：使用 elem.closest(".dropdown") 方法，从当前元素 elem 开始，向上遍历DOM树，直到找到第一个匹配 .dropdown 选择器的祖先元素。
向下查找目标子元素：在找到的 .dropdown 父级元素内部，使用 querySelector("[data-bs-toggle=dropdown]") 来查找具有 data-bs-toggle="dropdown" 属性的按钮，这正是我们的目标触发按钮。

var parent = elem.closest(".dropdown"); // 找到最近的 .dropdown 祖先
var button = parent.querySelector("[data-bs-toggle=dropdown]"); // 在该祖先内查找目标按钮

登录后复制

5. 更新目标元素

最后一步是更新目标按钮的文本内容和 data-dselect-text 属性。

更新文本内容：直接修改 button.innerText 属性。
更新自定义属性：使用 button.setAttribute('attribute-name', 'new-value') 方法来设置或更新元素的属性。

button.innerText = text; // 将按钮的显示文本更新为 "Robert"
button.setAttribute('data-dselect-text', text); // 将 data-dselect-text 属性更新为 "Robert"

登录后复制

完整代码示例

将以上步骤整合到 myFunc 函数中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Dropdown Update</title>
    <!-- 引入 Bootstrap CSS，如果您的项目使用了它 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 示例中隐藏了原始select，但保留了自定义下拉菜单的样式 */
        .select { display: none; } /* 隐藏原始 select */
        .dropdown-menu { display: block; position: static; } /* 为了示例方便，让菜单项始终可见 */
        .dselect-items { max-height: 150px; overflow-y: auto; }
    </style>
</head>
<body>

<select name="client" class="select form-select" id="id_client">
  <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">
        <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>

<p style="margin-top: 20px;">点击下面的按钮来选择客户：</p>
<button onclick="myFunc(this.id)" id="1106" class="btn btn-primary">Select client (1106)</button>
<button onclick="myFunc(this.id)" id="1105" class="btn btn-secondary">Select client (1105)</button>

<script>
function myFunc(clicked_id) {
    // 1. 根据传入的ID查找对应的下拉菜单项
    var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');

    // 2. 检查元素是否存在，避免空指针错误
    if (!elem) {
        console.warn('未找到匹配 data-dselect-value="' + clicked_id + '" 的元素。');
        return;
    }

    // 3. 提取该菜单项的文本
    var text = elem.innerText;

    // 4. 向上查找最近的 .dropdown 父级容器
    var parent = elem.closest(".dropdown");

    // 5. 检查父级容器是否存在
    if (!parent) {
        console.warn('未找到 .dropdown 父级容器。');
        return;
    }

    // 6. 在父级容器内查找目标触发按钮
    var button = parent.querySelector("[data-bs-toggle=dropdown]");

    // 7. 检查目标按钮是否存在
    if (!button) {
        console.warn('未找到 data-bs-toggle="dropdown" 的按钮。');
        return;
    }

    // 8. 更新目标按钮的文本和自定义属性
    button.innerText = text;
    button.setAttribute('data-dselect-text', text);
}

// 示例中 dselectUpdate 和 dselectSearch 函数未提供，这里仅为示意
function dselectUpdate(item, wrapperClass, buttonClass) {
    console.log('dselectUpdate called for:', item.innerText);
    myFunc(item.dataset.dselectValue); // 模拟更新
}
function dselectSearch(event, input, wrapperClass, buttonClass, allowNew) {
    console.log('dselectSearch called with:', input.value);
}
</script>

</body>
</html>

登录后复制

核心DOM API解析

document.querySelector(selector): 返回文档中与指定选择器或选择器组匹配的第一个元素。如果找不到匹配项，则返回 null。
Element.innerText: 获取或设置元素的文本内容，它会考虑样式并返回用户实际看到的文本。
Element.closest(selector): 返回与选择器匹配的最近的祖先元素（包括元素本身，如果匹配）。如果当前元素或其祖先中没有元素与选择器匹配，则返回 null。
Element.setAttribute(name, value): 给当前元素设置一个新的属性或改变现有属性的值。

注意事项与最佳实践

错误处理：在实际应用中，务必对 document.querySelector 和 Element.closest 的结果进行检查（即判断是否为 null）。如果找不到目标元素，应避免尝试访问其属性，以防止运行时错误。上述完整代码示例已加入了基本的错误检查。
性能优化：对于频繁触发的DOM操作，可以考虑缓存常用的DOM元素引用，避免重复查询。然而，对于这种用户交互触发的单次更新，当前方案的性能已足够。
可维护性：将DOM操作逻辑封装在独立的函数中，可以提高代码的可读性和可维护性。
事件委托：如果下拉菜单项是动态添加的，可以使用事件委托来处理点击事件，而不是为每个项单独绑定 onclick 属性。
自定义属性的命名：使用 data-* 前缀的自定义属性是HTML5规范推荐的做法，它允许开发者在HTML中存储额外的数据，而不会影响文档的有效性。

总结

通过本教程，我们学习了如何利用JavaScript强大的DOM操作能力，根据自定义属性值动态查找元素、提取信息并更新页面上的其他元素。掌握 querySelector、closest 和 setAttribute 等核心API，是实现复杂、交互式Web界面的基础。这种模式在处理自定义下拉菜单、标签页切换、数据筛选等多种场景中都非常有用，能够显著提升用户体验和界面的动态响应能力。

以上就是JavaScript DOM操作：根据自定义属性值动态更新UI元素的详细内容，更多请关注php中文网其它相关文章！