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

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


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

Автор: Александр Бурцев