Цель работы
Познакомиться с 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);
- используя идентификатор элемента.
Решение
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