2010-12-01 6 views
6

Этот вопрос может показаться глупым, но в чем разница между доступом к элементу (с id «someId») с использованием document.getElementById («someId») Vs. просто набрав someId?document.getElementById ("someId") Vs. someId

например:

document.getElementById("someId").style.top = "12px"; 

против

someId.style.top = "12px"; 

Вот пример кода http://jsfiddle.net/pRaTA/ (я обнаружил, что он не работает в Firefox)

+2

Проблема со второй формой - это столкновения имен. Например, в вашем jsfiddle измените «abc» на «document» и посмотрите, что происходит в каждом случае. – Alohci 2010-12-01 09:52:49

+0

См. Возможные дубликаты [являются ли эти элементы дерева элементов DOM глобальными переменными здесь?] (Http://stackoverflow.com/q/3434278/1048572) – Bergi 2014-02-10 19:02:16

ответ

5

The diffe что в то время как someId работает в некоторых браузерах, document.getElementById("someId") фактически соответствует стандарту W3C.

0

В стороне клиента сценариев, мы делаем документ .getElementById, чтобы получить элемент obj на веб-странице. Чтобы извлечь конкретный элемент из методов DOM и его свойств &, вам необходимо использовать метод getElementById. В Jquery вы можете просто сделать var objX = $ ('# id')

Где, как записывать идентификатор прямо, не будет выполнять эту работу. Поскольку вы извлечете элемент obj из DOM без прохождения документа. document.getElementById вытащит информацию о элементе из документа. Надеюсь, это имеет смысл.

+0

Я спросил об этом, потому что второй метод действительно работает. – kwa 2010-12-01 06:45:57

2

Объявление идентификатора объекта DOM не означает, что оно доступно как глобальная переменная во всех браузерах. Единственный кросс-совместимый способ добиться этого - сначала сделать.

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

Edit: Я сделал тестовый код, который проверяет, что WebKit браузеры, кажется, делают идентификатор доступен как вар без первого объявления его. Согласно this, IE также покажет это поведение.

  • Firefox: объект/неопределенный
  • Safari: объект/объект
  • Chrome: объект/объект
  • IE: объект/объект (непроверенный)

Код:

<html 
    <head> 
    </head> 
<body> 
    <div id="foo"></div> 
    <script type="text/javascript"> 

    alert("getElementById: "+typeof document.getElementById("foo")); 
    alert("as a var: "+typeof foo); 

    </script> 
</body> 
+0

Да, он не работает в firefox. Кстати, он также работает в IE! http://jsfiddle.net/pRaTA/ – kwa 2010-12-01 06:58:14

+2

Захватывающий. Я никогда не знал, что браузеры webkit сделали это. Вот потенциальный дубликат http://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here – 2010-12-01 06:59:21

+0

Спасибо за эту ссылку! Забавно, я действительно думал, что я буду смеяться за задание этого вопроса! :) – kwa 2010-12-01 07:38:31

0

Использование только someId - это старый способ выбора элемента (я думаю, что это было реализовано IE). document.getElementById является стандартным, который работает во всех браузерах.

Учитывая сценарий, который поддерживает только старые браузеры IE. document.getElementById еще более надежный и читаемый. Надежность, если вы используете все числа для идентификаторов.

, например:

input element id="123" 

document.getElementById('123').value; // this one works 
123.value; // this one doesn't 
0

Доступ к элементам как свойства глобального объекта имени идентификатора элемента (ваш второй пример) является удобство, который возник в IE и был скопирован Safari и Chrome. Это очень плохая идея, и вы не должны ее использовать. Основная проблема - коллизии имен (например, элементы с вполне достоверными идентификаторами, такими как «предупреждение» или «документ»).

document.getElementById(), с другой стороны, является давно установленным стандартом DOM и, кроме some idiotic IE flaws, является надежным. Всегда используйте его, предпочитая другую форму.

Смежные вопросы