В общей сложности можно выделить пять основных методов:
- getElementById;
- getElementsByClassName;
- getElementsByTagName;
- querySelector();
- querySelectorAll.
Давайте разберем каждый из них более подробно.
getElementById
Позволяет выделить конкретный html-элемент по значению атрибута "id".
Пример:
getElementsByClassName
Позволяет выделить один или несколько html-элементов по значению атрибута "class".
Пример:
В данном случае мы выделяем третий элемент в списке при помощи синтаксиса массивов (двойка в квадратных скобках). Напоминаю что нумерация элементов начинается с 0, а не с 1.
getElementsByTagName
Выделяет все элементы, обладающие указанным именем тега.
Пример:
querySelector() и querySelectorAll
Позволяет выделить один или несколько html-элементов по значению css-селектора.
Пример:
Можно подумать что два последних метода ничем не отличаются друг от друга, однако это не так. Первый метод возвращает только первый узел элемента, а второй возвращает коллекцию узлов со всеми совпавшими вариантами.
---------------------------------------------------------------------------------------------------
Для того чтобы выполнить одну и туже команду несколько раз, т.е. сделать так чтобы все пункты списка стали синими, к методу необходимо добавить цикл.
Рассмотрим конкретный пример.
Здесь мы использовали простейший цикл for: создали счетчик (var i=0), условие при соблюдении которого цикл будет выполняться и операцию обновления.
Спасибо за внимание!
Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.
