Метод querySelector()

Этот метод возвращает первый элемент, соответствующий описанной в круглых скобках группе селекторов. Селекторы объявляются в кавычках с использованием синтаксиса CSS, как в листинге 4.4.

Листинг 4.4. Использование метода querySelector()

Function clickme(){

Document. querySelector("#main p:first-child").onclick=showalert;

}

Function showalert(){

Alert(‘Tbi на мне щелкнул!’);

}

Window. onload=clickme;

В листинге 4.4 мы заменили метод getElementsByTagName, который использовали раньше, новым методом querySelector(). Селектор в этом методе ссылается на первый элемент <p>, являющийся потомком элемента, имеющего атрибут id со значением main.

Ранее уже говорилось, что данный метод возвращает только первый найденный элемент, и вы наверняка заметили лишний псевдокласс first-child. Метод querySelector() в нашем примере вернет только первый элемент <p> внутри <div>, являющийся, разумеется, его первым потомком. Назначение данного примера — показать, что querySelector() распознает все допустимые селекторы CSS, так что теперь JavaScript, как и CSS, предоставляет важные инструменты для обращения к любому элементу в документе.

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

Замените код в файле mycode. js кодом из листинга 4.4 и откройте HTML-файл с кодом из листинга 4.3 в своем браузере, для того чтобы проверить работу querySelector().