时间戳

首页 > 解决方案 > 如何使用 Javasript 在没有 htmlFor 的情况下获取标签？

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

问题描述

我有一个在 iFrame 中加载帮助台表单的网站。10 个输入有 10 个标签。其中 8 个有一个 htmlFor 和一个“控制标签”类。其中一个有一个没有类名的 htmlFor。一个类名为“控制标签”，没有 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]);
}

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

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

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

我需要得到最后一个标签，但是当我运行 document.getElementsByX 时，它会得到一个 HTML 集合而不是一个数组。如何返回所有标签的数组，而不是 HTML 集合，以便我可以定位此标签？

这是 HTML 中的确切代码行：

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

标签： javascripthtml

解决方案

问题可能是您所定位的表单元素/标签是在其他元素之后加载的。为了确定是否是这种情况，您可以尝试以下操作：

const labels = document.getElementsByTagName('label')
console.log("before", labels)

setTimeout(() => {
  const labels = document.getElementsByTagName('label')
  console.log("after", labels)
}, 1000)

如果额外的标签出现在 中setTimeout，那么您将知道该标签是在其他标签之后加载的。

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

另一种方法是使用MutationObserver 之类的东西。您可以使用它在表单的 DOM 更改时触发事件，然后查找您的标签。此代码未经测试，但类似这样的东西可能有效：

const targetNode = document.getElementById('your-form-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    const labels = targetNode.querySelectorAll('label')

    // look for your label with a missing for attribute
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

如果问题是在您运行代码时您的页面没有完全加载，您可以等到页面的 DOM 加载后运行您的代码：

window.addEventListener('DOMContentLoaded', () => {
  const labels = document.getElementsByTagName('label')
  console.log(labels)
});

如果元素仍未显示，请尝试侦听load事件而不是DOMContentLoaded.

无论哪种情况，您都应确保在加载文档时您的标签始终可用。如果在加载文档后第三方代码正在创建元素，则等待load或DOMContentLoaded将无法可靠地工作。您可能想要使用 MutationObserver。

推荐阅读