Практическое занятие № 38
Тема: «Работа с элементами страницы в JavaScript»
Цель работы: приобретение навыков получения и использования элементов страницы в JS.
Краткие теоретические основания выполнения задания Работа с innerHTML, outerHTML
В прошлом уроке мы с вами учились считывать и записывать значения атрибутов, а теперь будем делать тоже самое, но уже со внутренним содержимым тегов. Это делается с помощью свойства innerHTML, которое можно считывать и перезаписывать, меняя тем самым содержимое тегов.
В примере ниже у нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML. Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким образом - elem.innerHTML = 'Новый текст' - запишем в него новый текст:
id="test"Текст абзаца.
type="submit" onclick="func()"
//Функция func срабатывает по клику на кнопку input: function func() {
var elem = document.getElementById('test'); //получаем наш абзац elem.innerHTML = '!'; //записываем в него новый текст
}
HTML код станет выглядеть так:
id="test"!
type="submit" onclick="func()"
Можно записывать не только текст, но и теги и они будут работать (в нашем случае текст станет жирным):
id="test"Текст абзаца.
type="submit" onclick="func()" function func() {
var elem = document.getElementById('test'); elem.innerHTML = '!';
}
HTML код станет выглядеть так:
id="test"!
type="submit" onclick="func()"
Кроме свойства innerHTML существует также свойство outerHTML, которое перезаписывает не только внутренний текст тега, но и сам тег. Смотрите пример:
id="test"Текст абзаца.
type="submit" onclick="func()" function func() {
var elem = document.getElementById('test'); elem.outerHTML = '!';
}
HTML код станет выглядеть так:
!
type="submit" onclick="func()"
Как вы видите, наш абзац исчез и заменился на тег b.
Работа с getElementsByTagName
Во всех примерах выше мы с вами работали с методом getElementById, который получал только одно свойство по его атрибуту id. Однако существуют и другие способы получения свойств, к примеру, с помощью метода getElementsByTagName, который получает группу тегов по их имени. Например, можно получить все абзацы p или все заголовки h2.
Учтите только один нюанс - наш метод возвращает не одно свойство, а массив свойств. Получим, к примеру, все абзацы в переменную elems:
Текст абзаца.
Текст абзаца.
Текст абзаца.
type="submit" onclick="func()" function func() {
var elems = document.getElementsByTagName('p');
}
В переменной elems теперь лежит массив свойств, это значит, что elems[0] - это первый абзац,
elems[1] - второй и так далее (нумерация с нуля).
Мы можем убедится в этом, если сделаем так: elems[0].innerHTML = '!' - в этом случае первый абзац сменит свой текст.
Давайте поменяем текст всех трех абзацев:
Текст абзаца.
Текст абзаца.
Текст абзаца.
type="submit" onclick="func()" function func() {
//Получаем массив абзацев в переменную elems: var elems = document.getElementsByTagName('p');
elems[0].innerHTML = '1'; //первому абзацу ставим текст '1' elems[1].innerHTML = '2'; //второму абзацу ставим текст '2' elems[2].innerHTML = '3'; //третьему абзацу ставим текст '3'
}
HTML код станет выглядеть так:
1
2
3
type="submit" onclick="func()"
Учтите, что менять одновременно все свойства как-нибудь так elems.innerHTML = '!' не получится (потому что elems - массив). Необходимо или вручную перебрать все свойства, как это сделано в примере выше, или воспользоваться циклом.
В следующем примере мы сменим содержимое всех абзацев на страницы на '!', воспользовавшись для этого циклом for:
Текст абзаца.
Текст абзаца.
Текст абзаца.
type="submit" onclick="func()" function func() {
var elems = document.getElementsByTagName('p'); for (var i = 0; i
elems[i].innerHTML = '!';
}
}
HTML код станет выглядеть так:
!
!
!
type="submit" onclick="func()"
Обращение к свойствам через свойства document
Некоторые теги страницы можно не получать методами типа getElementById, а обратиться к ним как свойствам объекта document. К примеру, к тегу можно обратиться так: document.body, а к тегу
- вот так: document.head. Такое работает не для всех тегов, а только для избранных.
Учтите, что нельзя получить доступ к тому свойству, которого еще не существует в момент выполнения скрипта. Поэтому, если скрипт находится в , то в нем недоступен document.body.
В следующем примере первый alert выведет null:
HTML
alert(document.body); //null, так как body еще нет
alert(document.body); //body уже есть
3 294
18 193 
