В чем разница между функциями JavaScript getElementById() и getElementsByName()?

Кроме того, что мое краткое исследование говорит мне, что последнее вернет коллекцию, а не один элемент с переданным идентификатором.

Рассмотрим следующий код:

function validateAllFields()
{
var clientid = document.getElementById("clientid");
var programs = document.getElementById("programs");
var startmonth = document.getElementById("startmonth");
var startday = document.getElementById("startday");
var startyear = document.getElementById("startyear");
var completed = document.getElementsByName("completed");
var goals = document.getElementsByName("goals");
var errors = document.getElementById("errorMsg");
errors.innerHTML = "";

if(isNumeric(clientid, errors, "Please enter a valid client ID")){
    if(madeSelection(programs, errors, "Please select a program from the drop-down list")){
        if(madeSelection(startmonth, errors, "Please enter a month for the start date")){
            if(madeSelection(startday, errors, "Please enter a day for the start date")){
                if(madeSelection(startyear, errors, "Please enter a year for the start date")){
                    if(checked(completed, errors, "Please choose an option that indicate whether the client has completed the program")){
                        if(checked(goals, errors, "Please choose an option that indicate whether the client has met his/her goals.")){
                            window.alert("GOT IN TO  RETURN TRUE");
                            return true;
                        }
                    }
                }
            }
        }
    }
}
return false;
}
</script>

Приведенный выше код отлично работает после размещения его в обработчике onsubmit формы. Однако раньше для элементов (программ, startmonth, startday, startyear) я использовал getElementsByName(), произошло следующее:

  • Кажется, что код попадает во вторую строку if if if (madeSelection (programs.... ", и на короткую секунду он отображает сообщение об ошибке через innerHTML и
  • Приступил к отправке формы AS IF, если бы JS действительно вернулась. Как вы можете сказать, перед возвратом true появляется всплывающее предупреждение, и всплывающее окно DID NOT появляется вообще.
  • Плохие данные были отправлены в тестовую базу данных, потому что форма не была проверена. (но для написания серверной проверки с этой формой, но я буду).

предположим, что программы, startmonth, startday , а startyear - выпадающие списки с те же идентификаторы и имена.

Кроме того, функция madeSelection задается как:

function madeSelection(element, error, msg) {
if (element[0].value == "none" || element[0].valueOf == "none" || element[0].value == "") {
    error.innerHTML = msg;
    element.focus();
    return false;
} else {
    return true;
}
}

Мой код работает прямо сейчас после того, как я изменил эти элементы для использования getElementById(), мне просто интересно, почему getElementsByName представил такое поведение.

Ответ 1

Метод GetElementsByName возвращает массив, и когда вы пытались вызвать element.focus(), вы получили ошибку, потому что в массиве нет метода focus. Когда вы получите ошибку в обработчике событий, это не помешает отправке формы.

Если вы используете GetElementById, вы должны использовать element для доступа к элементу, и если вы используете GetElementsByName, вы должны использовать element[0].

Ответ 2

<input type="text" name="foo" id="bar">
                   ^^^^       ^^

getElementsByName получает элементы по своим name, getElementById получает элемент по id. На странице может быть много элементов с тем же name (следовательно, getElementsByName всегда возвращает список элементов), но существует (должен) только один элемент с заданным id (поэтому getElementById возвращает только один элемент).

Ответ 3

Атрибут name не является уникальным, а атрибут id.

<div name="nonUnique" />
<div id="unique" />

Ответ 4

Чтобы форма не была отправлена, нужно вернуть значение false (вы сказали, что используете обработчик onsubmit)

во второй строке вашего кода, потому что выбор действительно возвращается getElementsByName (он будет работать с .getElementsByName( "test" ) [0]), возникает ошибка js. Остальная часть кода не выполняется, поэтому ничего не возвращается, и форма полностью завершает оставшуюся часть проверки.

Ответ 5

Метод getElementById может иметь доступ только к одному элементу за раз, и это элемент с указанным вами идентификатором. Метод getElementsByName отличается. Он собирает массив элементов, которые имеют указанное вами имя. Вы получаете доступ к отдельным элементам, используя индекс, начинающийся с 0.

getElementById

введите описание изображения здесь

  • Он получит только один элемент для вас.
  • Этот элемент содержит идентификатор, указанный вами в круглых скобках getElementById().

getElementsByName

введите описание изображения здесь

  • Он получит набор элементов, имена которых одинаковы.
  • Каждый элемент индексируется числом, начинающимся с 0, как массив
  • Вы указываете, к какому элементу вы хотите получить доступ, поместив его номер индекса в квадратные скобки в синтаксисе getElementsByName ниже.

function test() {
  var str = document.getElementById("a").value;
  console.log(str);

  var str1 = document.getElementsByName("a")[0].value;
  console.log(str1);
  var str2 = document.getElementsByName("a")[1].value;
  console.log(str2);
}
<input type="text" id="a" value="aValue" />
<br>
<br>
<input type="text" name="a" value="bValue" />
<br>
<br>
<input type="text" name="a" value="cValue" />
<br>
<br>
<button onclick="test()">Click Here</button>

Ответ 6

Чтобы немного расширить ответы на уже предоставленные ответы, атрибут имени был предоставлен в начале дней DOM браузера, чтобы содержимое элементов в формах было отправлено со ссылкой на этот атрибут имени, чтобы параметры могли быть передается в CGI script со стороны сервера. Это датируется более современной способностью ссылаться на элементы DOM для манипулирования такими вещами, как стили JavaScript.

Когда DOM был расширен, чтобы позволить современные манипуляции, атрибут id был добавлен, так что отдельные элементы можно было манипулировать по желанию. Когда вы хотите выполнять манипуляции с DOM, вы выбираете элементы, которые нужно манипулировать либо с помощью атрибута id, если вас интересует только управление одним элементом DOM, либо с помощью атрибута класса (подходящим образом установленного вами самим), если вы хотите манипулировать несколько элементов вместе. В этом последнем случае вы можете установить атрибут класса на несколько значений (строки имен, разделенные пробелами), чтобы вы могли, например, обозначать элементы, принадлежащие более чем одному классу, и соответственно выполнять манипуляции. Вы можете смешивать и сопоставлять атрибуты id и class практически по своему усмотрению, если вы проявляете некоторую осторожность, чтобы избежать конфликтов имен.

Итак, например, у вас может быть пять кнопок на вашей веб-странице, каждая из которых настроена на:

class= "Set1"

и измените стиль всех этих кнопок, сначала используя оператор, например:

myButtons = document.getElementsByClassName("Set1");

чтобы получить массив объектов Element, соответствующих вашим кнопкам, а затем запустить следующий цикл:

for (i=0; i<myButtons.length; i++)
    myButtons[i].style.color="#FF0000";

чтобы изменить цвет текста на красный. Одна из этих кнопок может дополнительно иметь атрибут id, установленный на "Special", и вы могли бы сделать что-то вроде:

ref = document.getElementById("Special");
ref.style.backgroundColor = "#FFFF00";

чтобы установить цвет фона этой одной кнопки в наборе на желтый, чтобы сигнализировать, что он предназначен для специальной функции внутри набора.

Короче говоря, используйте атрибут name для представлений форм, а также атрибуты id и class для ссылки на элементы, которые вы намереваетесь выполнять DOM-манипуляции, или присоединить обработчики событий к и т.д.