Уроки 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 – это очень обширная тема, но надеемся, что информация из сегодняшнего урока станет для вас достаточной основой для дальнейшего обучения.

Теги: JavaScript