Освоение объектной модели документа (DOM)

Освоение объектной модели документа (DOM)

16 марта 2023 г.

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

Содержание:-

  1. Что такое DOM?
  2. Как работает DOM
  3. Древовидная структура модели DOM
  4. Узлы и элементы
  5. свойства
  6. Методы
  7. Селекторы

Что такое DOM?

  • DOM означает объектную модель документа
  • Он действует как интерфейс для HTML & Документы XML, которые представляют содержимое документа в виде древовидной структуры
  • .
  • DOM позволяет использовать JavaScript & другие языки программирования для взаимодействия и управления контентом & структура документов HTML или XML.
  • Мы можем использовать DOM, чтобы добавлять или удалять элементы со страницы, изменять текст элементов или реагировать на щелчок мыши или ввод с клавиатуры.

Как работает DOM?

  • При загрузке веб-страницы браузер создает объектную модель документа (DOM) страницы.
  • DOM работает как древовидная структура и преобразует HTML-код в дерево, в котором каждый узел представляет элементы этого конкретного HTML-кода.
  • Корнем этого дерева являются объекты документа, а каждый узел представляет такие элементы, как абзацы, изображения, заголовки, ссылки и т. д.

<html>
  <head>
    <title> DOM BLOG </title>
  </head>
  <body>
    <button> Click here to read the blog </button>
  </body>
</html>

* Например, если приведенный выше код представляет собой простой HTML-код, то DOM преобразует этот код в древовидную структуру, чтобы можно было легко выполнять манипуляции с DOM. * Ниже показано, как приведенный выше код преобразуется в древовидную структуру с помощью DOM.

* В DOM, Properties & Методы — это два типа членов, связанных с каждым узлом, элементом или объектом. Свойства и методы, а также некоторые атрибуты и функции помогают взаимодействовать с HTML и манипулировать им для получения желаемого результата. * Давайте разберемся со свойствами и методами на этом примере:-

Свойства

Допустим, у вас есть HTML-документ с таким элементом заголовка:

<h1 id="blog-head">It's a blog about DOM</h1>

Теперь, если мы хотим изменить этот заголовок, даже не касаясь HTML, то мы собираемся использовать «DOM».

Сначала мы «получаем» этот элемент заголовка в JavaScript, используя селектор getElementbyID(" ");

Возвращает значение как «объект».

var heading = document.getElementById('blog-head');

Затем мы получаем доступ к его внутреннему HTML с помощью «.innerHTML» и соответствующим образом меняем его значение/текст.

heading.innerHTML = 'Read, Learn and Leave your Feedback!';

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

Не волнуйтесь, мы изучим селекторы всего за несколько минут.

Методы

Допустим, у вас есть элемент кнопки в HTML-документе, подобный этому:

<button id="my-button">Click me to read the blog about DOM</button>

Теперь, как и выше, сначала мы выбираем кнопку в JavaScript, используя селектор с именем .getElementsbyID(” ”). Он возвращает значение как «объект».

Теперь мы можем манипулировать и вносить изменения с помощью кнопки, не касаясь HTML. Допустим, нам нужно оповещение «Вы нажали кнопку, чтобы прочитать блог о DOM!» всякий раз, когда пользователь нажимает кнопку.

Для этого нам нужно сделать две вещи.

  1. Добавить прослушиватель событий, реагирующий на клик.
  2. функция(), которая выполняет блок кода и возвращает предупреждение, в котором говорится: "Вы нажали кнопку, чтобы прочитать блог о DOM!".

var button = document.getElementById('my-button');
button.addEventListener('click', function() {
  alert('You clicked the button for reading the blog about DOM!');
});

Этот .addEventListener() — это то, что мы называем методами в DOM. Мы передали в него два аргумента.

  1. щелчок = нажатие кнопки
  2. function() = показывает оповещение, когда происходит щелчок.

ПРИМЕЧАНИЕ. Методы имеют круглые скобки() в конце, а свойства — нет.

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

Есть различия между ч/б методами() и функциями(), но это не тема этого блога.

СЕЛЕКТОРЫ

Существует множество способов выбора элементов внутри DOM.

Допустим, у нас есть этот HTML-код

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>

Теперь, если мы хотим выбрать «li», мы используем селекторы:-

1) получить элементы по имени тега(””);

  • Этот селектор выбирает все элементы по именам тегов (li, ul, p, h1, h1 и т. д.)
  • В данном случае мы выбираем «li».
  • Этот селектор выбирает все символы «li» в HTML-документе.

document.getElementsbyTagName("li");
// HTMLCollection(3) [li.item, li.item, li.item] => Selects all 3 "li" from above HTML code

Примечание. Элементы во множественном числе, поэтому возвращается более одного значения в виде массива.

Теперь давайте стилизуем букву «li»

document.getElementsbyTagName("li");
document.getElementsbyTagName("li")[0].style.color = "Red"; 
//change color of first li to red
document.getElementsbyTagName("li")[1].style.color = "Blue"; 
//change color of second li to Blue
document.getElementsbyTagName("li")[2].style.color = "Green"; 
//change color of Third li to Green

Мы также можем изменить размер и стиль текста, используя различные свойства вместо «стиля».

С помощью циклов можно изменить стиль всех трех элементов одновременно.

var items = document.getElementsByTagName("li");
for (let i = 0; i < 3; i++) {
  items[i].style.backgroundColor = "red";
}

2) получить элементы по имени класса ("");

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

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>
<button class="btn">Click to read blog</button>
document.getElementsbyClassName("btn");
//This selects all the elements with .btn class in it

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

document.getElementsByClassName("btn");
document.getElementsByClassName("btn")[0].textContent = "you are reading the blog"
//This changes the text content inside the button.

Этот селектор также возвращает значение в виде массива.

3)получить элемент по ID(” ”);

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

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>
<button class="btn">Click to read blog</button>

Теперь давайте выберем элемент ul, используя его идентификатор.

document.getElementbyID("title");
//Selects element with ID Only
document.getElementbyID("title").style.color = "red";
//Styles the title element and changes its color to Red.

ПРИМЕЧАНИЕ ⇒ Селектор ID имеет «Элемент» без «s», что означает его единственное число, поэтому он возвращает только одно значение.

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

4)Селектор запросов(””);

Итак, предыдущие три селектора используются в определенных случаях (для имени тега, для класса, для идентификатора). Но в селекторе запроса мы можем выбрать любой элемент только по его имени, будь то h1, h2, h3 или Идентификатор like(#title) или класс like(.btn)

<h1 class = "header" id = "first-head">Follow me for more such informative blogs</h1>

Здесь мы можем стилизовать и манипулировать элементом h1 тремя способами;

document.querySelector("h1").style.color = "red"
//Here we select the element with its tag name
//This changes color of element to Red
document.querySelector("#first-head").style.color = "Blue"
//Here we select the same element with its ID
//This changes color of element to Blue
document.querySelector(".header").style.color = "Green"
//Here we select the same element with its class name
//This changes color of element to Green

Это все для этого блога. Читайте, учитесь и оставляйте свои важные отзывы, чтобы я мог улучшить свои будущие блоги. Будет еще одна часть этого блога. Так что следите за обновлениями для этого.

Спасибо!


Также опубликовано здесь


Оригинал
PREVIOUS ARTICLE
NEXT ARTICLE