Поиск по querySelector

@Kerduk · Регистрация: 24.04.2018

Студворк — интернет-сервис помощи студентам

Чем отличается обращение через body и querySelector('body')
Какой способ лучше использовать 1 или 2 ?

JavaScript
1
2
let a = document.querySelector('body').style.display ="none";  // 1 способ
let b = document.body.style.display ="none";                   // 2 способ

@Aivee · 23.09.2021, 18:33

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

@klyapa · 23.09.2021, 18:45

Сообщение от Kerduk

Какой способ лучше использовать 1 или 2 ?

В первом способе идёт обращение к методу объекта document, который тратит время на поиск элемента body, а во втором, обращение напрямую к свойству body объекта document. Второй способ более "быстрый". Можете сами посмотреть время в консоли бровзера:

JavaScript
1
2
3
4
5
6
7
console.time("querySelector");
let a = document.querySelector('body').style.display ="none"; // 1 способ
console.timeEnd("querySelector");
 
console.time("document.body");
let b = document.body.style.display ="none"; // 2 способ
console.timeEnd("document.body");

@Kerduk · 23.09.2021, 19:39 **[ТС]**

В первом способе идёт обращение к методу объекта document, который тратит время на поиск элемента body, а во втором, обращение напрямую к свойству body объекта document. Второй способ более "быстрый". Можете сами посмотреть время в консоли бровзера:

klyapa, а второй способ разве это не глобальное обращение к элементу?
Просто мне сказали на форуме, что глобальное обращение лучше не использовать.

@kalabuni · 23.09.2021, 20:46

Сообщение от Kerduk

Просто мне сказали на форуме, что глобальное обращение лучше не использовать.

а вы всегда всех дураков слушаетесь, как это вам еще никто не посоветовал выпрыгнуть из окна?

на странице может быть любое количество любых тегов, за исключением тегов <!doctype>, <head>, <title> и <body> --они должны быть в единственном экземпляре, и именно поэтому только к ним можно и нужно обращаться напрямую

@Kerduk · 24.09.2021, 01:59 **[ТС]**

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

@amr-now · 24.09.2021, 05:33

Сообщение от Kerduk

Пожалуйста, приведите мне пример этого самого глобального обращение к элементу.

Вот это что:

Обычно в литературе для доступа к элементу рекомендуют использовать document.getElementById("id_").
Например, изменить ширину элемента:

HTML5
1
<div id=scroller><div>

Я пишу:

JavaScript
1
document.getElementById("scroller").width = "100px";

Но часто встречаю исходники, где к элементу обращаются по id непосредственно так:

JavaScript
1
scroller.width = "100px";

Насколько это правильно и допустимо?

Это не правильно и не допустимо.
Надо всегда писать:

JavaScript
1
2
let scroller = document.getElementById("scroller");
scroller.width = "100px";

или заведомо при однократном обращении к элементу:

JavaScript
1
document.getElementById("scroller").width = "100px";

Иначе будет конфликт распознавания объявленных и необъявленных переменных. Нужно, чтобы все переменные были объявленными.

@Kerduk · 24.09.2021, 10:14 **[ТС]**

amr-now, спасибо большое!
А глобальное обращение к элементу бывает только по id?

@amr-now · 24.09.2021, 10:20

Kerduk, наверно.

Кстати, обращение к document.body, document.forms, document.images и т.д. вполне нормально.
Никакой путаницы с переменными не будет. Это штатные свойства объекта document.

-------
Можете посмотреть лично все свойства объекта document:

JavaScript
1
console.dir(document);

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: показать затраченные материалы за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В качестве. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@Aivee 1 / 1 / 0 Регистрация: 27.08.2014 Сообщений: 29
	23.09.2021, 18:33
	Полагаю что через querySelector ф-я будет искать элементы пока не дойдет до body, а через прямое обращение идет сразу туда куда нужно. Наверное разницы особо нет, но это не точно, почитайте о том как работает querySelector 0

@Kerduk 23 / 7 / 0 Регистрация: 24.04.2018 Сообщений: 411
	24.09.2021, 01:59 [ТС]
	kalabuni, так мне говорили опытные разрабы с большим стажем, что у профессионалов за глобальное обращение убивают на месте без суда и следствия. Напрямую - вы имеете в виду глобальное обращение? Я так и не могу понять, как выглядит глобальное обращение. Пожалуйста, приведите мне пример этого самого глобального обращение к элементу. 0

@Kerduk 23 / 7 / 0 Регистрация: 24.04.2018 Сообщений: 411
	24.09.2021, 10:14 [ТС]
	amr-now, спасибо большое! А глобальное обращение к элементу бывает только по id? 0

Поиск по querySelector

Решение