Управление элементами на HTML странице, DOM часть 1

  1. Cвойства и методы DOM дерева

    Все написанное капсом (заглавными буквами), является заранее выбранным объектом в DOM дереве
    # Как вызвать Что делает
    1 document.all HTML коллекция со всеми элементами на странице
    2 document.title title документа
    3 document.head (body) HTML выбранной части
    4 document.URL Ссылка в адресной строке
    5 document.forms Все формы в документе
    6 document.ELEMENT.innerHTML Изменить HTML элемента
    7 document.ELEMENT.textContent Изменить текст у элемента
    8 document.getElementById('ID') Найти элемент по ID (вернет 1 элемент)
    9 document.getElementsByClassName('CLASS') Найти элементы по class (вернет массив с элементами)
    10 document.getElementsByTagName('TAG') Найти элементы по тегу (вернет массив с элементами)
    11 document.querySelector('SELECTOR') Найти элемент по селектору (вернет 1 элемент). Например: .class, #id, tag
    12 document.querySelectorAll('SELECTOR') Найти элементы по селектору (вернет массив с элементами). Например: .class, #id, tag
    13 SELECTED_ELEMENT.style Изменить стиль у выбранного элемента. Например: element.style.color = 'red'
    14 SELECTED_ELEMENT.parentNode Найти родительский элемент у выбранного
    15 SELECTED_ELEMENT.children Найти все вложенные в этот элемент теги
  2. Сгенерируйте с помощью js страницу

    Попробовать

Что почитать:

DOM дерево Все свойства, методы - document

Где потренироваться:

Определите типы данных Упражнение #1 Упражнение #2 Упражнение #3 Упражнение #4 Упражнение #5 Упражнение #6 Упражнение #7 Упражнение #8

Предыдущие js уроки

Урок 17 Урок 18 Урок 19 Урок 20 Урок 21 Урок 22 Урок 23