Какво представлява обектният модел на документа и защо трябва да знаете как да го използвате.

И така, изучихте HTML, създадохте първите си тагове, научихте за CSS, направихте красиви форми, невероятни бутони, отзивчиви страници и започнахте да показвате на всички колко невероятно е всичко това.

Но тогава решавате, че искате да направите още една стъпка в обучението си, и сте започнали да се чудите: „Как мога да добавя анимация към страницата си? Иска ми се този бутон да направи анимация на страницата ми, когато щракнах върху него! "

Е, там идва DOM, за да реши проблема ви. Сигурно сте чували много за това, но може би все още не знаете какво е това и какви проблеми решава. Така че нека да копаем.

И така, какъв е DOM?

Знаете ли всички онези страхотни анимации, които виждате наоколо, които ви карат да си помислите: „Уау, бих искал да мога да направя нещо подобно“? Всички тези анимации се правят чрез манипулиране на DOM. Сега ще ви обясня как да започнете да го манипулирате и да направите вашите уебсайтове да изглеждат по-готини.

DOM (Document Object Model) е интерфейс, който представя как вашите HTML и XML документи се четат от браузъра. Той позволява на език (JavaScript) да манипулира, структурира и оформя вашия уебсайт. След като браузърът прочете вашия HTML документ, той създава представително дърво, наречено Document Object Model и определя как може да се осъществи достъп до това дърво.

Предимства

Чрез манипулирането на DOM имате неограничени възможности. Можете да създавате приложения, които актуализират данните на страницата, без да се нуждаете от опресняване. Също така можете да създадете приложения, които могат да се персонализират от потребителя и след това да промените оформлението на страницата без опресняване. Можете да плъзгате, премествате и изтривате елементи.

Както казах, имате безкрайни възможности - просто трябва да използвате творчеството си.

Представяне от браузъра

На изображението по-горе можем да видим представителното дърво и как то се създава от браузъра. В този пример имаме четири важни елемента, които ще видите много:

  1. Документ : Той третира всички HTML документи.
  2. Елементи : Всички маркери, които са във вашия HTML или XML, се превръщат в DOM елемент.
  3. Текст : Цялото съдържание на етикетите.
  4. Атрибути : Всички атрибути от определен HTML елемент. В изображението атрибутът class = "hero" е атрибут от елемента < p>.

Манипулиране на DOM

Сега стигаме до най-добрата част: започване на манипулиране на DOM. Първо ще създадем HTML елемент като пример, за да видим някои методи и как работят събитията.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Много просто, нали? Сега ще научим повече за DOM методите: как да вземем нашите елементи и да започнем да манипулираме.

Методи

DOM има много методи. Те са връзката между нашите възли (елементи) и събития, нещо, за което ще научим повече по-късно. Ще ви покажа някои от най-важните методи и как се използват. Има много повече методи, които няма да ви показвам тук, но можете да видите всички от тях тук.

getElementById ()

Този метод връща елемент, който съдържа името на идентификатора мина. Както знаем, идентификаторите трябва да са уникални, така че е много полезен метод да получите само елемента, който искате.

var myStart = document.getElementsById('start');

myStart : Името на нашата променлива, което изглежда подобно на подадения ни идентификатор .

старт : id премина. И в случай, че нямаме никакъв идентификатор с това конкретно име, той връща null .

getElementsByClassName ()

Този метод връща HTMLCollection на всички онези елементи, съдържащи конкретния предаден клас на име .

var myContainer = document.getElementsByClassName('container');

myContainer : Името на нашата променлива, което изглежда подобно на преминатия клас .

.container : нашият клас премина. В случай че нямаме нито един клас с това конкретно име, той връща null .

getElementsByTagName ()

Това работи по същия начин като тези методи по-горе: връща и HTMLCollection, но този път с една-единствена разлика: връща всички тези елементи с предадено име на маркера.

var buttons = document.getElementsByTagName('button');

бутони : Името на нашата променлива, което изглежда подобно на подаденото име на нашия маркер .

бутон : име на маркера , което искаме да получим.

querySelector ()

Той връща първия елемент, който е предал конкретния CSS селектор . Само не забравяйте, че селекторът трябва да следва синтаксиса на CSS . В случай че нямате никакъв селектор , той връща null .

var resetButton = document.querySelector('#reset');

resetButton : Името на нашата променлива, което изглежда подобно на подадения от нас селектор .

#reset : селекторът е предаден и ако нямате никакъв селектор, който съответства, връща null .

querySelectorAll ()

Много подобен на метода querySelector () , но с една-единствена разлика: той връща всички елементи, които съвпадат с подадения CSS селектор . В селектора също трябва да следват синтаксиса на CSS . В случай че нямате никакъв селектор , той връща null .

var myButtons = document.querySelector('#buttons');

myButtons : Името на нашата променлива, което изглежда подобно на подадените от нас селектори .

#buttons : селекторът е предаден, ако нямате нито един селектор, който съответства, връща null .

Това са някои от най-използваните DOM методи. Има още няколко метода, които можете да използвате, като createElement (), който създава нов елемент във вашата HTML страница и setAttribute (), който ви позволява да задавате нови атрибути за елементи HTML. Можете да ги изследвате сами.

Отново можете да намерите всички методи тук, отляво в Методи . Наистина ви препоръчвам да разгледате някои от останалите, защото скоро може да се наложи някой от тях.

Сега ще научим за събитията - в крайна сметка без тях не можем да правим анимации в нашите страници.

Събития

DOM елементите имат методи , както току-що обсъждахме, но те също имат събития . Тези събития са отговорни за възможността за интерактивност на нашата страница. Но ето едно нещо, което може да не знаете: събитията също са методи .

щракнете

Едно от най-използваните събития е събитието за щракване. Когато потребителят щракне върху определен елемент, той ще осъществи някакво действие.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Параметрите addEventListener () са:

  1. Типът събитие, което искате (в този случай „ щракнете “).
  2. Функция за обратно повикване
  3. В useCapture по подразбиране е невярно. Показва дали искате да „заснемете“ събитието или не.

изберете

Тези събития са за когато искате да изпратите нещо, когато е избран определен елемент. В този случай ще изпратим обикновен сигнал .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Това са едни от най-често използваните събития. Разбира се, имаме много други събития, които можете да използвате, като плъзгане и пускане на събития - когато потребителят започне да плъзга някакъв елемент, можете да извършите някакво действие, а когато той изпусне този елемент, можете да направите друго действие.

Сега ще видим как можем да преминем през DOM и да използваме някои свойства.

Преминаване през DOM

Можете да прекосите DOM и да използвате някои свойства, които ще видим сега. С тези свойства можете да върнете елементи, коментари, текст и т.н.

.childNodes

Това свойство връща nodeList на дъщерни възли на дадения елемент. Връща текст, коментари и т.н. Така че, когато искате да го използвате, трябва да внимавате.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.първо дете

Това свойство връща първото потомство на дадения елемент.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodeName

Това свойство връща името на дадения елемент. В този случай предадохме div , така че той ще върне „ div “.

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

Това свойство е специфично за текстове и коментари , тъй като връща или задава стойността на текущия възел . В този случай, тъй като сме предали div, той ще върне null .

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

Това свойство връща типа на дадения елемент. В този случай той връща „ 1 “.

var container = document.querySelector('.container')
var getValue = container.nodeType;

Но какво означава „ 1 “ изобщо ? По същество това е nodeType на дадения елемент. В този случай това е _ELEMENT_NODE_ и връща null. Ако това беше атрибут, той щеше да ни бъде върнат като „ 2 “ и стойността на атрибута.

Можете да прочетете повече за nodeTypes тук.

Елементи

Тези свойства, вместо тези по-горе, ни връщат само елементи . Те се използват по-често и се препоръчват, защото могат да предизвикат по-малко объркване и са по-лесни за разбиране.

.parentNode

Това свойство връща родителя на дадения възел.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Връща първия дъщерен елемент на дадения елемент.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Връща последния дъщерен елемент на дадения елемент.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Това са някои от многото свойства, които DOM притежава. За вас е много важно да знаете основите на DOM, как работи и неговите методи и свойства, защото някой ден може да ви потрябва.

Заключение

DOM ни предоставя няколко важни API за създаване на фантастични и иновативни приложения. Ако разбирате основите на това, можете да създадете невероятни неща. Ако искате да прочетете повече за DOM, можете да кликнете тук и да прочетете всички MDN документи.

? F мен ollow на Twitter!

F ollow мен на GitHub!

Търся отдалечена възможност, така че ако има такава, бих искал да чуя за нея, така че, моля, свържете се с мен!