Почему document.getElementById не нужен?

1) Вопрос 1Почему document.getElementById не нужен?

Следующий пример работает без использования "document.getElementById ('MyId')". Почему это и нормально ли пропустить «document.getElementById ('myId»)?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Javascript question</title> 

<script> 
window.onload = function(){ 
    myId.style.color = 'red'; 
} 
</script> 

</head> 
<body> 

<div id=myId> 
<p>Make this color red.</p> 
</div> 

</body> 
</html>

2) Вопрос 2

I обычно хранят браузер-объекты для уменьшения DOM обхода (смотри пример ниже). Будет ли больше обход DOM, если я не сохраню идентификатор в переменной или это какая-то переменная?

window.onload = function(){ 

var myId = document.getElementById('myId'); /* stored ID that will be used multiple times */ 

myId.style.color = 'red'; 
}

Спасибо!

источник

2014-09-19 user1087110

jsfiddle: http://jsfiddle.net/feeela/2zr5Lgfo/ – feeela

Когда на веб-странице требуется много таких элементов, может быть, не стоит хранить все. –

Следующий пример работает без использования "document.getElementById ('myId')". Почему это и нормально ли пропустить «document.getElementById ('myId»)?

Поскольку браузеры свалка ссылки на все элементы с id в глобальное пространство имен, используя id в качестве имени переменного. (Технически, как свойство имя глобального объекта; свойства глобального объекта - это глобальные переменные.) Я настоятельно рекомендую , а не, полагаясь на него и используя вместо этого document.getElementById (или аналогичный). Глобальное пространство имен действительно переполнено, и есть много других вещей, которые могут конфликтовать.

Например, если у вас есть

<div id="foo">...</div>

function foo() { 
}

Тогда просто используя foo в коде даст вам функцию, а не элемент.

Точно так же, если у вас есть

<input type="text" id="name">

... и использовать name в вашем коде, вы получите имя окна (строка), а не HTMLInputElement для id="name" поля.

Эта работа по сбросу ссылок на элементы в глобальное пространство имен покрывается в §5.2.4 of the HTML5 spec, что в этом случае в значительной степени документирует, что браузеры сделали в течение длительного времени.

Будет ли больше обход DOM, если я не сохраню идентификатор в переменной или это какой-то вариант, который уже есть?

Это уже глобальная переменная, указанная выше, поэтому нет дополнительного обхода DOM. В глубоко вложенной функции может быть больше обхода цепочки объектов, но вряд ли это будет серьезной проблемой.

Но опять же, я настоятельно рекомендую не полагаться на автоматических глобалов элементов. Вместо этого оберните свой код в функции определения области видимости (как показано на рисунке) и получите целевые элементы с getElementById, querySelector, querySelectorAll и т. Д., В зависимости от ситуации. Если вы полагаетесь на автоматические глобальные переменные, шансы в конечном итоге вас укусят конфликт. Но это мнение.

Обратите внимание, что глядя элементы с getElementById является действительно очень быстро, поэтому ссылки кэширования обычно не требуется по соображениям производительности (вы можете сделать это по другим причинам, например кодирования удобства). Выглядеть вещи с селекторами (querySelector, querySelectorAll) немного медленнее, но я бы сказал, что беспокоиться об этом, когда/если есть проблема. :-)

источник

2014-09-19 10:34:45

У меня есть особый образец того, как я пишу идентификаторы и функции. В моем случае конфликта не будет. Также я никогда не буду делиться своим кодом с другими программистами. Если все современные браузеры поддерживают технику, и они планируют продолжать это делать, я не вижу причин не проверять ее. Но, большое спасибо за ваш ответ! – user1087110

Я обнаружил технику случайно несколько недель назад и использовал ее с тех пор. Он работает со всеми браузерами, включая мобильные браузеры. – BlackMagic

Почему document.getElementById не нужен?

ответ

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