Информация о getElementById

Эта страница создана, чтобы собрать информацию и фичи работы с getElementById в одном месте. Если Вы вдруг найдете еще интересный хинт --- напишите на iliakan сабака gmail.com и я обязательно его сюда включу.

document.getElementById - метод объекта document. Он возвращает ссылку на узел документа, которую можно использовать для изменения свойств и обращения к методам узла.

Например,

<input type="text" name="your_name" id="your_name_input" />

<script type="text/javascript">
  var name_input = document.getElementById('your_name_input')
  name_input.value="Medved"
</script>

Если искомого элемента не существует, то getElementById возвращает null. Если есть много элементов с таким ID (что само по себе неправильно), то, в зависимости от браузера, getElementById может возвращать совершенно разные результаты. Например, первый элемент с этим ID.

Оптимизация скорости

Javascript - далеко не самый быстрый язык, и getElementById - не исключение. Хотя эта функция и является самой эффективной для поиска элемента, она включает дорогостоящие обращения к DOM, объектной модели документа.

Поэтому иногда в целях оптимизации вызовы кешируют:

var cache = {}
function nodeById(id)
{
  return cache[id] ? cache[id] : cache[id] = document.getElementById(id);
}

Т.е, если значение cache[id] и так есть - оно возвращается, а если нет, то присваивается и возвращается.

У этого примера есть недостаток: переменная cache засоряет глобальную область видимости. Чтобы этого не происходило, можно, например, обернуть ее в замыкание:

(function() {
  var cache = {}
  window.nodeById = function(id) {
    return cache[id] ? cache[id] : cache[id] = document.getElementById(id);
  }
})()

После выполнения такого кода, никакая функция кроме nodeById, не сможет получить доступ к кешу, и ненароком испортить его значение. Если Вы не поняли, что такое "обернуть в замыкание", и как вообще работает последний скрипт - ничего страшного, это уже advanced javascript, в зависимости от getElementById :)

Минусы кеша

• Эффект сильно зависит от модели браузера. Ряд браузеров имеет собственный кеш getElementById
• Страница может меняться, например, javascript. При этом кеш автоматически устаревает, и поддерживать его - проблема

Плюсы кеша

• Быстрый доступ к элементу в наихудшем случае.
  Т.е, если у пользователя Opera, то все и без кеша будет летать, но если IE6 или даже IE5 - кеш поднимет производительность до приемлемого уровня

Дополнительные удобства

Некоторые javascript-библиотеки для упрощения работы с узлами документа используют спец. функцию $(), превращающую список аргументов в узлы:

// prototype
function $() {
  var elements = []

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}
...
$('your_name_input').value='Papa'

Или та же функция, но для единственного аргумента

function $(id) {
  if (typeof id == 'string') {
    return document.getElementById(id)
  }
  return id
}

Такая функция очень удобна, т.к избавляет от необходимости различать id элемента и сам элемент. Просто каждый раз перед тем, как начать реальную работу с узлом, нужно пропускать его через эту функцию.