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

Поиск по id

Если в коде страницы элементу задан атрибут id , то элемент можно найти по id. Это самый простой способ. Поиск элемента производится с помощью метода getElementById() глобального объекта document.

document.getElementById (id)

Параметры:

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

Создадим страницу, добавим на неё элемент и зададим ему id , а в скрипте найдём этот элемент:

HTML код:

JavaScript:

var block = document.getElementById("block"); console.log(block);

Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.

Так как посик по id - это самый простой и удобный способ, часто используют именно его. Если с каким-то элементом нужно работать в скрипте, то в коде страницы этому элементу устанавливают атрибут id , даже если он не был установлен ранее. И находят элемент по id.

Поиск по классу

Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.

document.getElementsByClassName (класс)

Параметры:

класс - класс элементов, которые нужно найти

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

Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:

HTML код:

JavaScript:

Теперь найдены только те элементы, которые расположены в блоке.

Поиск по тэгу

Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.

document.getElementsByTagName (тэг)

Параметры:

тэг - тэг элементов, которые нужно найти

Найдём все тэги p , которые есть на странице:

var p = document.getElementsByTagName("p"); console.log(p);

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

Поиск по селектору

Существуют методы querySelector() и querySelectorAll() , которые находят элементы соответсвующие определённому селектору. То есть, будут найдены элементы, к которым был бы применён стиль, если бы он был указан такому селектору. При этом, наличие такого селектора в стиле страницы совсем не обязательно. Эти методы никак не связаны с CSS. Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым в коде страницы. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.

document.querySelector (селектор)

document.querySelectorAll (селектор)

Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод querySelector() . Но при использовании этого метода нужно учитывать, что в дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

HTML код:

Данные методы также могут искать элементы не во всём документе, а внутри конеретного элемента.

В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием других селекторов.

Соседние элементы

Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.

элемент.previousElementSibling

элемент.nextElementSibling

Найдём элемент, следующий за блоком:

Дочерние элементы

Свойство children содержит массив с дочерними элементами.

элемент.children

Найдём дочерние элементы блока.

Объектная модель документа - DOM - это не что иное, как древовидная структура, состоящая из тегов, существующих в HTML документе.

У нас есть все эти элементы HTML , расположенные рядом друг с другом, которые мы хотим получить, а затем прочитать данные в них или изменить. Есть много способов найти эти тэги, так как они расположены в древовидной структуре. В этой статье вы узнаете, как использовать две встроенные функции JavaScript , такие как querySelector и querySelectorAll для поиска html тэгов.

Метод querySelector

Для понимания сути функционирования методов querySelector и querySelectorAll посмотрите на следующий HTML:

В этом примере у нас есть один div с идентификатором main и четыре вложенных в него элемента div и img , каждый из которых имеет значение класса pic-container и profileImage соответственно. В следующих нескольких разделах мы применим функции querySelector и querySelectorAll на этом HTML-коде и посмотрим, что произойдет.

querySelector

Функция querySelector работает следующим образом:

Var element = document.querySelector("< CSS selector >");

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

Смотря на HTML из нашего предыдущего примера, если мы хотим получить доступ к div , чей идентификатор является main , нужно написать следующее:

Var element = document.querySelector("#main");

Поскольку main является идентификатором, синтаксис селектора для его получения будет #main . Аналогично, селектор класса pic-container :

Var element = document.querySelector(".pic-container");

Возвращается первый блок div , значение класса которого является pic-container . Остальные элементы div со значением класса pic-container просто игнорируются.

Синтаксис селекторов для данной функции не создавался специально, потому можно использовать точный синтаксис, который вы использовали бы для селекторов в таблице стилей!

На этом все, а в следующей статье я расскажу про следующую функцию querySelectorAll .

Как Вы знаете - в разработке объёмного JS-приложения где используется популярнейшая библиотека jQuery наступает момент когда остро встаёт проблема производительности. Все силы кидаются на амбразуру профайлера, каждый вызов скрупулёзно исследован, каждый функционально нагруженный кусок реализации обнюхан со всех сторон и выправлен. Но беда поступает не с той стороны, откуда её ждут 90% разработчиков. Селекторы - Как много в этом слове.
Давайте разберёмся - как работает эта магия и почему поиск DOM-элементов может стать причиной падения производительности приложения.

Как jQuery разбирает селектор В самой библиотеке для поиска элементов используется движок Sizzle у которого есть ряд особенностей. Их мы и рассмотрим.querySelectorAll() В новых браузерах появилась отменная функция querySelectorAll() и querySelector(), которая умеет производить поиск элементов используя возможности браузера (в частности - используемые при просмотре CSS и назначении свойств элементам). Работает данная функция не во всех браузерах, а только в FF 3.1+ , IE8+ (только в стандартном режиме IE8) , Opera 9.5+ (?) и Safari 3.1+ . Так вот Sizzle всегда определяет наличие данной функции и пытается любой поиск выполнить через неё. Однако, тут не без сюрпризов - для успешного использования querySelectorAll() наш селектор должен быть валидным.
Приведу простой пример:
Два приведенных селектора практически ничем не отличаются и вернут одинаковый набор элементов. Однако первый селектор вернёт результат работы querySelectorAll(), а второй - результат обычной фильтрации по элементам.
$("#my_form input")
$("#my_form input") Разбор селектора и поиск Если не удалось использовать querySelectorAll(), Sizzle будет пытаться использовать обычные функции браузера getElementById(), getElementsByName(), getElementsByTagName() и getElementByClass(). В большинстве случаев их хватает, но (sic!) в IE < 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
В общем случае Sizzle разбирает селектор справа налево. Для иллюстрации данной особенности приведу несколько примеров:
$(".divs .my_class")
Сначала будут найдены элементы.my_class, а потом отфильтрованы только те, которые имеют.divs в родителях. Как мы видим - это довольно затратная операция, причём использование контекста не решает проблемы (о контексте мы поговорим ниже).
Как я уже сказал - в большинстве случаев Sizzle будет разбирать селектор справа налево, но не в случае использования элемента с ID:
$("#divs .my_class")
В таком случае селектор поведёт себя как ожидалось и сразу будет взят элемент #divs для использования в виде контекста.Контекст Второй параметр, передаваемый вместе с селектором в функцию $() называется контекстом. Он призван сузить круг поиска элементов. Однако - при разборе контекст пристыкуется к началу селектора, что выигрыша совершенно не даёт. Выигрышная комбинация использования контекста - валидный селектор для querySelectorAll(), так как данная функция может быть применена не только от имени document, но и от элемента. Тогда селектор с контекстом образно трансформируется следующую конструкцию:
$(".divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(".divs"); // при наличии возможности использовать querySelectorAll()

В данном примере, если невозможно использовать querySelectorAll(), Sizzle будет фильтровать элементы простым перебором.
Ещё одно замечание о контексте (речь не о селекторах) - если вторым параметром в селектор для функции.live() передать объект jQuery - событие будет ловиться на document(!), а если DOM-объект - то всплывать событие будет только до этого элемента. Такие тонкости я стараюсь не запоминать, а использую .delegate() .

Фильтры и иерархия элементов Для поиска вложенных элементов можно воспользоваться следующим селектором:
$(".root > .child")
Как мы знаем - разбор селектора и поиск начнётся со всех.child элементов на странице (при условии, что querySelectorAll() недоступно). Такая операция достаточно затратна и мы можем трансформировать селектор так:
$(".child", $(".root")); // использование контекста не облегчит поиск
$(".root").find(".child"); // а зачем нам перебор всех элементов внутри.root?
$(".root").children(".child"); // самый правильный вариант

Однако, если есть необходимость использовать фильтры по каким-либо атрибутам (:visible, :eq и т.д.) и селектор выглядит так:
$(".some_images:visible")
то фильтр будет применён в последнюю очередь - т.е. мы опять отступаем от правила «справа налево».

Итоги

• По возможности используйте правильные селекторы, подходящие под querySelectorAll()
• Заменяйте подчинённости внутри селекторов на подзапросы (.children(...) и т.д.)
• Уточняйте контекст селектора
• Фильтруйте как можно меньший готовый набор элементов

Быстрых селекторов Вам в новом году! Всех в наступившим!

По мотивам мастер-класса

Задача, которая очень часто встает перед начинающими разработчиками javascript это выбор элемента на веб-странице по его атрибуту id.

Предположим, что у нас есть код на странице.

Содержимое блока.

Каким образом можно выбрать элемент с id=»elem» и произвести с ним ряд каких-то действий?

Здесь есть несколько вариантов решения проблемы. Давайте их сейчас рассмотрим.

Вариант 1. Воспользоваться методом Javascript getElementById.

Есть способ, как можно обратиться к элементу по его id используя «чистый» javascript код, без использования каких-то сторонних библиотек. Этот способ заключается в использовании метода ggetElementById(«id_элемента»). Таким образом мы обращаемся к нужному нам элементу по его id.

Давайте посмотрим, как это работает на простом примере.

Содержимое блока. alert(document.getElementById("elem").innerHTML);

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

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

Давайте теперь посмотрим, как можно решить эту задачу другим способом.

Вариант 2. С помощью библиотеки Jquery.

Второй вариант выбора элемента по его id, заключается в использовании библиотеки Jquery. На практике, в современных скриптах, чаще всего пользуются именно этим способом. Он намного более удобен и легче запоминается.

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

$("#elem")

Здесь elem – имя, которое содержится в атрибуте id.

Т.к. мы будем использовать стороннюю библиотеку Javascript, которая называется Jquery, то эту библиотеку нужно сначала подключить.

Добавляется она в разделе , одним из способов, как это можно сделать, нужно добавить следующую строку кода:

Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.

Содержимое блока. alert($("#elem").html());

Сам скрипт, как и в предыдущем примере, должен находиться ниже по коду того элемента, с которым вы хотите взаимодействовать.

Таким образом, мы с вами разобрали два способа, как можно выбрать элемент на веб-странице по его атрибуту id и взаимодействовать с ним. Выбирайте тот способ, который вам подходит, и используйте его на практике.

JavaScript метод document .querySelector() возвращает первый элемент в документе (объект Element ), соответствующий указанному селектору, или группе селекторов. Если совпадений не найдено, то возвращается значение null .

Обращаю Ваше внимание на то, что не допускается использование CSS псевдоэлементов в качестве значения селектора для поиска элементов, в этом случае в качестве возвращаемого значения всегда будет значение null .

Если вам необходим список всех элементов, соответствующих указанному селектору или селекторам, то используйте для этого метод querySelectorAll() .

Метод .querySelector() также определен в объекте Element , по этой причине он может быть вызван на любом элементе, не только на объекте document . Элемент на котором он вызывается будет использован в качестве корневого элемента для поиска.

Поддержка браузерами JavaScript синтаксис: document .querySelector(selectors ) selectors - String Спецификация Selectors API Level 1 Значения параметров Параметр Описание

selectors

Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов. Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS , то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты ("\" ). Поскольку обратная косая черта также является специальным символом (escape ) в JavaScript , то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Исключения Пример использования Использование JavaScript метода document.querySelector() Нажми меня Первый блок Второй блок Третий блок function myFunc() { let firstBlock = document .querySelector(".block "), // выбираем элемент с классом block first = document .querySelector(".first, .block "), // находим первый элемент из заданных селекторов second = document .querySelector("div:nth-of-type(2) "), // выбираем каждый элемент div, который является вторым дочерним элементом своего родительского элемента third = document .querySelector("div:last-of-type "); // находим каждый элемент div, который является последним из элементов своего родительского элемента firstBlock .style.background = "black "; // изменяем цвет заднего фона у элемента first .style.color = "red "; second .style.color = "green "; // изменяем цвет текста у элемента third .style.color = "blue "; // изменяем цвет текста у элемента }

В этом примере мы с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию myFunc() , которая с использованием JavaScript метода document .querySelector() выбирает следующие элементы:

• Первый элемент с классом block в документа и устанавливаем черный цвет заднего фона найденному элементу.
• Первый элемент из заданных селекторов (элемент с классом first , элемент с классом block ) и устанавливаем красный цвет текста найденному элементу. В этом случае будет выбран первый найденный элемент из заданных селекторов.
• Элемент , который является вторым дочерним элементом своего родительского элемента и устанавливаем найденному элементу зеленый цвет текста.
• Элемент , который является последним из элементов своего родительского элемента и устанавливаем найденному элементу синий цвет текста.

Результат нашего примера.