|
|
@@ -0,0 +1,71 @@
|
|
|
+# Введение в **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
|
|
|
+```
|
|
|
+
|
|
|
+## Создание элементов **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(tr.childNodes[0],td2); //добавление ячейки перед первой ячейкой (в самое начало строки таблицы)
|
|
|
+```
|
|
|
+
|
|
|
+Ссылка на родительский элемент находится в свойстве `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/>");
|
|
|
+});
|
|
|
+```
|
