Как выполнить getElementById у результата getElementById?

Question

[DTX]

Есть дом-элемент A. Нужно выполнить A.getElementById('id');
Т.е. нужен способ провернуть document.getElementById('id1').getElementById('id2').
Какие есть варианты?

Answer 1

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

document.querySelector('#id1').querySelector('#id2')

Вариант, который предложил Константин Китманов:
document.querySelector('#id1 #id2')
Он даёт абсолютно тот же результат, но вы поняется немного быстрее.

Comments

[Константин Китманов]

Почему не document.querySelector('#id1 #id2')?

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

Константин Китманов: не подумал :) Я предпочитаю не делать сложные селекторы, чтобы потом было проще вносить правки.

[Константин Китманов]

Алексей Уколов: это ж не оптимально. Да и весь этот чейнинг попахивает jQuery:) Но сложные селекторы зло, согласен.

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

Константин Китманов: я готов положить эти десять милисекунд на алтарь читаемого кода :)

[Константин Китманов]

Алексей Уколов: на мой вкус как раз читабельность и страдает:) Ну и да, DOM-операции — это как раз то, отчего «javascript тормоз».

[DTX]

Константин Китманов: >Почему не document.querySelector('#id1 #id2')?
Потому что вопрос был такой)

>Ну и да, DOM-операции — это как раз то, отчего «javascript тормоз».
Т.е. jQuery быстрее для DOM?

[Константин Китманов]

DTX: вопрос может и был такой, только это эквивалентные конструкции, разница в том, что мой вариант находит элемент в один проход.

> jQuery быстрее
Что заставило вас сделать такой вывод? Нет, не быстрее. Любое обращение к DOM — затратная

[Константин Китманов]

Курва! Затратная операция, их должно быть как можно меньше.

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

Вообще, интересно на досуге покопаться действительно ли это так. Вставка в DOM или просчёт лэйаута я понимаю, дорогие операции - но поиск элемента-то не должен быть сильно дорогим, кмк.

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

И jsperf опять приказал долго жить...

[Константин Китманов]

Алексей Уколов: ну поиск конечно дешевле относительно вставок и репейнтов/лэйаутов, но все равно на порядки дороже любого чистого JS (поэтому react такой быстрый, поэтому концепция virtual dom так популярна).
Мне, если честно, лень писать тест и выяснять. Может там и правда копейки, о которых нет смысла говорить в данном конкретном случае, но я уверен, что принцип корректен:)

Answer 2

[bromzh]

А смысл? ID всё равно уникальный, зачем искать среди дочерних элементов. За ненадобностью, метод поиска по ID оставили только у document.

Comments

[Максим Бабичев]

Может быть он пишет свой jQuery с блэкджеком и...

[DTX]

Максим Бабичев: да в ангуляре у меня есть только native-элемент. Вылезать за пределы компонента не хочется, да и нет гарантии, что ID в документе может быть только один.

[bromzh]

DTX: Ну вот для таких случаев есть классы. Их и искать можно у дочерних, и они могут быть не уникальны. Да и document в ангуляре тоже есть. И какая разница, от какого элемента искать?

[Максим Бабичев]

DTX: должны быть гарантии, что ID только один. Это же ID, он для этого и был придуман.