Javascript 如何在没有htmlFor的情况下使用Javasript获取标签？

我有一个网站正在iFrame中加载帮助台表单。10个输入有10个标签。其中8个具有htmlFor和一类“控制标签”。其中一个有一个没有类名的htmlFor。其中一个类名为“control label”，没有htmlFor

我需要使用JavaScript获取最后一个标签并添加一个htmlFor。但是，我抓不住它

var labels = document.getElementsByTagName('label') 

这将返回一个包含9个标签的HTML集合，所有标签都具有htmlFor。它不包括没有htmlFor的第10个标签。但是，如果我运行：

console.log('Labels: ', labels); 

这将显示一个包含10个标签的列表，但当我尝试以第10个标签为目标时，它将返回为未定义

var controlLabels = document.getElementsByClassName('control-label') 

这将返回一个包含8个标签的HTML集合，所有标签都具有htmlFor。它不包括没有htmlFor的第9个标签

var labels = [];
for (var i = 0; i < document.getElementsByTagName.length; i++) {
    labels.push(document.getElementsByTagName[i]);
}

var controlLabels = [];
for (var i = 0; i < document.getElementsByClassName('control-label').length; i++) {
    controlLabels.push(document.getElementsByClassName('control-label')[i]);
}

var标签=[]；
对于（var i=0；i

这让我得到了一个包含9个对象的数组，但同样，不是没有htmlFor的标签

var labels = [];
for (var i = 0; i < document.getElementsByTagName.length; i++) {
    labels.push(document.getElementsByTagName[i]);
}

var controlLabels = [];
for (var i = 0; i < document.getElementsByClassName('control-label').length; i++) {
    controlLabels.push(document.getElementsByClassName('control-label')[i]);
}

var-controlLabels=[]；
对于（var i=0；i

这让我得到了一个包含8个标签的数组，同样没有缺少htmlFor的标签

var labels = [];
for (var i = 0; i < document.getElementsByTagName.length; i++) {
    labels.push(document.getElementsByTagName[i]);
}

var controlLabels = [];
for (var i = 0; i < document.getElementsByClassName('control-label').length; i++) {
    controlLabels.push(document.getElementsByClassName('control-label')[i]);
}

我需要获取最后一个标签，但当我运行document.getElementsByX时，它会获取一个HTML集合而不是数组。如何返回一个包含所有标签的数组，而不是一个HTML集合，以便以该标签为目标

这正是HTML中的代码行：

<label class="control-label">Zip Code * </label>

邮政编码*

---

您可以使用

querySelectorAll

\u labels=document.queryselectoral（“标签”）；
_标签.forEach（函数（e）{
控制台日志（e）
});

测试
种皮
邮政编码*没有htmlFor属性。您应该在输入的标签元素上放置一个“for”属性。然后，浏览器和辅助技术将标签与输入关联

例如，您可以点击单选按钮的标签以切换检查状态

但听起来你需要一个CSS选择器。因此，请使用属性选择器语法：

document.querySelector("[for='your-input-id']")

感谢@Cully提供的这个提示

function myFunction() {
    var labels = document.getElementsByTagName('label');
    var label = labels[labels.length -1];
    label.htmlFor = "id_zipcode";
}

$(document).ready(function() {
    setTimeout(myFunction, 1000);
});

添加超时将允许第三方JavaScript完成HTML的生成，并为我提供一个标签，我可以使用getElementsByTagName将其作为目标。问题可能是，您所针对的表单元素/标签是在其他元素之后加载的。为了确定情况是否如此，您可以尝试以下方法：

const labels=document.getElementsByTagName（'label'））
console.log（“之前”，标签）
设置超时（（）=>{
const labels=document.getElementsByTagName（'label'））
console.log（“之后”，标签）
}, 1000)

如果额外标签显示在
设置超时中，则您将知道该标签是在其他标签之后加载的

仅仅将代码放入
setTimeout
并不是一个好的长期解决方案。问题是您不知道何时添加元素。因此，您要么等待太长时间来运行代码，要么等待时间不够

另一种方法是使用类似于。您可以使用它在表单的DOM更改时触发事件，然后查找标签。此代码未经测试，但类似的代码可能会起作用：

const targetNode=document.getElementById（'your-form-id'）；
//观察者选项（要观察哪些突变）
const config={attributes:true，childList:true，subtree:true}；
//观察到突变时执行的回调函数
常量回调=函数（mutationsList，observer）{
const labels=targetNode.querySelectorAll（'label'））
//查找缺少for属性的标签
};
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（回调）；
//开始观察目标节点是否存在已配置的突变
observer.observe（targetNode，config）；

如果问题是在运行代码时页面尚未完全加载，则可以等到页面的DOM加载后再运行代码：

window.addEventListener（'DOMContentLoaded'，（）=>{
const labels=document.getElementsByTagName（'label'））
console.log（标签）
});

如果元素仍然没有显示，请尝试侦听
load
事件，而不是
domcontentload

无论哪种情况，您都应该确保在加载文档时标签始终可用。如果第三方代码在加载文档后创建元素，则等待
load
或
domcontentload
将无法可靠地工作。您可能希望使用一个MutationObserver。
这将返回一个包含9个对象的节点列表，这些对象都是标签，除了一个没有htmlFor的对象。@JasonBoyce作为一个测试，您可以从HTML中去掉标签，然后在代码段或fiddle中运行它吗？我创建了一个JSFIDLE，其中只有两个标签，一个有htmlFor，另一个没有，getElementsByTagName同时抓取了这两个，并允许我抓取一个没有htmlFor的页面，所以我不知道我正在处理的页面发生了什么。我怀疑这可能与它在页面加载时从JavaScript生成HTML有关。
htmlFor
是在JS中访问
for
属性的方式，因为
for
在JS中是一个保留字。例如，
el.htmlFor
（您不能使用
el.for
）同样，OP希望获得没有for属性的元素。但是您使用CSS选择器语法选择元素，而不是访问属性值。同样，这不是一个属性。当在JS中将元素作为变量时，该属性将映射到htmlFor。但是在你的HTML中它是“for”，这就是你在CSS中选择它的方式。是的，没有ID，也没有“for=”“，所以我很难抓住它。它将在我创建文档时显示。getElementsByTagName（'label'），wh