# Введение в **DOM**.

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

## Корень

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

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

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

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

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

```javascript
alert(someId.innerText)
```

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

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

Добавление элементов:
```javascript
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`:

```javascript
tr.childNodes[0].parentElement == tr
```


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

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

## События

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

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

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

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