20.07.2023 в 12:48

Как манипулировать HTML и CSS с помощью JavaScript

В JavaScript HTML DOM (объектная модель документа) представляет структуру и содержимое HTML-документа в виде древовидной структуры. В нем каждый элемент, атрибут и текстовый узел в документе HTML представлен как узел в дереве DOM.

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

Понимание элементов DOM

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

commons.wikimedia.org/wiki/File:DOM-model.svg using the CC Attribution-Share Alike 3.0 Unported license

Как видно из этой иллюстрации, Document — это объект верхнего уровня, представляющий HTML-документ. Он служит точкой входа для доступа к дереву DOM и предоставляет методы для навигации и управления документом.

Element представляет элемент HTML в дереве DOM. Элементы имеют свойства, которые позволяют вам получать доступ и изменять атрибуты, стили и содержимое. Вы можете выбирать элементы, используя различные методы, такие как:

getElementById
getElementByTagName
getElementsByClassName
querySelector
querySelectorAll

Node — это базовый класс для всех типов узлов в дереве DOM. Узлы могут быть элементами, текстовыми узлами, узлами комментариев и так далее. У них есть свойства и методы для общих операций, таких как доступ к родительским и дочерним узлам, управление содержимым узлов и т. д.

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

Как взаимодействовать с DOM с помощью JavaScript

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

Вот простой пример, который на самом деле делает что-то удивительное:

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation Example</title>
</head>
<body>
  <h1 id="myHeading">Hello, World!</h1>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    // Changing the contents and properties of HTML elements
    document.getElementById("myHeading").innerHTML = "New Heading";
    document.getElementById("myParagraph").style.color = "red";
    document.getElementById("myParagraph").textContent = "This is updated.";
  </script>
</body>
</html>

У нас есть документ HTML, содержащий элемент заголовка <h1> с идентификатором myHeading и элемент абзаца <p> с идентификатором myParagraph.

  <h1 id="myHeading">Hello, World!</h1>
  <p id="myParagraph">This is a paragraph.</p>

Код JavaScript в тегах <script> манипулирует этими элементами через DOM.

 <script>
    // Changing the contents and properties of HTML elements
    document.getElementById("myHeading").innerHTML = "New Heading";
    document.getElementById("myParagraph").style.color = "red";
    document.getElementById("myParagraph").textContent = "This is updated.";
 </script>

Код использует метод getElementById для выбора элементов по их атрибуту id. Затем он изменяет содержимое и свойства элементов, используя следующие методы манипулирования DOM:

innerHTML устанавливает содержимое HTML файла внутрь выбранного элемента.
style обращается к стилям CSS выбранного элемента. Мы устанавливаем цвет текста абзаца красным.
textContent устанавливает текстовое содержимое выбранного элемента. Мы обновляем текст абзаца на «Это обновленный абзац».

Когда мы загружаем документ HTML в веб-браузер, код JavaScript выполняется немедленно. Вы никогда не увидите исходный стиль HTML, а только «обновления», заказанные JavaScript. Текст заголовка будет «Новый заголовок», цвет текста абзаца будет красным, а содержание абзаца будет «Это обновлено».

Это демонстрирует, как JavaScript может взаимодействовать с DOM для динамического изменения содержимого и свойств элементов HTML на основе программной логики или взаимодействия с пользователем.

Как сделать ваши сайты более интерактивными

Вы также можете инициировать изменения HTML-страницы в ответ на действия пользователя. В этом примере мы определяем две функции JavaScript: showMessage и changeColor. Эти функции запускаются из элементов HTML с помощью атрибута onclick.

<!DOCTYPE html>
<html>
<head>
  <title>Triggering JavaScript Functions</title>
  <script>
    function showMessage() {
      alert("Button clicked!");
    }

    function changeColor() {
      document.getElementById("myDiv").style.backgroundColor = "red";
    }
  </script>
</head>
<body>
  <h1>Triggering JavaScript Functions Example</h1>
  
  <button onclick="showMessage()">Click me</button>
  <div id="myDiv" style="width: 200px; height: 200px; background-color: blue;"></div>
  <button onclick="changeColor()">Change color</button>
</body>
</html>

Функция showMessage отображает окно предупреждения с сообщением «Button clicked!» когда кнопка нажата.

    function showMessage() {
      alert("Button clicked!");
    }

Функция changeColor изменяет цвет фона элемента <div> с идентификатором myDiv на красный при нажатии кнопки.

    function changeColor() {
      document.getElementById("myDiv").style.backgroundColor = "red";
    }

HTML-код включает кнопку с атрибутом onclick, для которого установлено значение showMessage(), которое запускает функцию showMessage при нажатии кнопки.

Точно так же есть еще одна кнопка с атрибутом onclick, для которого установлено значение changeColor(), которое запускает функцию changeColor при нажатии кнопки.

  <button onclick="showMessage()">Click me</button>
  <div id="myDiv" style="width: 200px; height: 200px; background-color: blue;"></div>
  <button onclick="changeColor()">Change color</button>

При загрузке HTML-документа в веб-браузере вы увидите заголовок, две кнопки и цветной элемент <div>. Нажатие кнопки «Click me» вызовет функцию showMessage и отобразит предупреждение.

Нажатие кнопки «Изменить цвет» вызовет функцию changeColor и изменит цвет фона элемента <div> на красный.

Я уверен, что вы можете догадаться, что это лишь малая часть того, что вы можете делать с DOM. Вот более длинный список удобных для DOM элементов и методов, а также HTML-атрибутов, с которыми вы также можете поэкспериментировать:

document.getElementsById()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
innerHTML,setAttribute()
removeAttribute()
classList
classList.add()
class.List.remove()
class.List.toggle()
onClick
onMouseOver
onMouseOut

Подведение итогов

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

Источник:

How to Manipulate HTML and CSS Using JavaScript

#JavaScript #CSS #HTML

399

Войти на сайт