FrontendLectures/07DOM.md

Введение в DOM.

DOM (Document Object Model) - внутренние объекты и функции браузерного JS, которые позволяют работать с деревом тэгов текущей загруженной страницы. JS через это API имеет полный доступ ко всему тому, что есть в HTML и CSS.

Корень

Корнем дерева элементов DOM является объект document

Поиск элементов

Что бы найти элемент, нужно обратится к методу document, или любого другого элемента, в который нужно что-то найти:

var el  = document.getElementById("someId"); //обратите внимания, без #
var el2 = document.querySelector("#someId"); //поиск по любому селектору, аналог jQuery
var el3 = document.querySelectorAll("a");    //поиск всех тэгов a

Так же, с некоторых пор, id тэга HTML является ключем в объекте window (т. е. в глобальной области видимости), что позволяет обращаться к элементам еще проще:

alert(someId.innerText)

Создание элементов DOM

document.createElement("a"); //обратите внимание, без <>

Добавление элементов:

var tr = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");

tr.appendChild(td); //добавление ячейки в конец строки таблицы.
tr.insertBefore(td2, tr.childNodes[0]); //добавление ячейки перед первой ячейкой (в самое начало строки таблицы)

Ссылка на родительский элемент находится в свойстве parentElement:

tr.childNodes[0].parentElement == tr

Свойства объектов или наборов объектов элементов в DOM

• value - свойство а не функция для значения поля ввода.
• attributes - объект attributes с атрибутами html-тэга. Также есть 4 функции для работы с атрибутами:
  • hasAttribute - проверка на наличие атрибута
  • getAttribute - чтение
  • setAttribute - запись
  • removeAttribute - удаление
• style - объект стиля элемента
• innerHTML - строка вложенного HTML в элементе.
• innerText - строка вложенного текста в элементе.

События

Каждый элемент DOM содержит множество свойств on..., в которые вы можете занести тот или иной обработчик события:

document.onmousemove = function(){
    document.write("mouse move <br/>");
}

Так же можно добавлять обработчики используя метод элемента addEventListener:

document.addEventListener("mousemove",function(){
    document.write("mouse move <br/>");
});