Удобные сокращения при работе с 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";
}

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

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