Рубрики
Без рубрики

Дом объяснил для начинающих – Как работает модель объекта документа

Когда я начал как веб-разработчик, люди часто бросали термин

Автор оригинала: Kingsley Ubah.

Когда я начал в качестве веб-разработчика, люди часто бросали термин «Дом» в отрасли. Каждый учебник JavaScript упомянул это, но я не знал, что это значило.

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

Что такое дом?

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

Для этого для вас должно быть способ взаимодействовать с вашим телевидением. И что вы используете для этого?

Удаленный Отказ

Пульт дистанционного управления служит мост Что позволяет вам взаимодействовать с телевизором.

Вы делаете телевизор Активный и динамический через пульт. И таким же образом JavaScript делает HTML-страницу активной и динамичной через Дом Отказ

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

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

Это делает это путем связи с браузером с использованием свойств, методов и событий в интерфейсе, называемом моделью объекта документа или DOM.

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

Дом – это дерево, похожее на дерево веб-страницы, которая загружается в браузер.

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

Объект документа

Это самый верхний объект в доме. Это имеет характеристики и Методы Что вы можете использовать для получения информации о документе, используя правило, известное как Dot Notiation.

После документа вы размещаете точку, а также свойство или метод.

Давайте посмотрим на простую демонстрацию, которая показывает, как скрипт может получить доступ к содержимому HTML-документу через DOM:

Login to your account
‌‌

‌‌Username 
     
‌‌Password 
     
‌‌
    ‌‌

‌‌

 New user?  Register here 
 Retrieve password  

var username = document.LoginFrm.txtUsername.value //Gets the username input

Хорошо. Это HTML-форма входа. Вы можете получить доступ к всем этим элементам в JavaScript с набором свойств и методов DOM API. Но каковы эти методы?

В дополнение к свойству и методу, включенному в фрагмент кода, давайте посмотрим на некоторые другие популярные:

Метод QuerySelectorAll ()

Вы используете этот метод для доступа к одному или нескольким элементам из DOM, который соответствует одному или нескольким селекторам CSS:

 first div 


 first paragraph 


 second div 

 second paragraph 


 another div 
var paragraphs = document.querySelectorAll( 'p' );
paragraphs.forEach(paragraph => paragraph.display = 'none')

Метод CreateeEdeeDement ()

Вы используете этот метод, чтобы создать указанный элемент и вставить его в DOM:

first div


 first paragraph
 

second div


second paragraph
 

another div
var thirdParagraph = document.createElement('p');

Метод getelementbyId ()

Вы используете этот метод, чтобы получить элемент из документа по его уникальному атрибуту ID:

 first div 
 

 first paragraph


second div


 second paragraph


another div
 
var firstDiv = getElementById("first")

Метод getelementsbytagname ()

Вы используете этот метод для доступа к одному или нескольким элементам их имени тега HTML:

 first div 
 

 first paragraph
 

 second div
 

second paragraph
 

another div
divs = document.getElementByTagname("div");

Элемент AppendChild ()

Вы используете этот элемент для доступа к одному или нескольким элементам своим именем тега HTML.

Он добавляет элемент в качестве последнего ребенка к элементу HTML, который вызывает этот метод.

Ребенок, который должен быть вставлен, может быть либо вновь созданным элементом или уже существующим. Если это уже существует, он будет перенесен из его предыдущей позиции на должность последнего ребенка.

Mangoes

var p = document.createElement( 'p' );
var h2 = document.querySelector( 'h2' );
var div = document.querySelector( 'div' );
h1.textContent = 'Mangoes are great...'
div.appendChild('p');

Имущество innerhtml

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

Свойство addeventListener ()

Это свойство прикладывает слушатель события к вашему элементу.

Требуется обратный вызов, который будет запущен, когда это событие срабатывает.

‌‌
var btn = document.querySelector( 'button' );‌‌
btn.addEventListener( 'click' ,foo);‌‌
function foo() { alert( 'submitted!' ); 
  				btn.innerHTML = '';
          }

Свойство reflacechild ()

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

‌‌
    
Mangoes‌
‌

var h2 = document.createElement( 'h2' );‌‌
var h1 = document.querySelector( 'h1' );‌‌
var div = document.querySelector( 'div' );‌‌
h2.textContent = 'Apple';‌‌
div.insertBefore(h1, h2);

Метод setaTtribute ()

Вы используете этот метод для установки или изменения значения атрибута элемента.

Предположим, у нас есть атрибут «ID», содержащий значение «Фаворит». ” Но мы хотим изменить значение «хужему» вот как вы можете сделать это с кодом:

‌‌
    
Mangoes‌‌


var h1 = document.querySelector( 'h1' );
h1.setAttribute(div, 'worst');

Метод узла

Каждый элемент на HTML-странице известен как узел.

Вы можете получить доступ к любому элементу, используя следующие свойства с объектом узла:

  • Node.Childnodes – обращается к дочерним узлам выбранного родителя
  • Node.FirstChild – обращается к первому ребенку выбранного родителя
  • Node.lastchild – Доступ к последнему ребенку выбранного родителя.
  • Node.Parentnode – Доступ к родителю выбранного узела ребенка.
  • Node.nextsibling – обращается к следующему последовательному элементу (брат) выбранного элемента.
  • Node.previoussibling – доступ к предыдущему элементу (брат) выбранного элемента
var list = document.getElementsById( "site-list" )‌‌
var firstItem = list‌‌.childNodes[0].childNodes[0];

Резюме

Дом – это представление сверху всех элементов, составляющих веб-страницу. Это интерфейс, через который ваш скрипт взаимодействует с вашим HTML.

Есть много свойств и методов, которые вы можете использовать для получения информации о доме и манипулировать им.

Это все для этой статьи. Я надеюсь, вы узнали что-то стоящее.

Если вам понравилось, вы можете купить мне кофе здесь Отказ

Спасибо и увидимся скоро.

Оригинал: “https://www.freecodecamp.org/news/dom-explained-everything-you-need-to-know-about-the-document-object-model/”

Читайте ещё по теме: