Автор оригинала: FreeCodeCamp Community Member.

Леонардо Мальдонадо

Итак, вы изучали HTML, вы создали свои первые теги, узнали о CSS, сделали красивые формы, удивительные кнопки, отзывчивые страницы и начали показывать каждому, как удивительно все это было.

Но тогда вы решаете, что вы хотите сделать еще один шаг в вашем обучении, и вы начали удивляться себе: «Как я могу добавить анимацию на мою страницу? Я желаю, чтобы эта кнопка сделала некоторую анимацию на моей странице, когда я нажал его! »

Ну, вот где приходит Дом, чтобы решить вашу проблему. Вы, наверное, много слышали об этом, но вы можете еще не узнать, что это и какие проблемы это решает. Итак, давайте копать.

Итак, что такое дом?

Вы знаете все эти классные анимации, которые вы видите вокруг, что заставляют вас думать себе: «Ух ты, я хотел бы сделать что-то подобное»? Все эти анимации сделаны путем манипулирования домом. Теперь я объясню вам, как начать манипулировать этим и заставлять свои сайты выглядеть круче.

DOM (модель объекта документов) – это интерфейс, который представляет, как ваши документы HTML и XML прочитаны браузером. Это позволяет языку (JavaScript) для манипулирования, структурой и стилем вашего сайта. После того, как браузер считывает ваш HTML-документ, он создает репрезентационное дерево, называемое моделью объекта документа и определяет, как можно получить доступ к этому дереву.

Преимущества

Манипулируя DOM, у вас бесконечные возможности. Вы можете создавать приложения, которые обновляют данные страницы, не требуя обновления. Кроме того, вы можете создавать приложения, которые настраиваются пользователем, а затем измените макет страницы без обновления. Вы можете перетащить, перемещать и удалять элементы.

Как я уже сказал, у вас есть бесконечные возможности – вам просто нужно использовать ваше творчество.

Представительство браузера

На изображении выше, мы можем увидеть репрезентативное дерево и как оно создано браузером. В этом примере у нас есть четыре важных элемента, которые вы увидите много:

1. Документ : Это относится к всему HTML документы.
2. Элементы : Все теги внутри вашего HTML или XML превратиться в элемент DOM.
3. Текст : Все содержимое тегов.
4. Атрибуты : Все атрибуты из определенного HTML элемент. На изображении атрибут Класс = “Герой” это атрибут из < P> Элемент.

Манипулировать домом

Теперь мы добираемся к лучшей части: начало манипулировать домом. Во-первых, мы собираемся создать HTML-элемент в качестве примера, чтобы увидеть некоторые методы и как работают события.

                                      
          
00:00:00
          Start          Stop          Reset      
    

Очень просто, верно? Теперь мы собираемся узнать больше о методах DOM: как получить наши элементы и начать манипулировать.

Методы

У домена много методов. Это связь между нашими узлами (элементами) и событиями, что мы узнаем больше о более позднем. Я покажу вам некоторые из самых важных методов и как они используются. Есть гораздо больше методов, которые я не собираюсь показывать вам здесь, но вы можете увидеть все они методы здесь Отказ

getelementbyId ()

Этот метод возвращает элемент, содержащий имя ID прошедший. Как мы знаем, я D должен быть уникальным, поэтому это очень полезный метод, чтобы получить только элемент, который вы хотите.

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

MyStart : Наше имя переменной, которое выглядит похоже на наше ID прошедший.

Начните : ID прошедший. И в случае, если у нас нет ?| ID С этим конкретным именем он возвращает null Отказ

getelementsbyclassname ()

Этот метод возвращает Htmlcollection Из всех этих элементов, содержащих конкретное имя Класс прошедший.

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

Mycontainer : Наше имя переменной, которое выглядит похоже на наше Класс прошедший.

.Онтейнер : наше Класс прошедший. В случае, если у нас нет ?| Класс С этим конкретным именем он возвращает null Отказ

getelementsbytagname ()

Это работает так же, как и эти методы выше: он также возвращает Htmlcollection, Но на этот раз с одной разницей: возвращает все эти Элементы с названием тега прошло.

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

Кнопки : Наше имя переменной, которое выглядит похоже на наше Имя метки прошедший.

кнопка : Имя метки что мы хотим получить.

QuerySelector ()

Это возвращает первый элемент это имеет специфический CSS Selector прошедший. Просто помните, что селектор следует следовать за CSS синтаксис Отказ Если у вас нет ?| селектор , он возвращает null Отказ

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

ResetButton : Наше имя переменной, которое выглядит похоже на наше селектор прошедший.

#reset : селектор прошло, а если у вас нет селектор что соответствует этому возвращению null Отказ

QuerySelectorAll ()

Очень похоже на QuerySelector () Метод, но с одной разницей: он возвращает все Элементы этот матч с CSS Selector прошедший. селектор также следует следовать за CSS синтаксис Отказ Если у вас нет ?| селектор , он возвращает null Отказ

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

MyButtons : Наше имя переменной, которое выглядит похоже на наше Селекторы прошедший.

#buttons : селектор прошел, если у вас нет селектор что соответствует этому возвращению null Отказ

Это некоторые наиболее используемые методы DOM. Есть несколько дополнительных методов, которые вы можете использовать, например, CreateeEdeeDement (), который создает новый элемент на вашей HTML-странице и SetAttribute (), который позволяет устанавливать новые атрибуты для элементов HTML. Вы можете исследовать их самостоятельно.

Опять же, вы можете найти все методы здесь , на левой стороне в Методы Отказ Я действительно рекомендую вам взглянуть на некоторые другие, потому что вам может понадобиться один из них в ближайшее время.

Теперь мы собираемся узнать о События – Ведь без них мы не можем сделать анимацию на наших страницах.

События

Элементы DOM имеют Методы , как мы только что обсудили, но у них тоже есть События Отказ Эти события несут ответственность за возможную возможную интерактивность на нашей странице. Но вот одна вещь, которую вы можете не знать: События также методы .

щелчок

Одним из наиболее используемых событий является событие Click. Когда пользователь нажимает на определенный элемент, это будет реализовать некоторые действия.

myStart.addEventListener('click', function(event) {

// Do something here.

}, false);

Параметры addeventListener ():

1. Тип события, который вы хотите (в этом случае ‘ Нажмите ‘).
2. Функция обратного вызова
3. UseCapture По умолчанию ложно. Это указывает, хотите ли вы «захватить» событие.

Выбрать

Это события для того, когда вы хотите отправлять что-то, когда выбран определенный элемент. В таком случае мы собираемся Отправка простой тревога .

myStart.addEventListener('select', function(event) {

alert('Element selected!');

}, false);

Это некоторые из наиболее часто используемых событий. Конечно, у нас много других событий, которые вы можете использовать, например, события Drag & Drop – когда пользователь начинает перетащить какой-то элемент, вы можете сделать некоторые действия, и когда они бросают этот элемент, вы можете сделать другое действие.

Теперь мы посмотрим, как мы можем пройти домо и использовать некоторые свойства.

Пересекающий домо

Вы можете пройти домо и использовать некоторые свойства, которые мы сейчас посмотрим. С этими свойствами вы можете вернуть элементы, комментарии, текст и так далее.

.hildnodes.

Это свойство возвращает odelist ребенка узлы данного элемента. Это возвращает текст, комментарии и так далее. Итак, когда вы хотите использовать его, вы должны быть осторожны.

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_ и возвращает нуль. Если это был атрибут, это было бы возвращено как « 2 » нам и значение атрибута.

Вы можете прочитать больше о Nodetypes здесь Отказ

Элементы

Эти свойства, а не тем выше, вернитесь к нам только элементы . Они чаще используются и рекомендуются, потому что они могут вызвать меньше путаницы и легче понять.

.parentnode.

Это свойство возвращает родитель указанного узла.

var container = document.querySelector('.container')

var getParent = container.parentNode;

.fiirstelementChild.

Возвращает первый дочерний элемент данного элемента.

var container = document.querySelector('.container')

var getValue = container.firstElementChild;

.LastelementChild

Возвращает последний дочерний элемент данного элемента.

var container = document.querySelector('.container')

var getValue = container.lastElementChild;

Это некоторые из множества свойств, которые имел. Для вас очень важно знать основы о DOM, как это работает, и его методы и свойства, потому что когда-нибудь вам может понадобиться.

Заключение

Дом предоставляет нам несколько важных API для создания фантастических и инновационных приложений. Если вы понимаете основные основы, вы можете создавать невероятные вещи. Если вы хотите прочитать больше о DOM, вы можете нажать здесь и прочитайте все документы MDN.

? F Оллау меня в Twitter! ⭐ F Оллау меня на Github!

Я ищу отдаленную возможность, так что если у Я хотел бы услышать об этом, поэтому, пожалуйста, свяжитесь со мной!

Оригинал: “https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/”