Объектная модель документа, известная как DOM, представляет собой структурированное представление HTML документа, который можно рассматривать как дерево узлов или элементов. созданный браузером, DOM является объектно-ориентированным, что означает, что каждый узел имеет набор значений и свойств, которые можно изменить, и мы можем использовать Javascript для управления этими элементы/узлы DOM.

Я окажу вам честь, кратко объяснив вам, как вы можете использовать Javascript для управления DOM, а также быть DON в этом. .

Браузер предоставляет нам объект окна для веб-страницы, и внутри него у нас есть объект документа, который представлен на диаграмме выше. У нас есть документ, являющийся родителем корневого элемента. (В данном случае HTML-тег), который также является родительским для двух родственных элементов, теги head и body являются родительскими для других элементов, <a> & <h1>, и <title> являются дочерними элементами родственных элементов соответственно, и эти дочерние элементы служат родительскими элементами для других узлов. /elements, атрибуты и тексты, как показано на диаграмме выше.

Существуют библиотеки, такие как JQUERY, которые, кажется, упрощают манипуляции с DOM, но это не совсем так, поскольку используется традиционный Javascript (vanilla js) для обхода и манипулирования DOM эффективнее, быстрее и лучше всего, если вы сосредоточены на понимании языка Javascript, а также делает вас DON ДОМ.

Изучение объекта документа.

Объект документа — это свойство объекта окна (также известного как глобальный объект), которое мы будем исследовать, и в этом разделе я покажу вам, как выбирать элементы из него, проверяя DOM. дерево с помощью этого кода
let val;
val = document;
console.log(val);
 у нас будет весь объект документа в консоли.

Теперь при работе с DOM мы можем получить различные типы структур, например, HTML-коллекцию на диаграмме выше, которая похожа на массив, но это не так, она только отформатирована как массив, поэтому мы можем не используйте с ним методы массива, такие как цикл forEach. Чтобы получить HTML-коллекцию, используйте:
let val;
val = document.all;
console.log(val);
В консоли мы получим следующее:

Как и массив, мы можем получить доступ к определенным индексам в коллекции HTML, и, как и массив, он начинается с нуля, например, у нас есть
let val;
val = document.all[0];
console.log(val);
ИЛИ
let val;
val = document.all[4];
console.log(val);
мы получим:

Мы также можем проверить свойства следующим образом:
let val;
val = document.all.length;
console.log(val);
этот код проверит общее количество узлов/элементов, присутствующих в объекте документа,

мы также можем получить доступ к отдельным узлам/элементам, чтобы выбрать любой конкретный узел, такой как домен, ссылки, тип контента, URL-адрес, набор символов… и назначить ему функцию, например,
let val1, val2, val3;
val1 = document.head;
val2 = document.body;
val3 = document.links;
console.log(val1, val2, val3);
этот код будет распечатывать эти отдельные узлы соответственно в консоли:

Вот еще несколько способов выбора узла без использования селекторов javascript, например:
let val;
val = document.forms;
val = document.forms[0];
val = document.forms.id;
val = document.forms.method;

val = document.links;
val = document.links[4];
val = document.links.className;
val = document.links[7].classList.[6];

val = document.scripts;
val = document.scripts[1].getAttributes("src");
console.log(val);

Забавный факт о том, что Дон создает и нарушает правила, и Javascript делает именно это, я уже говорил ранее, что коллекция HTML отформатирована только как массив, но это не массив, и методы массива не могут быть использованы на нем, хорошо в этом утверждении есть хитрость, но чтобы доказать утверждение, если у нас есть
let val;
val = document.scripts;
val.forEach(function(script) {
console.log(script);
});
console.log(val);
here, мы получим результат «модуль не определен», как показано на диаграмме ниже.

Ну как Дону можно применить к нему этот трюк
let val;
val = document.scripts;
let scriptsArr = Array.from(val)
scriptsArr.forEach(function(script) {
console.log(script);
});
console.log(val);

Потрясающе верно, это один из способов быть ДОНОМ ДОМА.

Селекторы DOM для узлов/элементов.

Это в основном методы объекта документа, которые позволяют выбирать узлы из DOM для динамической функциональности, в прошлом JQUERY использовался для выполнения этой задачи, и я не рекомендую его, потому что это похоже на использование кувалды, чтобы убить комара, и с последние обновления традиционного javascript (vanilla js) у нас есть селекторы, разделенные на одиночные и множественные селекторы, поэтому JQUERY не нужен.

Одиночные селекторы позволят вам выбрать один элемент/узел по его идентификатору или имени класса, и он хранит только одну вещь, поэтому, если мы используем одиночный селектор для идентификатора или имени класса, который появляется более одного раза в корне document он выберет только первый, в то время как множественные селекторы сделают прямо противоположное.

Первый отдельный селектор, на который мы хотели бы обратить внимание, — это document.getElementById(); this, который делает то же самое, что подразумевает, что он выбирает элементы только по их идентификатору. Мы не можем выбрать класс или пометить только идентификатор, например, если мы выберем идентификатор «ящик» объект документа.
console.log(document.getElementById('box'));

он распечатает идентификатор в консоли, мы также можем получить любой атрибут в элементе/узле, в котором существует идентификатор, например,
console.log(document.getElementById('box').id);
console.log(document.getElementById('box').className);

мы также можем изменить CSS элемента, например, чтобы изменить цвет фона, цвет текста и установить отступ элемента с идентификатором поля, мы можем использовать эти строки кода
document.getElementById('box').style.background = '#333';
document.getElementById('box').style.color= 'red';
document.getElementById('box').style.padding= '1.5rem';

в ситуациях, когда мы хотим получить через fetch API или AJAX, и мы хотим вставить или изменить текстовое содержимое узла/элемента, мы можем изменить текстовое содержимое таким образом
document.getElementById('box').innerHtml = '<h3>This is Yasir's article</h3>';

но мы можем изменить текстовое содержимое обычным образом, используя этот синтаксис
document.getElementById('box').innerText = 'This is Levitan's article';
document.getElementById('box').textContent= 'This is Gaji's article';

Второй отдельный селектор, который мы рассмотрим, работает точно так же, как JQUERY, и имеет синтаксис, аналогичный JQUERY, но это не так. например, чтобы выбрать идентификатор, className и сам элемент, мы использовали бы следующее

console.log(document.querySelector('#box'));
console.log(document.querySelector('.section-features'));
console.log(document.querySelector('header'));

и мы можем выполнять каждую динамическую функцию, которую мы выполняли, используя document.getElementById(); с document.querySelector();, и получать те же результаты.

Примечание для выбора элемента с использованием document.querySelector();, если мы выбираем, например, элемент li, а в объекте документа у нас есть несколько элементов li, будет выбран только первый, это относится к нескольким идентификаторам и именам классов.

Множественные селекторы позволят вам выбрать несколько элементов/узлов для динамических функций. Первый селектор, который мы рассмотрим, — это селектор document.getElementsByClassName(), он выберет несколько элементов по именам их классов, например, чтобы выбрать несколько фигуры в объекте документа с помощью этого блока кода
const meals = document.getElementsByClassName('meals-photo');
console.log(meals);

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

Второй множественный селектор — это document.getElementsByTagName();, который выбирает заголовок тега вместо имени класса, например
const meals = document.getElementsByTagName('figure');
console.log(meals);
, и для управления конкретным индексом, например
const meals = document.getElementsByTagName('figure');
meals[1].style.diplay = 'none';
, это выводит второй цифра из указателя.
Будучи доном, вы можете манипулировать несколькими выбранными элементами как массивом, используя любой селектор, например, используя document.getElementsByTagName(); для реверсирования выбранных нескольких элементов;
let meals = document.getElementsByTagName('figure');
meals = Array.from(meals) ;
meals = reverse();

Третий множественный селектор isdocument.querySelectorAll(); , этот селектор принимает имена тегов, имена классов и идентификаторы так же, как JQUERY, он также возвращает список узлов, в отличие от двух первоначальных селекторов, которые возвращают списки элементов, этот селектор будет возвращать каждый атрибут в узле, который он выбирается. от. Например,
const info = document.queryselectorAll('ul.meals-showcase li');
console.log(info);
это вернет

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

Заключение

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

Вы можете узнать больше на таких платформах, как Free code camp, udemy и W3schools.

Ссылки
Лагерь свободного кода, Брэд Траверси и Хемил Патель.