Front-end Pro. Занятие №22

1.

FRONT-END PRO
Занятие № 22

2.

Атрибуты и свойства
■ У HTML тегов есть атрибуты но они есть стандартные и не стандартные.
■ У JS есть методы для проверки и работы а HTML атрибутами
■ elem.hasAttribute(name) - проверяет наличие атрибута
■ elem.getAttribute(name) – получает значение атрибута
■ elem.setAttribute(name, value) – устанавливает значение атрибута
■ elem.removeAttribute(name) – удаляет атрибут
■ elem.attributes – свойство которое вернет коллекцию объектов с полями
name и value

3.

Атрибуты и свойства
■ Имена атрибутов регистронезависимы так что код getAttribute(’Name’)
отработает успешно
■ Присвоить атрибуту можно что угодно но оно будет преобразовано в строку
■ Все атрибуты видны в outerHTML
■ Коллекция attributes является перебираемой
■ Атрибуты и свойства JS синхронизированы. При изменении одного поменяется и
второе. Но есть и исключения, например input.value – синхронизируется
только в сторону атрибут => значение

4.

Атрибуты и свойства
■ DOM-свойства типизированы и и они не всегда являются строками, например
свойство input.checked – boolean, style – объект
■ Также существуют нестандартные, пользовательские атрибуты. Они используются
для передачи пользовательских данных из HTML в JS или чтобы как-то помечать
HTML-элементы для JS. Для того чтоб Ваш кастомный атрибут в каком-то
стандарте не стал вдруг встроенным им добавляют префикс data-* такие
атрибуты зарезервированные для нашего пользования. Такие атрибуты также
называются датаатрибуты

5.

Изменение документа
■ Кроме поиска и изменения также можно и создавать элементы:
document.createElement(tag) – создаст элемент с указанным тегом
document.createTextNode(str) – создаст текстовый узел
■ Созданный элемент не будет отображен пока мы не вставим его где-нибудь в
document:
node.append(…nodes or strings) – вставляет узлы или строки в конец
node
node.prepend(…nodes or strings) – вставляет переданное в начало
node
node.before(…nodes or strings) – вставляет переданное до node
node.after(…nodes or strings) – вставляет переданное после node
node.replaceWith(…nodes or strings) – заменяет node переданным

6.

Вставить html строку
■ insertAdjacentHTML/Text/Element(where, html) – универсальные
методы по вставке.
■ Первый параметр – это специальное слово указывающее куда по отношению к
elem производить вставку. Значения должно быть одно из следующих:
beforebegin – вставить html непосредственно в elem
afterbegin – вставить html в начало elem
beforeend – вставить html в конец elem
afterend – вставить html непосредственно после elem
■ Второй параметр – это HTML-строка которая будет вставлена
■ Text/Element – вставляет текст или элемент

7.

Работа с узлами
■ node.remove() – удалит узел
■ Если нам необходимо переместить узел то нет необходимости его удалять, все
методы вставки автоматически удалят узел со старого места
■ cloneNode(true || false) – клонирует элемент. Передав true мы
сделаем глубокую копию элемента(со всеми атрибутами и дочерними
элементами)

8.

Классы и стили
■ className – это свойство узла которое соответствует class. Такой синтаксис
обусловлен тем class зарезервированное слово
■ При присваивании elem.className происходит полная замена строки с
классами
■ Для более точной работы есть еще classList – специальный объект с
методами для добавления/удаления одного класса:
elem.classList.add/remove(“class”) – добавить/удалить класс
elem.classList.toggle(“class”) – добавить класс если его нет или
удалить если есть
elem.classList.contains(”class”) – проверка наличия класса вернет
boolean

9.

Классы и стили
■ elem.style – это объект который соответствует тому что написано в атрибуте
style.
■ Стили с браузерным префиксом и свойства с нескольких слов
преобразовываются в camelCase
■ Мы можем сбросить стили до дефолтных для браузера задав свойству пустую
строку, тогда браузер применит встроенные стили
■ getComputedStyle(elem, [[pseudo]]) – вернет объект со стилями
похожий на elem.style но с учетом всех CSS-классов. elem – элемент
значение которого мы хотим получить а в pseudo – указывается если нужен
стиль псевдоэлемента(eg. ::before) не переданный аргумент будет значить что
нужен сам элемент

10.

Размеры и прокрутка элементов
■ Существует множество JS-свойств которые позволяют считывать информацию об
элементе: ширина, высота и другие геометрические характеристики
■ offsetParent, offsetLeft/Top – самые внешние метрики
■ offsetParent – свойство хранит предка элемента который используется
внутри браузера для вычисления координат при рендеринге. Этот предок должен
подходить по следующим условиям:
1) является CSS-позиционированным(position = absolute || relative
|| fixed ||sticky)
2) или <td>, <th>, <table>
3) <body>

11.

Размеры и прокрутка элементов
■ offsetLeft/offsetTop – содержат координаты x/y относительно верхнего
левого угла offsetParent
■ offsetParent может быть null если: display: none, для body, html,
position: fixed
■ offsetWidth/Height – эти свойства содержат внешнюю ширину/высоту
элемента тоесть его полный размер включая рамки
■ Метрики для не показываемых элементов равны 0
■ clientTop/Left – рамки элемента, но на самом деле это отступы внутренней
части элемента от внешней. Это возникает при rtl – полоса прокрутки находится
слева в этом случае clientLeft будет включать в себя еще и ширину полосы
прокрутки

12.

Размеры и прокрутка элементов
■ clientWidth/Height – размер области внутри рамок элемента. Они
включают в себя ширину области содержимого вместе с внутренними
отступами(padding) но без прокрутки
■ scrollWidth/Height – тоже самое что clientWidth/Height но уже
включая прокрученную часть элемента
■ scrollLeft/Top – ширина/высота невидимой, прокрученной в данный
момент части элемента слева и сверху. Другими словами scrollTop – это
сколько уже прокручено вверх. Эти свойства можно изменять

13.

Размеры и прокрутка окна
■ Для того чтоб получить ширину и высоту окна браузера, получить полную ширину
и высоту документа или прокрутить страницу мы можем использовать корневой
элемент документа document.documentElement(<html> иными словами)
■ document.documentElement.clientHeight/clientWidth – получить
ширину/высоту окна
■ Теоретически так как корневым элементом является documentElement и он
включает в себя все содержимое мы можем получить полный размер документа
через documentElement.scrollWidth/scrollHeight. Но тут есть баги –
в Chrome/Safari/Opera если нет прокрутки то
documentElement.scrollHeight будет меньше чем
documentElement.clientHeight.

14.

Размеры и прокрутка окна
■ Чтоб получить действительное правильное число необходимо взять максимальное из
свойств:
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
■ window.pageYOffset/pageXOffset - получение текущей прокрутки, оно только
для чтения
■ Прокрутить можно изменяя scrollTop/scrollLeft или с помощью:
window.scrollTo(pageX, pageY) – прокручивает на абсолютные координаты
window.scrollBy(x, y) – прокручивает страницу относительно ее текущего
положения

15.

Размеры и прокрутка окна
■ document.body.style.overflow = ‘hidden’ – запретит прокрутку
■ Прокрутку можно запретить не только всей странице но и отдельным элементам

16.

Координаты
■ Большинство методов JS работают в двух системах координат:
относительно окна браузера – position: fixed, отсчет тут идет с верхнего
левого угла
относительно документа – position: absolute
■ getBoundingClientRect() – возвращает координаты в контексте окна для
минимального по размеру прямоугольника который заключает в себе элемент
elem в виде объекта встроенного класса DOMRect
■ elementFromPoint(x,y) – возвращает самый глубоко вложенный элемент в
окне по указанным координатам