Уроки JavaScript – Основы манипулирования элементами в DOM

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

Элементы для манипулирования

В последнем уроке мы рассмотрели шаги, связанные с доступом к коллекции узлов DOM или отдельного узла DOM. Настоящая магия возникает, когда мы затем манипулируем определенными свойствами, что приводит к так называемому «поведению».

Каждый отдельный узел DOM имеет коллекцию свойств; большинство из этих свойств предоставляют основу для определенной функциональности. Например, если у вас есть элемент абзаца с идентификатором «paragraph», вы можете довольно легко изменить цвет этого элемента с помощью DOM API:

document.getElementById('paragraph').style.color = '#a9a9a9';

Чтобы доступнее проиллюстрировать природу объекта/свойства этого API, мы разберем его на составляющие, назначив каждый объект переменной:

var myDocument = document;
var myParagraph = myDocument.getElementById('paragraph');
var myParagraphStyles = myParagraph.style;
// а теперь мы можем присвоить новый цвет:
myParagraphStyles.color = '#a9a9a9';

Теперь, когда у нас есть ссылка на объект ‘style‘ в абзаце, мы можем добавить и другие стили CSS:

myParagraphStyles.padding = '7px 5px 3px 10px';
myParagraphStyles.backgroundColor = '#ccc';
myParagraphStyles.marginTop = '25px';

Здесь мы просто используем основные имена CSS свойств. Единственное что, CSS свойства, которые имеют тире (‘‘), в JavaScript пишутся в верблюжьем регистре. Поэтому вместо «background-сolor» мы используем «backgroundColor».

Пример ниже не будет работать и приведет к синтаксической ошибке, поскольку символ ‘‘ является оператором минус в JavaScript и, кроме того, не существует такого имени свойства:

myParagraphStyles.padding-bottom = '100px'; // вызовет синтаксическую ошибку

Свойства могут быть доступны в виде массива. Например, с этим знанием мы могли бы создать небольшую функцию для изменения любого стиля данного элемента:

function changeCssStyle(element, property, value) {
  element.style[property] = value; // обратите внимание на квадратные скобки, -- они используются для доступа к свойству
}
// эту функцию можно использовать, например, так:
var myParagraph = document.getElementById('paragraph');
changeCssStyle(myParagraph, 'color', '#a9a9a9');

Помимо свойства ‘style‘, существует множество других, которые вы можете использовать для манипулирования определенными аспектами узла/элемента.

Не все свойства относятся к примитивным типам данных (строки, числа, логические значения и т.д.); Например, свойство ‘style‘, которое мы обсуждали ранее, является объектом, в котором содержатся свои собственные свойства. Многие из свойств элемента будут доступны только для чтения (нельзя изменить их значение). Если вы попытаетесь напрямую изменить такое свойство, браузер выдаст ошибку вида Setting a property that has only a getter (установка свойства, которое имеет только геттер). Это то, что нужно знать.

Одной из общих задач, которые касаются манипулирования элементами DOM, является изменение содержимого внутри элемента. Для решения этой задачи есть несколько разных способов. Самый простой способ – использовать свойство innerHTML, например так:

var myParagraph = document.getElementById('paragraph');
// 1. замена текущего контента новым контентом:
myParagraph.innerHTML = 'Новый текст для этого <strong> подопытного</strong> абзаца.';
// 2. добавление к текущему контенту:
myParagraph.innerHTML += '... еще какой-то контент ...';

Узлы (ноды)

При создании контента через DOM API вам необходимо знать о двух разных типах узлов: узел элемента и текстовый узел. Существуют и другие типы узлов, но на данный момент мы рассмотрим только эти два.

Для создания элемента используется метод ‘createElement‘, а для создания текстового узла используется метод ‘createTextNode‘:

var myParagraph = document.getElementById('paragraph');
// добавляем контент к абзацу
var someText = 'Новый текст, который мы хотим добавить';
var textNode = document.createTextNode(someText);
myParagraph.appendChild(textNode);

Здесь мы используем метод ‘appendChild‘, чтобы добавить наш новый текстовый узел для абзаца. Это занимает немного больше времени, чем метод innerHTML, но все же важно знать оба эти способа.

А сейчас рассмотрим более сложный пример использования методов DOM:

var myParagraph = document.getElementById('paragraph');
// добавляем ссылку в абзац, и сначала создаем новый элемент ссылки:
var newLink = document.createElement('a'); // тег ссылки
newLink.href = 'https://sebweo.com'; // адрес для ссылки
newLink.appendChild(document.createTextNode('Посетите наш сайт')); // текст для ссылки
// после этого добавляем ссылку в абзац:
myParagraph.appendChild(newLink);

Манипулирование элементами в DOM – это очень обширная тема, но надеемся, что информация из сегодняшнего урока станет для вас достаточной основой для дальнейшего обучения.

Tags: JavaScript

Recent Posts

Отопление и горячая вода – когда нужно, а не когда соизволят включить

Тепло в доме и горячая вода в любое время для многих жителей многоквартирных и частных… Read More

19/09/2020

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020

Футбольный Инстаграм: что нового у топовых футболистов

Некоторые известные футболисты тщательно скрывают свои личную жизнь, а другие - активно постят фотографии с… Read More

24/08/2020