Введение в 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/>");
});

07DOM.md 3.4 KB Historia Czysty