Объектная модель документа. Доступ к элементам web-страницы
Цель работы
Познакомиться с Document Object Model (DOM); изучить способы доступа к элементам web-страницы; изучить основные свойства DOM-элементов: tagName, style, innerHTML, className.
Задания
Задание 1
Вывести на экран все тэги и их номера в коллекции all своей первой web-страницы.
Решение
Java Script
let collection = document.all
for(let i = 0; i < collection.length; i++){
document.write("Тег/Номер: " + collection[i].tagName
+ '/' + collection[i].nodeType
+ '<br>')
}
Тег/Номер: HTML/1 Тег/Номер: HEAD/1 Тег/Номер: META/1 Тег/Номер: META/1 Тег/Номер: TITLE/1 Тег/Номер: BODY/1 Тег/Номер: H1/1 Тег/Номер: A/1 Тег/Номер: SPAN/1 Тег/Номер: H2/1 Тег/Номер: P/1 Тег/Номер: H3/1 Тег/Номер: FONT/1 Тег/Номер: DIV/1 Тег/Номер: SPAN/1 Тег/Номер: P/1 Тег/Номер: P/1 Тег/Номер: H3/1 Тег/Номер: DIV/1 Тег/Номер: SPAN/1 Тег/Номер: P/1 Тег/Номер: P/1 Тег/Номер: H3/1 Тег/Номер: DIV/1 Тег/Номер: SPAN/1 Тег/Номер: P/1 Тег/Номер: BR/1 Тег/Номер: DIV/1 Тег/Номер: H2/1 Тег/Номер: OL/1 Тег/Номер: LI/1 Тег/Номер: UL/1 Тег/Номер: LI/1 Тег/Номер: LI/1 Тег/Номер: LI/1 Тег/Номер: UL/1 Тег/Номер: LI/1 Тег/Номер: LI/1 Тег/Номер: LI/1 Тег/Номер: LI/1 Тег/Номер: UL/1 Тег/Номер: LI/1 Тег/Номер: LI/1 Тег/Номер: DIV/1 Тег/Номер: H2/1 Тег/Номер: TABLE/1 Тег/Номер: CAPTION/1 Тег/Номер: TBODY/1 Тег/Номер: TR/1 Тег/Номер: TH/1 Тег/Номер: TD/1 Тег/Номер: A/1 Тег/Номер: TR/1 Тег/Номер: TH/1 Тег/Номер: P/1 Тег/Номер: TD/1 Тег/Номер: TR/1 Тег/Номер: TH/1 Тег/Номер: TH/1 Тег/Номер: TH/1 Тег/Номер: TH/1 Тег/Номер: TR/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TR/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TR/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TR/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TR/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: TD/1 Тег/Номер: SCRIPT/1
Задание 2
Вывести все дочерние элементы узла document.body своей первой web-страницы.
Решение
Java Script
let docElem = document.body.childNodes
for(let i = 0; i < docElem.length; i++){
document.write("Дочерний элемент: " + (docElem[i].tagName || 'TEXT')
+ '<br>Номер: ' + docElem[i].nodeType)
}
Задание 3
Вывести в окно содержимое первого элемента span:
- используя для доступа к элементу коллекцию all;
- используя частную коллекцию (span);
- используя идентификатор элемента.
- используя для доступа к элементу коллекцию all;
- используя частную коллекцию (span);
- используя идентификатор элемента.
Решение
Java Script
// через коллекцию all
let collection = document.all
for(let i = 0; i < collection.length; i++){
if(collection[i].tagName == "SPAN"){
document.write(collection[i].innerHTML)
break
}
}
// через частную коллекцию span
collection = document.getElementsByTagName('span')
document.write(collection[0].innerHTML)
// через идентификатор элемента
let firstSpan = document.getElementById('firstSpan')
document.write(firstSpan.innerHTML)
Задание 4
Организовать доступ к содержимому таблицы и посчитать свой средний балл. Добавить значение среднего балла к одержимому второго элемента span.
Решение
Java Script
// получаем доступ к содержимому любого элемента таблицы
// например к какой-нибудь ячейке:
let td = document.getElementsByTagName('td')[2]
td.innerHTML = "..."
// рассчитаем средний балл(в таблце ячейки с оценками отмечены классом 'mark')
let marks = document.querySelectorAll('.mark')
let average = 0;
for(let i = 0; i < marks.length; i++){
average += Number.parseInt(marks[i].innerHTML)
}
let result = (average / marks.length)
let span = document.getElementsByTagName('span')[1]
span.innerHTML += ' Средний балл: ' + result
ФИО | Иванов Иван Иванович | ||
---|---|---|---|
Свое фото |
Адрес: ул. Белорусская, д.5, ком. 430 | ||
1 семестр 2016/2017 уч. года | Дата | Предмет | Оценка |
31.12.2016 | ОАиП | 6 | |
5.01.2017 | Физика | 9 | |
11.01.2017 | ОИТ | 4 | |
16.01.2017 | Математика | 6 | |
22.01.2017 | АЛОЦВМ | 8 |