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

 

Recent Posts

Пошаговая инструкция Импорта данных из Excel в MySQL через phpMyAdmin

Этот практический урок поможет вам перенести данные из вашего Excel-файла (с некоторыми конкретными столбцами) в…

20 часов ago

Распространенные мифы и заблуждения о пиве: восстанавливаем справедливость

Пиво – один из самых популярных напитков, который наряду с чаем и кофе известен во…

1 день ago

Уроки JavaScript — Краткие функции на замену большому объемному коду

Довольно часто у программистов возникает соблазн написать какую-нибудь обширную функцию, которая должна решать определенную задачу.…

7 дней ago

Зачем и как просыпаться раньше

Дискуссии вокруг этой темы вас, вероятно, уже утомили. Но я в данной статье постараюсь показать…

1 неделя ago

Уроки JavaScript — Шпаргалка для разработчиков по работе с консолью в браузере

Консоль браузера (также известная как консоль JavaScript или веб-консоль) — это мощный инструмент для разработчиков,…

1 неделя ago

Бернард Шоу

Никогда не указывайте на ошибки, если не знаете, как их исправить Джордж Бернард Шоу  

1 неделя ago