getElementById в JavaScript

Метод getElementById() ищет и возвращает элемент с уникальным идентификатором id, который задаётся в атрибуте тегов id="".

Давайте рассмотрим простой пример использования этого метода:

<!DOCTYPE HTML>
<html>
<head>
	<title>getElementById в JavaScript</title>
</head>

<body>

<p id="p1">Абзац 1.</p>
<p id="p2">Абзац 2.</p>
<p id="p3">Абзац 3.</p>

<script>
var tagIdP2 = document.getElementById('p2');
tagIdP2.style.background = 'red';
</script>

</body>
</html>

Вообще, к элементу можно обращаться напрямую по переменной с именем из значения id, если ему назначен специальный атрибут id. Всё просто:

<!DOCTYPE HTML>
<html>
<head>
	<title>getElementById в JavaScript</title>
</head>

<body>

<p id="p1">Абзац 1.</p>
<p id="p2">Абзац 2.</p>
<p id="p3">Абзац 3.</p>

<script>
// изменим background третьего абзаца:
p3.style.background = 'red';
// ниже аналогичное действие для второго абзаца:
var tagIdP2 = document.getElementById('p2');
tagIdP2.style.background = 'red';
</script>

</body>
</html>

Не стоит обращаться к элементу напрямую, чтобы выполнить такой код, браузеры смешивают пространства имён JS и DOM, а это может привести к конфликтам. Рекомендовано получать доступ к элементу используя метод getElementById().

По стандарту автор документа должен указывать каждому элементу уникальное имя атрибута id="". Но не всегда жизнь соответствует принятым стандартам. Если в документе более 2 тегов с одинаковым значением , то обратиться к какому-то из них можно через коллекцию all объекта document по числовому индексу соответствующему порядковому номеру элемента с неуникальным id="" в документе.

<!DOCTYPE HTML>
<html>
<head>
	<title>Используем коллекцию all объекта document в JavaScript.</title>
</head>

<body>

<p id="p2">Абзац 1.</p>
<p id="p2">Абзац 2.</p>
<p id="p2">Абзац 3.</p>

<script>
document.all.p2[0].style.background = 'red';
document.all.p2[2].style.background = 'green';
</script>

</body>
</html>

Вы лучше поймёте почему синтаксис именно такой, если в код этого примера добавите цикл:

for (krok in document.all) document.write(krok + " : " + document.all[krok] + "
");

Коллекция all содержит все теги документа, и одним из её элементов будет p2 : [object NodeList]. В этом элементе помещены все теги с id="p2" в том порядке, в котором они встречаются в документе. Просто обращаемся по порядковому номеру к нужному нам тегу.

Подробнее про коллекции читайте тут: коллекция объектов JavaScript.