Непосредственно ссылки на HTML-элементы

Возможный дубликат:
IE/Chrome: существуют ли здесь элементы дерева дерева DOM? почему window [id] === document.getElementById(id)

Я только что встретил что-то в html/javascript, который немного меня удивил. При получении ссылки на элемент html, используя javascript, я всегда использовал ранее jQuery или document.getElementById. Также кажется, что вы можете напрямую обращаться к элементу, просто используя его id. Может кто-то объяснить нюансы этого? Я googled, но не могу найти ссылку на эту способность, каждый сайт говорит о getElementById.

Ниже показан фрагмент страницы.

<html>
<head>
</head> 
<body>
    <input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" />
    <input type="button" value="direct" onclick="blah.innerText = 'direct';" />
    <div id="blah"></div>
</body>

Большое спасибо заранее.

Ответы

Ответ 1

Возможность выбора элементов на странице на основе их [id] является "функцией" с раннего JavaScript (DOM lvl 0 или 1 methinks, похоже, не может найти источник).

К сожалению, это темпераментная особенность. Что произойдет, если вы:

<div id="window"></div>

или

<div id="document"></div>

Еще лучше, что здесь происходит?

<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>

Таким образом, нюансы вызова элемента, основанного на нем [id], просто таковы:

Не используйте его.

Это непротиворечиво и не гарантирует получение дальнейшей поддержки.

Лично я хотел бы, чтобы эта "функция" прошла путь document.all. Это вызывает больше проблем, чем решает, а document.getElementById, хотя и многословно, имеет смысл и понятно.

Ответ 2

Использование getElementById более гибкое и читаемое. Например, это не сработает:

<input type="button" value="direct" onclick="document.innerText = 'direct';" />
<div id="document"></div>

по очевидным причинам, но это будет:

<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" />
<div id="document"></div>

и другим разработчикам стало понятно, что происходит на самом деле.

Ответ 3

Я не считаю это документированной функцией и, похоже, не работает в Firefox (6), но, похоже, работает в последней версии Chrome, а также IE 6-9.

Я бы не стал полагаться на него, и просто рассмотрел бы его как одну из особенностей особенностей браузеров.