Поиск элемента по id

Элемент может быть найден в документе по его id.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Поиск по id</title>

<script type="text/javascript">

function ShowDetails() {

var elem = document.getElementById('details');

elem.style.display = 'block';

}

</script>

</head>

<body>

<p>

Нажмите кнопку для просмотра подробностей</p>

<button type="button" onclick="ShowDetails()">

Подробности

</button>

<div id="details" style="display: none">

Здесь описаны все подробности.

</div>

</body>

</html>

В этом примере метод объекта document (HTML-документ) getElementById ищет элемент, атрибут id которого равен указанному (в данном примере "details"); строчные и заглавные буквы в значении атрибута различаются.

Internet Explorer предлагает более простой доступ к элементу по его id. Достаточно просто указать id элемента.

function ShowDetails() {

details.style.display = 'block';

}

Следует иметь в виду, что такой подход не является стандартным и не гарантирует обнаружение элемента в других браузерах. Использование DOM метода getElementById гарантирует работу в большинстве браузеров. Предполагается, что id задает уникальный в пределах документа идентификатор элемента.

Поиск групп элементов

DOM-метод getElementsByTagName ищет элементы по имени HTML-тэга в пределах элемента, в контексте которого выполняется метод.

// коллекция таблиц в документе

var oTables = document.body.getElementsByTagName('table');

document.write("В документе " + oTables.length + " таблиц");

// коллекция ячеек первой таблицы

var oCells = oTables[0].getElementsByTagName('td');

DOM-метод getElementsByName ищет элементы в документе по значению атрибута name

(атрибут name поддерживают управляющие элементы HTML-формы).

<form method="post" action="form.php">

<input type="text" name="UserName" />

<input type="radio" name="Age" value="1" />18 – 24

<input type="radio" name="Age" value="2" />25 – 35

<input type="radio" name="Age" value="3" />36 – 55

</form>

...

//все элементы переключателя

var oAge = document.getElementsByName('Age');

// текстовое поле UserName

var oUserName = document.getElementsByName('UserName')[0];

// даже если найден единственный объект,

// он является элементом массива

// Тот же результат во всех браузерах:

var oForm = document.forms[0];

var oAge = oForm.Age; // массив элементов

var oUserName = oForm.UserName; //единственный элемент

Замечание: Методы getElementById, getElementsByName и getElementsByTagName доступны только после полной загрузки документа. Например, следующий код не работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

document.getElementById('MyDiv').innerHTML = "Hello";

</script>

</head>

<body>

<div id="MyDiv">

</div>

</body>

</html>