Почему эта функция перестает работать с другими методами «get element», кроме getElementsByTagName?

Question

Я пытаюсь адаптировать шаги формы JS для себя: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps

Есть функция, которая проверяет это:

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }

Но я хочу этоработать только для определенного поля, поэтому я добавил идентификатор для ввода и изменил код на:

      y = x[currentTab].getElementById("test");

Но затем он перестает работать, и консоль показывает, что x [currentTab] не является функцией. Пожалуйста, объясните мне, почему эта функция работает с y = x[currentTab].getElementsByTagName("input");, но останавливается, если я изменяю ее на ID, класс или имя.

Answer 1

Это потому, что getElementById возвращает единственный элемент вместо NodeList. Поэтому y[i] больше не работает. Вы можете удалить всю часть цикла, потому что есть только один.

function validateForm() {
  // This function deals with validation of the form fields
  let valid = true;
  const tabs = document.getElementsByClassName("tab"); // Do you need this?
  const input = document.getElementById("test");
  // A loop that checks every input field in the current tab:
  if (input.value == "") {
    // add an "invalid" class to the field:
    input.className += " invalid";
    // and set the current valid status to false
    valid = false;
  }

  // ...
}

Следует отметить, что идентификатор элемента должен быть уникальным для всего документа , поэтому выбор по идентификатору в пределах определенного родительского элементане имеет особого смысла. Если каждая вкладка имеет элемент с идентификатором test, HTML-код недействителен. Вы по-прежнему можете выбрать один элемент с помощью имя класса и указать что-то вроде tabs[currentTab].querySelector('.test');.