Изучение менее известных функций JavaScript, таких как getBoundingClientRect, IntersectionObserver и других.

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

1. Метод getBoundingClientRect(): положение и размеры DOM

Введение

getBoundingClientRect() — метод, используемый для получения информации о положении и размерах элемента. Он возвращает объект DOMRect, который предоставляет размер элемента и его положение относительно области просмотра. Этот объект содержит следующие свойства:

  • x: координата X левой границы элемента относительно области просмотра.
  • y: координата Y верхней границы элемента относительно области просмотра.
  • width: Ширина элемента.
  • height: Высота элемента.
  • top: расстояние от верхней части области просмотра до верхней границы элемента.
  • right: расстояние от левой части области просмотра до правой границы элемента.
  • bottm: расстояние от верхней части области просмотра до нижней границы элемента.
  • left: расстояние от левой части области просмотра до левой границы элемента.

Например, если мы хотим узнать, где находится элемент div на странице, мы можем использовать метод getBoundingClientRect. Пример кода выглядит следующим образом:

const box = document.getElementById(‘box’);
const rect = box.getBoundingClientRect();
console.log(rect.x);
console.log(rect.y);
console.log(rect.width);
console.log(rect.height);
console.log(rect.top);
console.log(rect.right);
console.log(rect.bottom);
console.log(rect.left);