Главная » Полезные статьи » Язык JavaScript » Удобные сокращения при работе с DOM
Распечатать статью

Удобные сокращения при работе с DOM

Написание монстроподобных document.getElementById(), document.createElement() и других методом при работе с DOM в JavaScript можно избежать, используя функции с простыми и удобными именами.

Ситуация (встречается нередко): вам необходимо в функции получить доступ к нескольким HTML-элементам, изменив какое-то их свойство, например стилевое. Доступ, как это принято и удобно, получаем через идентификатор:

function changeStyle() { document.getElementById("firstId").style.display = "none"; document.getElementById("secondId").style.color = "green"; document.getElementById("thirdId").style.backgroundColor = "#FF0000"; document.getElementById("fourthId").style.fontWeight = "bold"; document.getElementById("fifthId").style.paddinпTop = "10px"; }

В этом простом коде вместо громоздкого document.getElementById можно воспользоваться простой и удобной функцией gebi (по первым буквам get Element By Id). Её код:

function gebi(id) { return document.getElementById(id); }

Функция занимается совершенно тем же самым, получает доступ к элементу по его идентификатору, но имеет более короткую и удобную форму записи:

function changeStyle() { gebi("firstId").style.display = "none"; gebi("secondId").style.color = "green"; gebi("thirdId").style.backgroundColor = "#FF0000"; gebi("fourthId").style.fontWeight = "bold"; gebi("fifthId").style.paddingTop = "10px"; }

Можно обыгрывать другие методы (и их комбинации со свойствами) для работы с DOM, сокращая их запись:

// Возвращает созданный по переданному имени элемент function ce(name) { return document.createElement(name); } // Возвращает дочерний объект style для элемента, id которого передается функции function styleId(id) { if (el = document.getElementById(id)) { return el.style; } else return false; } // Тогда изменение стилевых свойств предыдущего примера запишется так: function changeStyle() { styleId("firstId").display = "none"; styleId("secondId").color = "green"; styleId("thirdId").backgroundColor = "#FF0000"; styleId("fourthId").fontWeight = "bold"; styleId("fifthId").paddingTop = "10px"; }

 

Плюсы и минусы

[+] Сокращенный синтаксис и более читабельный код.
[-] Необходимо объявлять функции и помнить о них в процессе написания кода
Отсюда делаем вывод, что сокращения удобны, когда вы многократно используете тот или иной метод. Уменьшения производительности при этом не наблюдается.

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи