根据元素类型或类名查找前一个DOM元素

Javascript - Finding previous DOM element by element type or class name

本文关键字：元素 一个 DOM 查找 类型      更新时间：2023-09-26

请注意:我正在寻找一个Javascript唯一的解决方案，jQuery不会有帮助，因为我不能使用它与给定的应用程序，我正在工作

我的DOM中有以下HTML:

<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
    <div class="mktoOffset" style="width: 10px;"></div>
    <div class="mktoFieldWrap">
        <label for="Agency__c" class="mktoLabel mktoHasWidth" style="width: 100px;">
            <div class="mktoAsterix">*</div>Agency:</label>
        <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
        <div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;">
            <input name="Agency__c" id="Agency__c" type="checkbox" value="yes" class="mktoField">
            <label for="Agency__c"></label>
        </div>
        <div class="mktoClear"></div>
    </div>
    <div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>

我想使用Javascript来瞄准第一个标签(在这个例子中，有for="Agency__c"的那个)，每当div与mktoCheckboxList类存在时。

这是到目前为止，我已经能够在Javascript中找出，但我在一个损失。我的思维过程是通过label的元素类型或mktoLabel的类型来定位mktoCheckboxList之前的前一个元素。

var checkboxes = document.getElementsByClassName('mktoCheckboxList');
var count = checkboxes.length;
for (i = 0; i < count; i++) {
    console.log(checkboxes[i].previousElementSibling);
}

此解决方案需要与实际的名称值无关，因为我希望每当出现不知道其属性的复选框时都能正常工作，因此使用类/元素。

这是我的jsfiddle: http://jsfiddle.net/darcyvoutt/1y9s00k7/

document.querySelector现在被所有主流浏览器支持(参见我可以使用)。

document.querySelector(".mktoCheckboxList label")

将选择在.mktoFieldDescriptor中找到的第一个标签。

你也可以在元素上这样做:

parent.querySelector("label");

如果你需要检查一个div是否包含一个特定的元素，然后再检索另一个，你可以这样做:

querySelectorAll(".mktoFieldDescriptor").filter(function(container){
   // Remove the containers that do not contain .mktoCheckboxList.
   return !!container.querySelector(".mktoCheckboxList");
}).map(function(container){
   // Get the first label.
   return container.querySelector("label")
}).forEach(function(label){
   // Do your label stuff.
});

一个可能的解决方案是:

var checkboxes = document.getElementsByClassName('mktoCheckboxList');
var count = checkboxes.length;
for (i = 0; i < count; i++) {
    console.log(checkboxes[i].parentNode.querySelector('label'));
}

请注意，此解决方案只适用于当您在与标签相同的div中有单个.mktoCheckboxList元素时。

小提琴

这里有一个可能的方法:

用它的标签绑定每个输入。然后查找需要处理的输入，并通过

获取标签元素。
// Scan the page for labels:
var labels = document.getElementsByTagName('LABEL');
// Find the corresponding input:
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         // Assign a reference to the label from the actual form element:
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

完成后，您可以轻松地执行:

// Lookup all inputs:
var inputs = document.getElementsByTagName("input");
for (var i = 0, max = inputs.length; i < max; i++){
    // Act only on checkboxes:
    if (inputs[i].type === 'checkbox')
        console.log(inputs[i]); // Look! It's the label!
}

使用此方法，您只使用标签名称input和类型checkbox来定位您的标签。

您可以使用document.evaluate并通过XPath寻址您想要的标签。测试:

//div[contains(@class, 'mktoCheckboxList')]/preceding::label[1]
相关文章：