Метод querySelectorAll()

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

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

Function clickme(){

Var list=document. querySelectorAll("#main p");

List[0].onclick=showalert;

}

Function showalert(){

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

}

Window. onload=clickme;

Группа селекторов, описанная в методе querySelectorAll() в листинге 4.5, вернет все элементы <p> в HTML-документе из листинга 4.3, которые являются потомками элемента <div>. После выполнения первой строки в массив list будут помещены два значения: ссылки на первый и второй элементы <p>. Поскольку ключевые слова любых автоматически создаваемых массивов начинаются с 0, в следующей строке мы ссылаемся на первый найденный элемент, добавив 0 в квадратных скобках.

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

Листинг 4.6. Выбор всех элементов, обнаруженных с помощью querySelectorAll()

Function clickme(){

Var list=document. querySelectorAll("#main p"); for(var f=0; f<list. length; f++){ list[f].onclick=showalert;

}

}

Function showalert(){

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

}

Window. onload=clickme;

В листинге 4.6 вместо того, чтобы выбирать только первый найденный элемент, мы зарегистрировали обработчик событий onclick для всех найденных подходящих элементов, применив для этого цикл for. Теперь все элементы <p> внутри <div> будут реагировать на щелчок на них отображением небольшого окна с сообщением.

Метод querySelectorAll(), как и querySelector(), может содержать одну или несколько групп селекторов, разделенных запятыми. Эти и предыдущие методы можно комбинировать, для того чтобы точно выбирать нужные элементы. Например, в листинге 4.7 мы выполняем ту же задачу, что и в листинге 4.6, но используем как querySelectorAll(), так и getElementById().

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

Function clickme(){

Var list=document. getElementById("main").querySelectorAll("p");

List[0].onclick=showalert;

}

Function showalert(){

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

}

Window. onload=clickme;