Javascript—按元素类型或类名查找以前的DOM元素

请注意：我正在寻找一个纯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>

这个解决方案需要不知道实际的名称值，因为我希望在不知道其属性的情况下，每当出现复选框时，这个方法都能起作用，从而使用类/元素

下面是我的JSFIDLE:

现在受到所有主流浏览器的支持（）

将选择在

.mktoFieldDescriptor

中找到的第一个标签

也可以在元素上执行此操作：

parent.querySelector("label");

如果在检索另一个div之前需要检查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.
});

现在所有主流浏览器都支持（）

将选择在

.mktoFieldDescriptor

中找到的第一个标签

也可以在元素上执行此操作：

parent.querySelector("label");

如果在检索另一个div之前需要检查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'));
}

var checkbox=document.getElementsByClassName（'mktocheckbox列表'）；
变量计数=复选框。长度；
对于（i=0；i

请注意，只有在标签所在的同一div中有一个

.mktoCheckboxList

元素时，此解决方案才有效

---

一种可能的解决方案是：

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

var checkbox=document.getElementsByClassName（'mktocheckbox列表'）；
变量计数=复选框。长度；
对于（i=0；i

请注意，只有在标签所在的同一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];         
    }
}

//扫描页面以查找标签：
var labels=document.getElementsByTagName（'LABEL'）；
//查找相应的输入：
对于（变量i=0；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!
}

//查找所有输入：
var inputs=document.getElementsByTagName（“输入”）；
对于（变量i=0，max=inputs.length；i

---

使用此方法，您只需使用标签名

输入

并键入

复选框

，即可找到标签。

以下是一种可能的方法：

用它的标签绑定每个输入。然后查找需要使用的输入，并通过以下方式获得标签元素：

// 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];         
    }
}

//扫描页面以查找标签：
var labels=document.getElementsByTagName（'LABEL'）；
//查找相应的输入：
对于（变量i=0；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!
}

//查找所有输入：
var inputs=document.getElementsByTagName（“输入”）；
对于（变量i=0，max=inputs.length；i

---

使用此方法，您只需使用标记名

输入

并键入

复选框

，即可定位标签。

您可以使用

文档。评估

并通过XPath寻址所需的标签。未经测试：

//div[contains(@class, 'mktoCheckboxList')]/preceding::label[1]

---

您可以使用

document.evaluate

并通过XPath寻址所需的标签。未经测试：

//div[contains(@class, 'mktoCheckboxList')]/preceding::label[1]

---

请注意，

Agency\uu c

有两个标签。其中一个是空的，这至少有点奇怪。请注意，

Agency\uuuu c

有两个标签。其中一个是空的，这至少有点奇怪。非常接近一个可行的解决方案，但我必须添加.parentNode才能使其工作。谢谢非常接近一个可行的解决方案，但我必须添加.parentNode才能使其生效。谢谢您可以使用querySelector（'selector'）代替querySelectorAll（'selector:first child'）。您可以使用querySelector（'selector'）代替querySelectorAll（'selector:first child'）