Уроки 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

Какие бесплатные конструкторы сайтов будут лучшими для разработки сайта

Начинающим веб-мастерам бывает сложно выбрать конструктор сайтов, который бы полностью устроил их по соотношению удобства… Read More

28/07/2021

Владимир Высоцкий

Я понимаю, как смешно Искать в глазах ответ, В глазах, которым все равно, Я рядом… Read More

25/07/2021

Брюс Ли

Нет такой фразы "Я не могу!" Сумел один, смогут и другие. Не смог никто -… Read More

21/07/2021

Иоганн Вольфганг фон Гете

К чему душе беззлобье, широта уму, Руке готовность действовать и воля, Когда в горячке зла… Read More

12/07/2021

Какой бойлер использовать для кухни

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

08/07/2021

Али ибн Абу Талиб

Лучше хранить молчание до тех пор, пока не спросят, чем говорить до тех пор, пока… Read More

07/07/2021