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

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

    Все написанное капсом (заглавными буквами), является заранее выбранным объектом в DOM дереве
    # Как вызвать Что делает
    1 document.createElement('TAG') Создание тега
    2 SELECTED_ELEMENT.className Добавление класса к элементу
    3 SELECTED_ELEMENT.id Добавление id к элементу
    4 SELECTED_ELEMENT.setAttribute('NAME', 'VALUE') Добавление атрибута к элементу
    5 document.createTextNode('TEXT') Создание текста
    6 SELECTED_ELEMENT.insertBefore(ELEMENT, REFERENCE NODE) Добавление элемента в структуру
    7 SELECTED_ELEMENT.appendChild(ELEMENT) Добавление элемента в структуру
    8 SELECTED_ELEMENT.append(ELEMENT) Добавление элемента в конец (после последнего потомка)
    9 SELECTED_ELEMENT.removeChild(ELEMENT) Удаление элемента из структуры
    10 SELECTED_ELEMENT.remove(ELEMENT) Удаление узла из структуры
    11 SELECTED_ELEMENT.addEventListener('EVENT', FUNCTION) Добавление прослушки события к элементу
  2. Создайте страничку, которая меняет цвет в зависимости от положения курсора мышки на экране

    Попробовать

  3. Создайте страничку, которая отслеживает нажатие по элементам, а также меняет им текст и цвет

    Попробовать

  4. Создайте страничку, которая отслеживает положение курсора мыши, а также нажатие на элемент

    Попробовать

  5. Создайте страничку c игрой виселица

    Попробовать

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

Создание элемента Добавление элемента Удаление элемента Браузерные события События мышки События клавиатуры Отслеживание событий

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

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