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

Первым делом: знакомство с вашим объектом HTML-элемента

Каждый объект HTML-элемента имеет множество связанных с ним свойств и методов, которые поначалу могут показаться ошеломляющими. Мы можем изменить стиль, текстовое содержимое, узлы и т. д. В нашем случае мы найдем нужные нам свойства и будем использовать их по своему усмотрению. Полный список можно найти в Документации по веб-API MDN. Я буду обновлять эту главу по мере того, как мы будем практиковаться в различных свойствах и методах.

Сильный старт

Чтобы начать работу с DOM Manipulation, сначала нам нужно создать файлы index.html и main.js и связать их. Код может выглядеть так:

index.html

<body>
  <h1>DOM Manipulation using JS</h1>
  <p class="description">DOM Manipulation makes everything imagined possible</p>
  <p id="contact">Javascript</p>
  <script src="./main.js"></script>
</body>

и в main.js

window.addEventListener('load', () => {
  // target our elements
  const header = document.querySelector('h1')
  const description = document.querySelector('.description')
  const contact = document.querySelector('#contact')
  // and querySelectorAll targets all elements of the same target
  // we have two p tags in out html
  const paragraphs = document.querySelectorAll('p')
})

ПРИМЕЧАНИЕ. Лучше обернуть наши JS-коды в window.addEventListener(‘load’, handler), чтобы наш JS не выполнялся, пока наш HTML-документ не будет готов.

Чтение и изменение содержимого

в нашем main.js, если мы зарегистрируем наш заголовок в консоли, мы найдем что-то вроде этого:

теперь, если мы зарегистрируем header.textContent, то:

как мы видим, это то же самое, что и содержимое нашего тега заголовка. Теперь, чтобы изменить содержимое элемента, мы можем просто переназначить текстовое содержимое. В нашем файле main.js:

header.textContent = 'Updating the heading using JS'

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

Обновление стиля элемента

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

header.style.fontSize = '3rem'

и мы видим, что стиль документа HTML обновлен:

давайте изменим несколько других свойств.

header.textContent = 'Updating the heading using JS'
header.style.fontSize = '4rem'
header.style.color = '#ff0000'
header.style.textAlign = 'center'
header.style.fontVariant = 'small-caps'

и по результату:

Обратите внимание, что мы можем использовать любые стили CSS, используя Javascript. Не то чтобы все свойства назывались так же, как CSS с верблюжьим регистром.

Несколько интересных идей для практики

  • Измените цвет фона вашего сайта. СОВЕТ: ориентируйтесь на родительский тег или тег body.
  • Изменить семейство шрифтов
  • Динамическое обновление текстового содержимого при вводе

Читать предыдущую главу: Управление DOM: введение в DOM

Удачного кодирования.