更好的方法来实现这个 vanilla javascript DOM 遍历？答案

【问题标题】：Better way to achieve this vanilla javascript DOM traversal?更好的方法来实现这个 vanilla javascript DOM 遍历？
【发布时间】：2023-03-11 13:05:01
【问题描述】：

我有一些来自 Marketo 的自动生成的表格，这意味着我不得不解决所提供的内容。当有一个只有一个值的复选框时，我需要在父标签中添加一个类（有注释表明是哪一个）。

有问题的复选框可以是任何字段，而不仅仅是“explicitOptin”，所以我不能基于它进行选择（至少最初不是）。我还必须确保不会意外选中具有两个或多个值的复选框。

这是我想出的javascript：

var ckBox = document.querySelector('.mktoCheckboxList .mktoField:only-of-type').parentNode.previousSibling.previousSibling;
if (ckBox.className.indexOf('mktoSingleCheckbox') == -1) {
    ckBox.className += ' mktoSingleCheckbox';
}

<form id="mktoForm_1690" novalidate="novalidate" class="mktoForm mkt*emphasized text*oHasWidth mktoLayoutLeft" data-styles-ready="true">
<div class="mktoFormRow">
    <div class="mktoFormRow">
        <div class="mktoFieldDescriptor mktoFormCol">
            <div class="mktoOffset"></div>
            <div class="mktoFieldWrap">
                <label for="hazmatchooseallthatapply" class="mktoLabel mktoHasWidth">
                    <div class="mktoAsterix">*</div>Hazmat (choose all that apply):</label>
                <div class="mktoGutter mktoHasWidth"></div>
                <div class="mktoLogicalField mktoCheckboxList mktoHasWidth">
                    <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_0" type="checkbox" value="Hazardous Materials" class="mktoField">
                    <label for="mktoCheckbox_9480_0">Hazardous Materials</label>
                    <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_1" type="checkbox" value="Hazardous Waste" class="mktoField">
                    <label for="mktoCheckbox_9480_1">Hazardous Waste</label>
                    <input name="hazmatchooseallthatapply" id="mktoCheckbox_9480_2" type="checkbox" value="Fuel Tanker" class="mktoField">
                    <label for="mktoCheckbox_9480_2">Fuel Tanker</label>
                </div>
                <div class="mktoClear"></div>
            </div>
            <div class="mktoClear"></div>
        </div>
        <div class="mktoClear"></div>
    </div>
    <div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
    <div class="mktoFieldDescriptor mktoFormCol">
        <div class="mktoOffset"></div>
        <div class="mktoFieldWrap">
            <!--This label directly below is the element that needs the new class-->
            <label for="explicitOptin" class="mktoLabel mktoHasWidth mktoSingleCheckbox">
                <div class="mktoAsterix">*</div>Yes, please sign me up to receive information from PrePass by email.</label>
            <div class="mktoGutter mktoHasWidth"></div>
            <div class="mktoLogicalField mktoCheckboxList mktoHasWidth mktoValid">
                <!-- This is the single checkbox input that I am selecting with my javascript -->
                <input name="explicitOptin" id="explicitOptin" type="checkbox" value="yes" class="mktoField">
                <label for="explicitOptin"></label>
            </div>
            <div class="mktoClear"></div>
        </div>
        <div class="mktoClear"></div>
    </div>
    <div class="mktoClear"></div>
</div>

我觉得必须有比将 parentNode 和 previousSibling 方法串在一起更好的方法。

有什么建议吗？我在想一个可能的替代方法是使用我正在使用的 CSS 选择器，然后获取 ID 值和具有该 ID 值的搜索元素。也许只是将 parentNode 和 previousSiblings 串在一起是要走的路...？

【问题讨论】：

这个“选择”应该在什么时候发生？当复选框被选中/取消选中？
此选择发生在表单加载时，因为添加的类将标签定位到我需要它的位置。在这种情况下，选择并不重要。可以在此处找到一个工作示例：go.prepass.com/PP-Application-Dana_Dana-Test-Page.html。基本上，该类只是将标签移动到复选框的右侧。
您可以立即做的一件事是使用ckBox.classList.add('mktoSingleCheckbox') 而不是整个if 语句。有关.classList 的更多信息。
如果是必要的，因为这个脚本是一个更大的表单相关脚本的一部分，每次表单发生某些事情时都会运行。如果我没有，就会一遍又一遍地添加同一个类。但我很感谢你提到这一点！！！
噢噢噢！我跟着你的链接。你说的对。非常感谢@ContinuousLoad !!!!!!

标签： javascript html dom css-selectors dom-traversal

【解决方案1】：

在撰写本文时，您的解决方案似乎是最好的选择，除了使用element.classList 而不是element.className。

可选的重新格式化导致这个（长）单行：

document.querySelector('.mktoCheckboxList .mktoField:only-of-type')
  .parentNode.previousSibling.previousSibling
  .classList.add('mktoSingleCheckbox');

展望未来，浏览器将允许我们使用HTMLInputElement.labels API 来收集与<input> 关联的标签。

#                                                                   WOW!
document.querySelector('.mktoCheckboxList .mktoField:only-of-type').labels[0]
  .classList.add('mktoSingleCheckbox');

不幸的是，目前浏览器对此 API 的支持非常有限，尝试手动获取关联标签可能比您当前的方法更麻烦。

希望这会有所帮助！

【讨论】：