В нашей предыдущей главе: Управление 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
Удачного кодирования.