如何使用 Javasript 在沒有 htmlFor 的情況下獲得標簽？

Question

我有一個在 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]);
}

這讓我得到一個包含 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>

Answer 1

您可以改用querySelectorAll 。

 _labels = document.querySelectorAll("label"); _labels.forEach(function(e) { console.log(e) });

 <input type="text" id="tet"> <label For="tet">test</label> <label>testa</label> <label class="control-label">Zip Code * </label>

Answer 2

沒有 htmlFor 屬性。 您應該在輸入的標簽元素上放置一個 'for' 屬性。 瀏覽器和輔助技術然后將標簽與輸入相關聯。

例如，您可以點擊單選按鈕的標簽來切換檢查狀態。

但聽起來您需要一個 CSS 選擇器。 所以使用屬性選擇器語法：

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

Answer 3

感謝@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 作為目標

Answer 4

問題可能是您定位的表單元素/標簽是在其他元素之后加載的。 為了確定是否是這種情況，您可以嘗試以下操作：

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

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

如果額外的標簽出現在setTimeout ，那么您就會知道該標簽是在其他標簽之后加載的。

將代碼放入setTimeout並不是一個好的長期解決方案。 問題是您不知道何時添加元素。 因此，您要么等待太長時間來運行代碼，要么等待時間不夠長。

另一種方法是使用類似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。