Становятся ли элементы дерева DOM с идентификаторами глобальными переменными?

работая над идеей для простой оболочки HTMLElement я наткнулся на следующее для Internet Explorer и хром:

для данного HTMLElement с идентификатором в дереве DOM можно получить div, используя его идентификатор в качестве имени переменной. Так что для div, как

<div id="example">some text</div>

на Internet Explorer 8 и Chrome вы можете сделать:

alert(example.innerHTML); //=> 'some text'

или

alert(window['example'].innerHTML); //=> 'some text'

значит ли это каждый элемент в DOM дерево преобразуется в переменную в глобальном пространстве имен? И это также означает, что можно использовать это в качестве замены для getElementById метод в этих браузерах?

4 307
javascript dom global-variables uniqueidentifier getelementbyid

4 ответа:

предполагается, что "именованные элементы" добавляются как очевидные свойства

350

как упоминалось в предыдущем ответе, это поведение известно как именованный доступ к объекту окна. Значение name атрибут для некоторых элементов и значение id атрибут для всех элементов доступны в качестве свойств глобального доступно для элементов формы (ввод, выбор, и т. д.).

  • геккон и Webkit неправильно не делают <a> теги доступны через их .
  • геккон неправильно обрабатывает несколько именованных элементов с одинаковым именем (он возвращает ссылку на один узел вместо массива ссылок).

    • и я уверен, что есть больше, если вы попытаетесь использовать именованный доступ на крайних случаях.

    как уже упоминалось в других ответов использовать document.getElementById чтобы получить ссылку на узел DOM по его id. Если вам нужно получить ссылку на узел по его name атрибут use document.querySelectorAll.

    пожалуйста, пожалуйста, не распространяйте эту проблему с помощью именованного доступа на вашем сайте. Так много веб-разработчиков потратили время, пытаясь отследить это волшебный поведение. Нам действительно нужно принять меры и заставить механизмы рендеринга отключить именованный доступ в стандартном режиме. В краткосрочной перспективе это сломает некоторые сайты, делающие плохие вещи, но в долгосрочной перспективе это поможет продвинуть веб вперед.

    Если вам интересно, я расскажу об этом более подробно в своем блоге - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/.

    39

    вы должны придерживаться getElementById() в этих случаях, например:

    document.getElementById('example').innerHTML

    IE любит смешивать элементы с nameиID атрибуты в глобальном пространстве имен, так что лучше быть явным о том, что вы пытаетесь сделать.

    18

    Да, они делают.

    протестировано в Chrome 55, Firefox 50, IE 11, IE Edge 14 и Safari 10
    в следующем примере:

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="im_not_particularly_happy_with_that">
    Hello World!
  </div>
  <script>
    im_not_particularly_happy_with_that.innerText = 'Hello Internet!';
  </script>
  <!-- Looking at you W3 HTML5 spec group ಠ_ಠ -->
</body>
</html>

    http://jsbin.com/mahobinopa/edit?html, выход

    3