Меню
- Главная
- Скрипты
- Шаблоны сайта
- Книги
- Фон для сайта
- Анимированные картинки
- Лохотроны и кидалово в интернете
- Статьи
Партнерские программы:
- Заработок на соцсетях
- разные


Реклама




Информация
Обо всех новых добавлениях на сайт вы можете узнать подписавшись в
_________
Яндекс.Метрика


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



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


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


Назад
Автор: Александр Бурцев
Сайт автора: fastcoder.org