Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
DOM - Объектная модель документа getElementsByTagName - Отбор по тегу getElementById - Выбор по id

Метод getElementsByTagName - Отбор элементов по имени тега - Строка вызова скрипта

JavaScript - Практическое применение

Урок №3 getElementsByTagName - Отбор по тегу

Количество просмотров: 429

Для изучения javascript на практике желательно иметь какой-нибудь тестовый сайт на Вашем локальном сервере.

Для начала рассмотрим метод getElementsByTagName, который позволяет отбирать отдельные элементы веб-страниц.

Забегая вперед: многое из того, что позволяет сделать javascript при работе с элементами веб-страниц, можно сделать проще и быстрее при помощи jQuery. Но это уже тема другого курса...

Организация работы с javascript - Отдельный js-файл

Организация работы с javascript - Отдельный js-файл

Для организации работы с javascript на локальном сайте создается отдельная папка с js-файлом/ами, в котором хранятся все скрипты.

К html-документу, в котором проводится работа со скриптами, подключаются js-файлы следующим образом.

<html>
<head>
<title>Отдельный js-файл</title>
<script src="js/myscripts.js" type="text/javascript"> </script>
</head>
<body>
.
.
.
</body>
</html>

Во время загрузки страницы код из js-файла подставляется между тегами <script> и </script>, как мы и делали в примерах на протяжении этого курса.

<html>
<head>
<title>Отдельный js-файл</title>
<script src="js/myscripts.js" type="text/javascript">
.
.
.
.
.
</script>
</head>

Далее начинается работа с методами javascript применительно к элементам (тегам) веб-страниц.

Метод getElementsByTagName - Отбор элементов по имени тега - Строка вызова скрипта

Метод getElementsByTagName - Отбор элементов по имени тега - Строка вызова скрипта

Метод getElementsByTagName является методом объекта document.

Название метода говорит само за себя и переводится буквально: получить все элементы по имени тега.

Например, можно отобрать для работы все абзацы <p> или теги <div> веб-страницы. Или же все изображения - теги <img>. И дальше что-то с ними делать средствами javascript.

Метод getElementsByTagName в результате своей работы возвращает массив из указанных элементов.

Обратите внимание: в имени метода в конце слова Elements стоит буква s, то есть, как правило, метод служит для отбора именно группы элементов.

Например, запись ниже занесет в переменную all_img массив из всех изображений веб-страницы. Число изображений, то есть длину массива, мы сможем получить при помощи свойства length и вывести на экран методом alert.

var all_img = document.getElementsByTagName("img");

alert(all_img.length); /* Выводим число изображений */

Однако в окне, вызванным методом alert, я увидел цифру 0.

Но почему? Ведь на странице есть изображения?

Дело в том, что строка вызова скрипта расположена в начале html-документа.

<script src="js/myscripts.js" type="text/javascript"> </script>

В этом случае при построении DOM-дерева, браузер в первую очередь выполняет js-скрипт, а потом находит теги <img>.

Чтобы метод getElementsByTagName нашел все указанные теги на странице, необходимо строку вызова скрипта:

<script src="js/myscripts.js" type="text/javascript"> </script>

поместить в конец документа - перед закрытием тега </body>:

<html>
<head>
<title>Строка вызова скрипта - в конце документа</title>
</head>
<body>
.
.
.
<script src="js/myscripts.js" type="text/javascript"> </script>
</body>
</html>

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

Об этом следует помнить. Если в работе с javascript нужно отобрать/«вытащить» какие-либо теги, то строку вызова скрипта следует размещать в конце html-документа.

В jQuery есть возможность не переносить строку вызова скрипта в конец документа. К этому мы еще вернемся...

Главная Изучаем JavaScript getElementsByTagName - Отбор по тегу getElementById - Выбор по id

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru