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

1) Вопрос 1

Следующий пример работает без использования "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

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

window.onload = function(){

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

myId.style.color = 'red';
}

Спасибо!

Ответ 1

Следующий пример работает без использования "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 спецификации HTML5, которая в этом дело в значительной степени документирует, что браузеры сделали в течение длительного времени.

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

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

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

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