В чем разница между querySelector и getElementById?

Question

[Александр Кошелев]

Доброй ночи, сори что вопрос простой, но вот для понимания решил задать. Я вижу различие только в наименование и в #
В чем их разница, как это "различие" может вылиться на деле?

<p id="time">12-48</p>

var time = document.getElementById("time");
time.innerHTML = "уже не время";

var time = document.querySelector("#time");
time.innerHTML = "уже не время";

Answer 1

[HOPMNC EVER]

Тоже долго вкуривал про querySelector.
Вот как его легко понять:
К примеру, у тебя есть каскад из блоков или несколько блоков с одинаковым классом.

<ul>
  <li>Elem</li>
  <li>Elem</li>
  <li>Elem</li>
  <li>Elem</li>
</ul>

С помощью querySelector ты можешь добраться например до 2 или 3 элемента по css селектору, не добавляя лишних классов в HTML
Вот так

var a = document.querySelector('ul > li:nth-child(3)'); // берем 3 элемент li в списке ul. 
a.classList.add('active');  // добавляем класс active 3 элементу

Запись повторяет точь в точь как в css

ul > li:nth-child(3) {
  color: red;
}

Comments

[Александр Кошелев]

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

[HOPMNC EVER]

Это очень мощный инструмент, всегда используй его для обращения к DOM дереву. А про getElementById можно забыть, он устарел.
Пожалуйста! ))

[Александр Кошелев]

Andrey Lc, а можно тебя в скайпе добавить или еще где нибудь? чтоб иногда советоваться?

[HOPMNC EVER]

Александр Кошелев, пиши в телегу https://t.me/andreylc

[Александр Кошелев]

Andrey Lc, окей, спасибо большое

[Andrew]

Andrey Lc, а можно узнать, откуда инфа про

А про getElementById можно забыть, он устарел.

?

[HOPMNC EVER]

Andrew, не правильно выразился. Скорее редко используется.

[RAman Vedov]

С getElemenById то понятно, как тогда с getElementsByTegName? Тоже можно получить элемент из массива элементов не добавляя классы в html. Тоже не могу до конца понять их принципиальное отличие.

Answer 2

[Антон Иванов]

Вы не правы. querySelector позволяет найти элементы по ЛЮБОМУ допустимому селектору (как в CSS), а не только по ID.

Вообще, если бы чуть-чуть потрудились поискать, вы бы нашли вот это
https://learn.javascript.ru/searching-elements-dom

Comments

[Александр Кошелев]

спасибо большое, разобрался!