DOM: рабочий процесс JavaScript имеет две стороны. Один из них - клиентский JavaScript (DOM), другой - серверный JavaScript (Node.js). Просто DOM - это объект документа Модель. Когда веб-страница загружается, браузер создает объектную модель документа страницы. В другом объяснении DOM - это представление HTML-файла в JavaScript.
Как работает DOM. На самом деле веб-браузер ничего не знает о HTML-файле. Когда мы загружаем HTML-файл в браузер, прежде всего, браузер создает объект через DOM из HTML-файла. Это древовидная структура данных. Это помогает нам так быстро превзойти все свойства этого Объекта. Я знаю, что это немного сбивает с толку, не волнуйтесь, давайте сосредоточимся на нескольких примерах.
Мы знаем, что в дереве структуры данных есть один или несколько узлов. Точно так же в DOM Object много узлов. В этом примере мы видим, что элемент «Document» является родительским узлом для всех остальных узлов. Имейте в виду, что каждый узел - это объект. Узел документа имеет двух дочерних элементов «Doctype & HTML». Точно так же в HTML есть дочерний элемент HEAD & BODY. Итак, примерно, если вы обращаетесь к текстовому узлу абзаца (p) BODY, каким будет код. Поскольку каждый узел является объектом, код доступа - Document.Doctype.HTML.BODY.p.text.
Это правильный пример манипуляции с DOM. Познакомимся с некоторыми популярными узлами DOM.
Как я уже сказал, каждый элемент - это узел.
Думаю, увидев эту картинку, вы получите четкое представление о том, как работает DOM.
Окно против документа. Иногда эти причудливые слова немного сбивают с толку новичка. «Окно» - это объект браузера, а документ - это свойство окна. В деталях, когда вы прикрепили что-то к глобальной переменной, это мгновенно присоединяется к объекту окна. Существует множество предопределенных оконных элементов, таких как setTimeout, alert, setInterval, location и так далее.
Зайдите в консоль браузера и просто напишите «окно», затем введите, и вы получите это.
Селектор DOM: в этом разделе я попытаюсь объяснить селектор на примере кода.
Это пример селектора «document.getElementById ()». Этот селектор работает с идентификатором атрибута HTML. Первоначально в файле index.html текстовым узлом тега h1 является 'Hello, Bangladesh', но когда мы использовали document.getElementById () в файле app.js вывод изменился на «Привет, читатель». Какой классный и простой селектор! правильно.
В DOM есть множество селекторов, но чаще всего селектор использует «document.getElementsByClassName ()», «document.getElementsByTagName ()», и так далее. getElementsByClassName () работает с атрибутом класса. С другой стороны, getElementsByTagName () работает с каждым тегом HTML-элементов.
DOM querySelector: есть два селектора: querySelector и querySelectorAll.
Selector vs querySelector отличается только синтаксисом. Покажите на примере кода этот синтаксис похож на стиль CSS.
Вывод:
События DOM. Проще говоря, каждый клик - это событие. В DOM много событий. Покажи картинку.
Для получения более подробной информации прочтите Документы MDN.
Когда мы нажимаем кнопку «Click Me», цвет фона меняется.
Вывод:
