动态展开/折叠Div容器中的子元素：JavaScript教程-html教程-PHP中文网

动态展开/折叠div容器中的子元素：javascript教程

本文旨在解决在使用 JavaScript 动态展开和折叠包含特定子元素的 div 容器时，如何准确识别并操作目标子元素的问题。通常，document.getElementById() 可能会返回错误的元素，特别是当页面中存在多个具有相同 ID 的元素时。本文将介绍如何通过修改 HTML结构或利用 document.getElementsByClassName() 来实现精确控制。

解决子元素选择问题

在动态操作 DOM 元素时，准确选择目标元素至关重要。当页面中存在多个具有相同 ID 的元素时，document.getElementById() 会返回第一个匹配的元素，这可能导致意外的行为。以下提供了两种解决方案：

方案一：使用唯一的ID

问题： HTML 规范要求 ID 在整个文档中是唯一的。如果多个元素具有相同的 ID，浏览器行为可能不一致。

解决方案： 确保每个 team_details div 都有一个唯一的 ID。这可以通过在生成 HTML 时动态生成 ID 来实现，例如 team_details1、team_details2 等。

示例：

HTML:

<div class="event_container" data-index="0">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
<div id="team_details_0" class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br><div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

<div class="event_container" data-index="1">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
<div id="team_details_1" class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br><div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

JavaScript:

function unwrapEventContainer() {
    var coll = document.getElementsByClassName("event_container");
    var i;

    for (i = 0; i <p>在这个示例中，我们使用 data-index 属性存储容器的索引，并在<a style="color:#f60; text-decoration:underline;" title="点击事件" href="https://m.php.cn/zt/39702.html" target="_blank">点击事件</a>中获取该索引，然后使用该索引来构造唯一的 ID，从而正确获取 team_details div。</p><h3>方案二：使用getElementsByClassName</h3><p><strong>优点：</strong>  避免了 ID 冲突的问题，更加灵活。</p><p><strong>解决方案：</strong> 使用 document.getElementsByClassName() 获取所有具有 team_details 类的元素。然后，通过某种方式确定需要操作的元素的索引。一种常见的方法是遍历 event_container 的子元素，找到具有 team_details 类的元素。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="overflowclass">CSS工具箱(专业版)</a>
													<p class="overflowclass">全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p><strong>示例：</strong></p><p>HTML:</p><pre class="brush:php;toolbar:false;"><div class="event_container">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
<div class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br><div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

<div class="event_container">
    <p style="display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
<div class="team_details" style="display: none;">
        <button class="btn_select_large">Create Team</button>
        <button class="btn_select_large">Singleplayer</button>
        <br><div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
        <div style="padding-top: 3px;">
            <div class="team_container">
                <p style="display: inline-block; font-size: 13px;">Team Name</p>
                <button class="btn_join_small">Join ></button>
            </div>
        </div>
    </div>
</div>

JavaScript:

function unwrapEventContainer() {
    var coll = document.getElementsByClassName("event_container");
    var i;

    for (i = 0; i <p>在这个示例中，我们使用 this.querySelector(".team_details") 来查找当前点击的 event_container 中的 team_details 元素。 这确保了我们始终操作正确的子元素。</p><h2>代码优化建议</h2><ol>
<li><p><strong>避免内联事件处理程序：</strong> 尽量避免在 HTML 中使用 onclick 属性。使用 addEventListener 将事件处理程序添加到 JavaScript 中，可以提高代码的可维护性和可读性。</p></li>
<li><p><strong>缓存 DOM 元素：</strong>  在循环中频繁访问 DOM 元素可能会影响性能。将需要多次访问的 DOM 元素缓存到变量中，可以提高效率。</p></li>
<li><p><strong>使用 CSS 类切换样式：</strong>  使用 JavaScript 直接修改元素的样式可能会导致代码冗余。使用 CSS 类来定义不同的样式状态，然后使用 JavaScript 切换这些类，可以使代码更简洁。</p></li>
<li><p><strong>事件委托：</strong> 如果有大量相似的元素需要绑定事件，可以使用事件委托。将事件监听器添加到它们的父元素上，然后通过事件目标来确定哪个元素触发了事件。这可以减少事件监听器的数量，提高性能。</p></li>
</ol><h2>总结</h2><p>通过确保 ID 的唯一性或使用 getElementsByClassName，可以解决动态展开/折叠 div 容器中的子元素时遇到的选择问题。同时，遵循代码优化建议可以提高代码的可维护性和性能。选择哪种方案取决于具体的应用场景和个人偏好。</p>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南