Зачем использовать getElementById, если можно получить элемент через переменную с именем, равным значению атрибута id?

Собственно век живи век учись!



window.onload = function() {
  div_1.onclick = function() {
    div_2.value = div_1.innerHTML;
  }
}
TEXT





Работает во всех браузерах которые есть только на компе!

Вопрос: Зачем объявлять переменную типа как

var mydiv = document.getElementById("mydiv");


и потом к ней обращаться, если обращение можно сделать сразу к mydiv? Поясните!

UPD: @ling жду Ваш персональный визит! Ваши знания были испытаны собственным js кодом не раз)
    

Ответы

Ответ 1

Для начала - немного теории.  Эту ИМХО глупость, в свое время, начал IE, остальным
браузерами это не поддерживалось, после - это стало поддерживаться хромом, в настояще
же время - такого рода поведение утвержденно html5 стандартом (да, и там кое-что чере
Ж, ну да не суть). Соответственно по поводу поддержки - это поддержка действительно на уровне.(за исключением того парадокса, что это не будет работать в старых не IE), более того - поддержка останеться и никуда она не денется, соответственно я не совсем понимаю - что правильного в ответе @Alex Silaev ?
Ну а теперь перейдем к практической части, такого рода элементы хранятся в глобальной области видимости, соответственно, например, может возникнуть ситуация, типа:

классно работает!11!


var hello = function(){ /* function code... */ }

hello.onclick = function(){ alert(this.innerHTML); }

Что в  таком случае произойдет я думаю понятно. Естественно кто-то может возразить
мол - если делать все акуратно, то все будет ок и я не отрицаю, нередко так все и будет
Но, мягко говоря - не всегда. Чем больше кода у вас будет - тем выше будет становитьс
вероятность поймать неприятный баг. Конечно если вы понимаете что глобальные переменны
зло и т.д. и т.п. - вы будете грамотно структуировать свой код, но, в таком случае 
элементы выбирать, тоже, будете по человечески. В противном случае - у вас идет жестка
привязка к структуре html, еще жоще чем при document.getElementById('someId'). На само
деле - все это выглядит как магия, соответственно просматривая код, банально, не понятн
- откуда взялся, например, этот hello, особенно очевидным это становиться тогда, когд
объемы кода становятся, хотя-бы 300+ строк. Допустим мне нужно изменить этот id, я меня
его в DOM'e, ищу по скриптам где он используется, но я так и не нахожу т.к. (уж будьте уверены) - искать я буду именно $ в случае jq, prototype и getElementById в случае "pure" JS, сейчас я пишу не в контексте себя лично, а в контексте человека который будет смотреть написанный вами код, вашего напарника или того, кто заменяет вас на работе. И, на самом деле - это нормально, знают это далеко не все и, даже в книгах, где об этом упомянаеться - кратко пишут мол, смотрите вот так вот можно делать, немного описывают как это работает и потом - можно, но не нужно и во всех книгах дальше пишется что-то типа - соответственно в нашей книге мы так делать не будем. Конечно я понимаю, что далеко не всегда в книгах все пишут правильно (особенно это справедливо с книгами по javascript'у), но то, что об этом написано далеко не во всех книгах и то, что, например, вы - до сиих пор не знали этого, по моему, уже говорит о том что никому это не нужно. оффтоп - и подтверждает поговорку "меньше знаешь - лучше спишь" =) 
Еще хотел бы добавить, к описаному выше, неудобство в плане парной работы с верстальщиком или, что, в данном случае, намного хуже - с другим JS разработчиком.
Вообщем кратко резюмируя - так делать, в абсолютном большинстве случаев, мягко говор
- не рекомендую (не только я), причины (не выдумывая чего-то сложного, а, в реальной жизни, поверьте мне - будут проблемы поинтереснее) описаны выше. Что мы выигрываем? Да, собственно, практически ничего мы и не выигрываем...
Еще одним "типа" аргументом может быть то, что это быстрее - возможно это и так
но getElementById работает настолько быстро (причем абсолютно везде), что руководствоваться этим - не серьезно. Но даже, если вы хотите, то сделайте хотя-бы как-то так:
function getElementById(id) {
    return window[id] !== undefined && window[id].id === id
                                 ? window[id] : document.getElementById(id);
}

Собственно подобный подход решает проблему "стирания", но, в то-же время, невилизируе
краткость записи. С другой стороны - эта функция будет нормально работать везде и в DOM, если элемент сохранился в window - не полезет. Еще раз акцентирую ваше внимание - это экономия на спичках.
Парирую кусок UPD by @Антон Мухин по поводу id вида "div-id" - их легко и прост
можно достать вызовом window["div-id"], ничего браузер не вычисляет.
Постараюсь подвести очень краткие итоги - просто не используйте это, знайте для того, что-бы можно было понять как работает тот или иной javascript код, не более (ИМХО)
PS: 2 @northerner никто не говорит что они там дураки, они хотят сделать как лучше
По поводу javascript без getElementById - если в вопросе явно спрашивается, "как лучше getElementById или так?", какое отношение к вопросу имеет то, о чем писали вы? Либо я чего-то недопонимаю, либо вы не внимательно читали вопрос.
UPD: Время уже все показало, если бы это было-бы нужно это бы уже давно использовалос
бы в широких кругах, т.к. ничего подобного не наблюдается - это никому не нужно (верне
кому-то нужно раз принимают такие стандарты, но вот кому - я без понятия). Еще раз подчерну - речь именно о браузерном javascript'е, возможно, где-то, это удобно и практикуется большинством, тогда конечно - юзайте на здоровье (спасибо кэп).


Ответ 2

Обсуждение на StackOverflow и еще.

Это поведение IE, которое было потом скопировано другими браузерами, и упомянут
в стандарте HTML5. см. 5.2.4 Named access on the Window object.

Суть заключается в том, что в данном случае обращение идет к свойству объекта window
Другими словами, браузеры делают возможным доступ к элементам с указанным id через объек
window, который является глобальным контекстом, поэтому window['id'] можно и не писать, достаточно id, ну за исключением невалидных id с точки зрения имени переменной (да, минусы и проч.)...

Такая практика никому особо не нравится и идет речь, чтобы если не убрать данно
поведение из стандарта, то сделать доступным хотя бы только для quirks mode, а standard mode не трогать.

Consider making the global scope pollution by names/ids quirks-only


Ответ 3

Ответ просто в правильности подхода.
Никто не гарантирует, что такой метод "проживет" или будет поддерживаться и дальше. А getElementById будет.
Это примерно тоже самое, что и дорогу на красный свет переходить. Ведь можно, н
никто не гарантирует, что после этого с вами ничего не произойдет. (Хотя в России может произойти и на зеленый). Но суть не в этом, а в том, что подходы разные и вероятность несчастного случая тоже.
Тем более, если вдруг не будет поддержки этой штуки, то вам приедтся весь код просматриват
и все менять. А если не будет поддержки getElementById, то я просто ее переобъявлю и она у меня появится :)
И собственно ответ на вопрос - скорее отстанете от жизни, если будете его использовать :)


Ответ 4

А вы попробуйте дать элементу

TEXT

Как думаете, что будет пытаться сделать браузер при выполнении div-1?
Правильно! Он будет пытаться от переменной div вычесть 1! Как в таком случае обойтись без выражения

var mydiv = document.getElementById("div-1");

???
UPD1
Еще можно добавить! Бывают элементы, создаваемые во время выполнения. Ну им, стал
быть, ID даются динамически. Было бы глупо для таких случаев не динамически ставить переменные вот так:

my_dynamic_id.onclick = function() {
    //Бла-бла-бла
}

Лучше, же, наверное, так: 
// начало какого-нибудь цикла обработки
//....
//получаем ID из какой-нить функции, предоставляющей id элементов
var my_id_i = document.getElementById(getNextDynamicId());
my_id_i.onclick = function() {
    //Бла-бла-бла
}

Тут как получается такая ситуация когда можно обращаться непосредственно к элемент
my_div напрямую? Просто при создании этого DIV-элемента, появляется и глобальная переменная my_div. Но она перезапишется, объяви вы глобально переменную с таким же именем, как ID элемента:



Тут, в первом случае, выведется "АГА!!!!", во втором что-то вроде "HTMLDivElement".
Вот и получается, что ваше приложение может по ошибке или недосмотру сломаться из-за нечаянного объявления переменной с таким же именем, как ID, как у вашего элемента.
Так что же вышло? Браузер сначала объявил глобальную переменную my_div, которую мы успешно переписали!
Ну вот как-то так. Даже мой, приведенный тут случай, можно считать "подводным камнем".


Ответ 5

Отвечу в ответ на свой вопрос в споре ответов и комментариев отозвавшихся...
Суть: Я всегда использую нативный js в рамках своих проетов, которыми занимаюсь только я.
@Alex Silaev пожалуй ваш ответ пока лучший но учитывая часть вашего ответа:

если не будет поддержки
getElementById, то я просто ее
переобъявлю и она у меня появится

я напишу некий умный php скрипт котрый преобразует все нужные вхождения в нужны
местах и отформатирует js скрипт под все мега новшества дабы не ковыряться в километровом js коде! На данный момент я не вижу причин не использовать тот метод который я привел в примере! Снова ословлюсь в рамках своего проекта!
@Антон Мухин открою вам интересную функцию:
function $(id) { return document.getElementById(id); }

и далее можите использовать строку из моего примера в вопросе как
$("div_1").onclick = function() //...

Теперь скажу что в рамках своего проекта я чотко знаю что нужно использовать нижнее подчеркивание а не дефис, это вопервых.
Во вторых я такую мишуру редко использую и в основном в css клсасах! Что относитс
к программному коду и названиях ID происходит следующим образом var nodeName или id="idName" давно стараюсь исключать мишуру и лишние знаки!