Каким образом лучше обращаться к элементу по id?

Question

[Джавараст Скриптович]

Есть три варианта обращения:
1) По старинке
document.getElementById('КакойТоАйДи').метод;

2) Символьно-экономно

'use strict'; // Включаем прогрессивизм
let ID=t=>document.getElementById(t); // Декоратор дефолтного сатанинского синтаксиса
...
ID('КакойТоАйДи').метод; // собсна, обращение к элементу

3) Магическо-неявное
КакойТоАйДи.метод;

1-й Вариант порождает километры кода, но самый быстрый (но это не точно)
2-й Сильно сокращает кол-во символов в файле, но не известно, на сколько быстр
3-й Предельно минималистичный, но просто неявный (это кастомный объект? переменная?)

Answer 1

[Stalker_RED]

const $ = selector => document.querySelectorAll(selector)
$('#hello .world').forEach(...)

Плюсы: коротко, работает не только с id но и с любыми css-селекторами
Минусы: может взорвать кому-то моск, потому что слишком похоже на jQuery :)
Но можно использовать другой символ

Часто бывает удобно сразу сконвертировать в массив

const $ = selector => Array.from(document.querySelectorAll(selector))

Comments

[Джавараст Скриптович]

Кстати да, константа тут уместнее будет.

Да-да, знаю про querySelector и прочих (можно для многого понаписать декораторов), но, насколько я знаю (читал статьи всяких бенчей), он примерно в 98 раз медленнее getElementById, поэтому, рациональнее его использовать при сложных конструкциях CSS-селекторов, ну или при jQuery головного мозга)

А вот за пример с массивом: Array.from() - огромнейшее спасибо, а то не представлял, как для классов написать подобный сокращатор

Ну и вообще, сильно ли ударяют по производительности такие конструкции?

[Stalker_RED]

M4mkin_pr0ger, поиск DOM элементов вообще довольно быстрая операция, и ссылки на элементы можно кешировать же.
Изменение DOM - намного медленнее, особенно если reflow/repaint происходит.

Не совсем понимаю что именно вы пытаетесь оптимизировать и не знаю что посоветовать.

[Джавараст Скриптович]

Дык просто получается, что при ID('КакойТоАйДи') будет вызываться вдобавок функция, прост интересно)

Answer 2

[Алексей Уколов]

2-й Сильно сокращает кол-во символов в файле, но не известно, на сколько быстр

Во-первых, если используется gzip, то разница в размере с первым вариантом незначительная. Во-вторых, сделайте бенчмарк и узнаете (спойлер алерт - это экономия на спичках).

Comments

[Джавараст Скриптович]

Файл, передаваемый браузерному клиенту, подразумевался)
Или есть альтернатива передачи голого js-файла клиенту, о которой я не знаю?

[Алексей Уколов]

Я, разумеется, тоже про него. И эту передачу нормальные программисты организуют с gzip-сжатием.

[Джавараст Скриптович]

Там используется файл .htaccess, так что требуется Апач, а если я ни Пхп-шик, ни Рубист, ни Питонист? Например, Нодист или, еще лучше, Голангист? Или и у них тоже есть чем поработать с gzip

[Алексей Уколов]

Естественно, есть - это же промышленный стандарт...

[Джавараст Скриптович]

Хорошо, благодарю за ответы и идеи, про которые я даже и не знал)

Answer 3

[tundramani]

если в документе такой id один то:
getElementById
или просто обращайся прямо:
id.remove()
браузер автоматически создает в глобальной области видимости переменную id

если таких id несколько то:
querySelectorAll( '#' + id)

и да, id может быть несколько - это не запрещено и иногда это удобно

Comments

[Stalker_RED]

Если в документе несколько одинактовых id, то это ошибка.
Конец истории.

[Станислав Некрасов]

Не может быть в документе несколько одинаковых id... Надо бы добавить кнопку пожаловаться на ответ по причине неправильности.

[Джавараст Скриптович]

Нет, хоть и не запрещено иметь одинаковые id, но это вообще будет хоронить смысл id, для этого есть class.
Либо я не знаю действительно существенной пользы от одинаковых id-шников на странице, либо такому грешнику явно уже построили 10-й круг в аду)

[tundramani]

id b class - это просто атрибуты элемента, свойства обьекта, как:

a='x', b='y'

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

[Джавараст Скриптович]

Ждем:

..существенной пользы от одинаковых id-шников на странице..

Аналогии - не аргумент. Продолжая мысль, идентификатором человека является не только имя, а вся группа ФИО + прочие идентификационные данные, а это гарантированно уникально.. вообщем продолжать можно долго, но этого уже хватит, что бы понять несостоятельность примера)

[tundramani]

M4mkin_pr0ger, в языке и в среде исполнения нет такого запрета
он только в головах у слепых фанатиков

аналогично такие фанатики всем запрещают именовать переменные на родном языке

[Джавараст Скриптович]

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

Мне только интересно, "слепые фанатики" чего? Я тоже, конечно же, люблю хаки(использования фич не по назначению в д.с.) на подобии :before и :after в CSS, но только те, что реально дают пользу, а не только усложняющие восприятие кода.

[tundramani]

фанатики - в смысле шаблонное мышление, слепая вера
но это сложная категория - для старшекласников

ид и класс это всего лишь свойства обьекта внутри которых строки - просто осознай эту простую истину

отличие только в том что традиционно браузеры для каждого ид создают глобальную переменную
ну дык это вообще можно и нужно не использовать

этот метод как бы намекает что нет никакого запрета на число ид:
querySelectorAll( '#' + id)
- после него метод getElementById выглядит как бы устаревшим
вот когда был только этот метод для ид - тогда это правило было верным

запрет множественного ид - это не запрет системы - это просто такой шаблон проектирования, ты не обязан ему следовать, если работаешь сам

а если ты в команде - то да, там всё по англицки и тд заморочки

я вот например вообще никогда не использую getElementById - имею право так жить

[Джавараст Скриптович]

id в таблице БД - это всего лишь поле, как и все, поэтому оно не должно иметь уникальные значения и автоинремент, это как бы устаревший прием, это все для глупых фанатиков с шаблонным мышлением, а я уникальный, со своими правилами, и нитакойкаквсе

- мне кажется, такое мышление свойственно закомплексованным подросткам...

P.S. я не про термин "фанатики" спрашивал)
Так фанатики чего, адекватного применения инструментов?)

[tundramani]

фанатик не чего а куда и почему - так корректнее ставить зачем вопрос

шаблонное мышление, слепое следование догмату - это признаки человека которого условно можно назвать фанатиком, ну или мракобесом, ну или маньяком в крайнем случае

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

но факт в том что люди всегда обычно массово заблуждаются
прям ваще всегда и веками

я увлекаюсь психиатрией - поэтому с удовольством разжевываю
и не тебе а другим читателям
если чек в 15 этого не понимает - то его уже не перепрограммировать

ты мне лучше скажи где этот запрет написан
я же тебе сказал - система этого не запрещает и позволяет это делать начиная с появления метода querySelectorAll
ты просто остался в прошлом веке ))

это можно и нужно использовать как тебе удобно

ты можешь решить что у тебя ни при каких режимах работы не появятся два одинаковых ид
и можешь не использовать это ограничение и ошибки не будет

я вот например принципиально не использую возможность множественного класса:
класс="класс1 класс2 класс3"
но система позволяет это делать - если тебе так удобно
я считаю что это не удобно для меня - а ты живи как хочешь
но ты же фанатик - тебе надо бороться за чистоту веры
тебе маньяку надо навязать окружающим свой правильный стиль работы

и еще некоторые люди просто не понимают как так могут быть люди которые не работают в команде по стандартному индустриальному шаблону

ошибка только в твоей голове
фанатики всегда сами себе создают проблему и героически борются с ней

[Джавараст Скриптович]

фанатик не чего а куда и почему - так корректнее ставить зачем вопрос

Какая-то антиграмматика, как можно иначе задать вопрос о принадлежности в д.с.? как его можно было понять по-другому, если перед "чего" не стоит запятой? почему принадлежность заменяется на направление и причинность(чего->куда+почему)? Вы, сударь, либо слишком тролль, либо слишком больше 90 градусов))

шаблонное мышление, слепое следование догмату - это пр..

Спасибо, я-т ведь не знал) Не думаете, что поисковые роботы будут ругаться за копипасту вики?)

адекватность - понятие мутное и относительное

Мм, эти философские крайности, коими можно нивелировать практически все термины) Люди до сих пор считают, что выглядят умнее, произнося их)

человек в состоянии бреда..

Опять никчемный пример

я увлекаюсь психиатрией

Как-то не очень эффективно увлекаетесь..
и почему-то, субъект и объект не на своих местах..

ты мне лучше скажи где этот запрет написан

Я говорил про запреты?) Кажется, кто-то любит утрировать - это признак истинного интеллектуала

ты просто остался в прошлом веке

"Ты до сих пор используешь id в БД, хе, да ты в прошлом веке, сейчас в моде делать спагетти, кои понимает только компьютер, шобы быть кичливым уникумом"

ты можешь решить что у тебя ни при каких режимах работы не появятся два одинаковых ид
и можешь не использовать это ограничение и ошибки не будет

Логика тут, конечно, эпичная

ошибка только в твоей голове
фанатики всегда сами себе создают проблему и героически борются с ней

Диагноз ясен) Хроническое маниакальное тщеславие.

Мальчик, видимо, подростковый разум еще не покинул твою головушку, тебе так и хочется создать себе повод, что бы лишний раз ввести себя в мнимое интеллектуальное величие, пройдет пару годиков и у тебя появится мысль о том, что ты фанатик своего анти-фанатизма, ну, может еще додумаешься до того, что если кто-то пользуется тем же, что и большинство, то он не обязательно стадный скот, либо фанатик убеждений)

Если есть действительно плюсы одинаковых id-шников, то почему нельзя было сразу поделится своим опытом? Их нет? Поэтому приходиться апеллировать к выдуманному тобой же "фанатизму"?)

Можно привыкнуть вилкой суп жрать и кичливо кукарекать на сторонников традиционных средств употребления пищи)