Получение элементов: querySelector и querySelectorAll

В работе с A-Frame управление и манипуляция объектами сцены осуществляется через стандартные методы DOM, так как сцена A-Frame строится на основе HTML с кастомными элементами <a-entity>, <a-scene>, <a-box> и другими. Основные инструменты для получения элементов — это методы querySelector и querySelectorAll.

querySelector

Метод querySelector позволяет получить первый элемент в DOM, который соответствует заданному CSS-селектору. В контексте A-Frame это может быть любой элемент сцены, например:

const box = document.querySelector('#myBox');

Здесь #myBox — это идентификатор <a-box> в сцене. После получения элемента можно работать с его атрибутами или компонентами A-Frame:

box.setAttribute('position', { x: 1, y: 2, z: -3 });
box.setAttribute('color', '#FF0000');

Особенности:

  • Возвращается только первый найденный элемент.
  • Если элемент не найден, возвращается null.
  • Селекторы могут быть любыми CSS-селекторами: по классу (.className), по тегу (a-box), по атрибуту ([color="#FFF"]).

Пример использования селектора по классу:

const interactive = document.querySelector('.interactive');
interactive.setAttribute('visible', true);

querySelectorAll

Метод querySelectorAll возвращает все элементы, соответствующие селектору, в виде коллекции NodeList. Это удобно для массовых изменений нескольких объектов сразу:

const boxes = document.querySelectorAll('a-box');
boxes.forEach(box => {
  box.setAttribute('material', 'opacity', 0.5);
});

Особенности:

  • Возвращается статический NodeList, который не обновляется при динамическом добавлении новых элементов.
  • Можно использовать любые CSS-селекторы, включая сложные комбинации.

Пример с комбинированным селектором:

const redBoxes = document.querySelectorAll('a-box[color="#FF0000"]');
redBoxes.forEach(box => box.setAttribute('scale', { x: 2, y: 2, z: 2 }));

Работа с компонентами и атрибутами

В A-Frame каждый объект имеет набор компонентов, таких как position, rotation, material, geometry. После получения элемента через querySelector или querySelectorAll можно напрямую изменять эти компоненты:

const sphere = document.querySelector('#sphere');
sphere.setAttribute('position', { x: 0, y: 3, z: -5 });
sphere.setAttribute('material', { color: '#00FF00', wireframe: true });

Для получения текущего значения компонента используется метод getAttribute:

const currentPosition = sphere.getAttribute('position');
console.log(currentPosition.x, currentPosition.y, currentPosition.z);

Примеры сложных селекторов

  1. По вложенности:
const innerBox = document.querySelector('a-scene a-entity#aParentBox a-box');
  1. По атрибуту:
const transparentElements = document.querySelectorAll('[material*="opacity:0.5"]');
  1. По комбинации идентификатора и класса:
const specialBox = document.querySelector('#box1.special');

Производительность и рекомендации

  • Для одиночного объекта предпочтительнее использовать querySelector.
  • Для множества элементов, особенно при массовых изменениях, использовать querySelectorAll с последующим forEach.
  • Если элементы часто динамически создаются или удаляются, стоит использовать делегирование или повторный вызов querySelectorAll, так как NodeList статичен.
  • Оптимально присваивать элементам идентификаторы (id) или уникальные классы для быстрого доступа, минимизируя сложные селекторы.

Интеграция с событиями

Полученные элементы через querySelector или querySelectorAll можно связывать с событиями A-Frame:

const box = document.querySelector('#interactiveBox');

box.addEventListener('mouseenter', () => {
  box.setAttribute('color', '#FFFF00');
});

box.addEventListener('mouseleave', () => {
  box.setAttribute('color', '#FF0000');
});

При работе с коллекциями:

const interactiveBoxes = document.querySelectorAll('.interactive');
interactiveBoxes.forEach(box => {
  box.addEventListener('click', () => {
    box.setAttribute('position', { x: 0, y: 5, z: -10 });
  });
});

Итоговые ключевые моменты

  • querySelector — получение одного элемента по CSS-селектору.
  • querySelectorAll — получение всех элементов, подходящих под селектор.
  • Манипуляция компонентами и атрибутами осуществляется через setAttribute и getAttribute.
  • Для динамических сцен и массовых изменений стоит использовать forEach по NodeList.
  • Сложные селекторы позволяют обращаться к вложенным и специфичным объектам сцены.

Эти методы обеспечивают полный контроль над элементами A-Frame, позволяя создавать интерактивные сцены и динамически изменять их содержимое в реальном времени.

Оглавление