Манипуляции с DOM

Манипуляции с DOM

Наши соц. сети: instagram, fb, tg

Как вы, возможно, знаете, HTML и CSS не являются языками программирования в истинном смысле этого слова. HTML - это язык разметки, который используется для создания и отображения элементов веб-страницы. CSS - это язык таблиц стилей, который используется для написания правил, которые будут определять стиль и внешний вид указанных элементов. Хотя CSS допускает некоторое псевдопрограммирование с помощью псевдоклассов, он по-прежнему не считается языком программирования. Более того, функциональность CSS для управления элементами во время выполнения ограничена.

Здесь на помощь приходит Javascript. Первоначально он создавался как язык программирования для веб-браузеров, позволяющий нам управлять кодом HTML и CSS. Веб-браузер взаимодействует с Javascript, предоставляя ему среду для выполнения команд. Эта среда позволяет нам получать доступ к дополнительным функциям браузера и элементам HTML-страницы.

window

В корне браузера у нас есть объект window - глобальный объект, который предоставляет методы для управления окном браузера.


console.log(window.innerHeight);

// Возвращает высоту окна браузера


function doSomething () {

// какое-то действие

}


window.doSomething ();

// Поскольку window является глобальным объектом,

// мы можем использовать его также для вызова функций


window разделен на три компонента, а именно объекты DOM, BOM и Javascript. В этой статье мы подробнее рассмотрим, как работает DOM.

DOM (Document Object Model)

DOM - это контейнер для всех объектов, которыми можно управлять на веб-странице. Можно думать обо всех HTML-элементах на веб-странице как о коллекции вложенных объектов, для которых корневым объектом является DOM. Доступ к DOM осуществляется в коде с помощью ключевого слова document. Итак, мы можем получить доступ к ❮body❯ HTML-страницы, вызвав document.body

document.body; // объект ❮body❯

Теперь предположим, что нам нужно получить доступ к какому-либо другому элементу страницы. Например, к элементу ❮p❯. Прежде чем мы перейдем к этому, нам нужно сначала понять, как элементы на веб-странице сопоставляются с соответствующими им объектами в DOM. Возьмем пример простой страницы:

 
❮! DOCTYPE HTML❯
    ❮html❯
     ❮head❯
        ❮title❯Заголовок❮/title❯
      ❮/head❯
      ❮body❯
        ❮p id = "paragraph-1" class = "class-1"❯Абзац❮/p❯
        ❮ul❯Список❮/ul❯
          ❮li class = "class-1"❯Элемент 1❮/li❯
          ❮li❯Элемент 2❮/li❯
          ❮li class = "class-1"❯Элемент 3❮/li❯
        ❮/ul❯
      ❮/body❯
    ❮/html❯

DOM обрабатывает каждый элемент HTML на указанной выше странице как узел. Существует 12 различных типов узлов. Однако пока мы рассмотрим только 4 из них.

document: корневой узел, расположенный на самом верху DOM

Узлы элеменов: узлы, соответствующие HTML-тегам на странице

Текстовые узлы: узлы, содержащие внутреннее текстовое содержимое тегов

Комментарии: хотя они не видны на странице, они доступны для DOM

DOM обладает древовидной структурой. Следовательно, теги ❮head❯ и ❮body❯ считаются дочерними узлами тега ❮html❯.

Доступ к узлам довольно прост, поскольку есть встроенные функции, позволяющие добраться до любого из них.

  

document.documentElement; // узел тега ❮html❯

document.head; // узел тега ❮head❯

document.body; // узел тега ❮body❯


Если мы хотим выбрать любой другой узел, например, тег ❮p❯, DOM предоставляет нам дополнительные методы поиска:

document.getElementById

Этот метод позволяет нам выбрать элемент на веб-странице, который содержит определенный id.

  document.getElementById ("paragraph-1"); // элемент с идентификатором paragraph-1

document.querySelector

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

     

document.querySelector ("li"); // первый узел ❮li❯


document.querySelectorAll

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

  

document.querySelectorAll ("li.class-1"); // все узлы тега ❮li❯ класса сlass-1


document.getElementsByTagName

Этот метод позволяет нам выбрать все элементы определенного тега


document.getElementsByTagName ("ли"); // все узлы с тегом ❮li❯


document.getElementsByClassName

Этот метод позволяет выделить все элементы

Управление элементами

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


 ❮! DOCTYPE HTML❯
    ❮html❯
      ❮head❯
        ❮title❯Заголовок❮/title❯
      ❮/head❯
      ❮body❯
        ❮p id = "paragraph-1"❯Абзац❮/p❯
      ❮/body❯
    ❮/html❯

Допустим, мы хотим изменить текст первого абзаца. Мы можем сделать это, используя свойство innerHTML

document.getElementById ("paragraph-1"). innerHTML = "отредактированный абзац"

Мы также можем поменять стиль абзаца:

 

document.getElementById("paragraph-1").style.border = "1px solid red";


Приятного кодинга!