![ПОИСК: ЭЛЕМЕНТОВ
querySelector
Вызов elem.querySelector(css) возвращает не все, а только первый элемент,
соответствующий CSS-селектору css.
Иначе говоря, результат — такой же, как и при elem.querySelectorAll(css)[0],
но в последнем вызове сначала ищутся все элементы, а потом берётся
первый, а в elem.querySelector(css) ищется только первый, то есть он
эффективнее.
Этот метод часто используется, когда мы заведомо знаем, что подходящий
элемент только один, и хотим получить в переменную сразу его.](https://image.slidesharecdn.com/module4-170705143839/85/Module-4-30-320.jpg)
Module 4
- 2. ОКРУЖЕНИЕ: DOM, BOM И JS Сам по себе язык JavaScript не предусматривает работы с браузером. Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.
- 3. ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА (DOM) Глобальный объект document даёт возможность взаимодействовать с содержимым страницы.
- 4. ОБЪЕКТНАЯ МОДЕЛЬ БРАУЗЕРА (BOM) Управляет поведением браузера из JavaScript. BOM включает в себя несколько объектов: • Window 1. Location 2. Navigator 3. History 4. Screen 5. Frames 6. DOM 7. JavaScript
- 5. ОБЪЕКТ WINDOWS Объект window является корневым объектом JavaScript. Все объекты JavaScript, а также переменные и функции определяемые пользователем хранятся в объекте window.
- 6. СВОЙСТВА ОБЪЕКТА WINDOWS Свойство Описание closed Возвращает логическое значение (true или false) в зависимости от того, закрыто указанное окно или отрыто. frames Возвращает массив всех фреймов на странице (включая iframe). document Возвращает объект Document данного окна. history Возвращает объект History данного окна. length Возвращает количество фреймов (включая iframe), которые находятся в данном окне. location Возвращает объект Location данного окна. name Устанавливает или возвращает имя данного окна. navigator Возвращает объект Navigator данного окна. opener Возвращает ссылку на окно, которое открыло данное. parent Возвращает родительское окно данного окна. screen Возвращает объект Screen данного окна. top Возвращает верхнее браузерное окно для данного окна.
- 7. МЕТОДЫ ОБЪЕКТА WINDOWS Метод Описание alert(), confirm(), prompt() Диалоговые окна blur() Делает окно неактивным. clearInterval() Прекращает повторное выполнение кода заданного setInterval(). clearTimeout() Отменяет запланированное методом setTimeout() выполнение кода close() Закрывает окно. focus() Делает окно активным. moveBy() Смещает окно относительно его текущей позиции. moveTo() Перемещает окно на указанную позицию. open() Открывает новое окно браузера. scrollBy() Прокручивает содержимое окна на указанное количество пикселей.
- 8. МЕТОДЫ ОБЪЕКТА WINDOWS Метод Описание scrollTo() Прокручивает содержимое окна до указанных координат. setInterval() Вызывает функцию или выполняет код через определенные промежутки времени (указанные в миллисекундах). setTimeout() Вызывает функцию или выполняет код после указанного количества миллисекунд один раз.
- 9. ОБЪЕКТ NAVIGATOR С помощью объекта navigator Вы можете определить какой браузер использует пользователь. Так же с помощью navigator Вы можете проверить может ли пользователь принимать cookie и включена ли у него поддержка Java. Свойства С помощью свойства userAgent Вы можете узнать всю информацию о браузере пользователя. С помощью свойства cookieEnabled Вы можете узнать включена ли возможность использования cookie в браузере пользователя. С помощью свойства appVersion Вы можете узнать версию браузера С помощью свойства appName Вы можете узнать название браузера, а с помощью appCodeName кодовое название браузера. С помощью свойства platform Вы можете узнать платформу, под которую скомпилирован браузер (т.е. узнать ОС, которую использует пользователь).
- 10. ОБЪЕКТ NAVIGATOR Методы С помощью метода javaEnabled() Вы можете проверить включена ли поддержка Java в браузере пользователя или нет. Метод вернет true если поддержка включена и false если нет.
- 11. ОБЪЕКТ SCREEN Объект Screen содержит информацию об экране пользователя. С помощью свойств данного объекта Вы можете узнать какое разрешение, а также какая глубина цвета установлена на экране пользователя. Свойства width определяет ширину экрана пользователя, а свойство height высоту. С помощью свойства colorDepth Вы можете узнать глубину цвета (измеряется в битах на пиксель) установленную у пользователя: Свойство availHeight возвращает высоту экрана пользователя служащую непосредственно для вывода информации (т.е. высота без размера таких элементов браузера как панель задач, полоса прокрутки и т.д.). Свойство availWidth возвращает ширину экрана пользователя служащую непосредственно для вывода информации (т.е. ширина без размера таких элементов браузера как панель задач, полоса прокрутки и т.д.).
- 12. ОБЪЕКТ LOCATION В объекте Location хранятся информацию о текущем URL. Свойства Свойство href хранит URL текущего документа целиком. С помощью свойства pathname Вы можете узнать путь к загруженному документу.Свойство host содержит имя домена загруженного документа. Методы С помощью метода assign() Вы можете загрузить новый документ в данное окно браузера (изменить текущий URL на желаемый). Метод reload() используется для перезагрузки текущего документа. Действие этого метода аналогично действую кнопки "Обновить" браузера.
- 13. ОБЪЕКТ HISTORY Объект History содержит список URL которые были посещены в данном окне браузера. Свойства С помощью свойства length Вы можете узнать количество посещенных URL хранящихся в списке.
- 14. ОБЪЕКТ HISTORY Методы Вы можете перемещаться по списку посещенных URL с помощью метода go(смещение). Например, с помощью go(2) Вы можете переместится на два URL вперед, а go(-3) переместит Вас на три URL назад. С помощью метода back() Вы можете перейти на предыдущую URL в списке посещенных страниц. Действие этого метода аналогично действую стрелки назад в браузере и history.go(-1). С помощью метода forward() Вы можете перейти на следующую URL в списке посещенных страниц. Действие этого метода аналогично действую стрелки вперед в браузере и history.go(1).
- 15. ДЕРЕВО DOM Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст». DOM — это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
- 16. АВТОИСПРАВЛЕНИЕ При чтении неверного HTML браузер автоматически корректирует его для показа и при построении DOM. В частности, всегда будет верхний тег <html>. Даже если в тексте нет — в DOM он будет, браузер создаст его самостоятельно. То же самое касается и тега <body>. Например, если файл состоит из одного слова "Привет", то браузер автоматически обернёт его в <html> и <body>. При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее. Всего различают 12 типов узлов, но на практике мы работаем с четырьмя из них: • Документ — точка входа в DOM. • Элементы — основные строительные блоки. • Текстовые узлы — содержат, собственно, текст. • Комментарии — иногда в них можно включить информацию, которая
- 17. НАВИГАЦИЯ ПО DOM-ЭЛЕМЕНТАМ DOM позволяет делать что угодно с HTML-элементом и его содержимым, но для этого нужно сначала нужный элемент получить. Доступ к DOM начинается с объекта document. Из него можно добраться до любых узлов. Так выглядят основные ссылки, по которым можно переходить между узлами DOM:
- 18. СВЕРХУ DOCUMENTELEMENT И BODY Самые верхние элементы дерева доступны напрямую из document. <HTML> = document.documentElement Первая точка входа — document.documentElement. Это свойство ссылается на DOM-объект для тега <html>. <BODY> = document.body Вторая точка входа — document.body, который соответствует тегу <body>. В современных браузерах (кроме IE8-) также есть document.head — прямая ссылка на <head> В DOM активно используется null В мире DOM в качестве значения, обозначающего «нет такого элемента» или «узел не найден», используется не undefined, а null.
- 19. ДЕТИ: CHILDNODES, FIRSTCHILD, LASTCHILD • Дочерние элементы (или дети) — элементы, которые лежат непосредственно внутри данного. Например, внутри <HTML> обычно лежат <HEAD> и <BODY>. • Потомки — все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево DOM. Псевдо-массив childNodes хранит все дочерние элементы, включая текстовые.
- 20. ДЕТИ: CHILDNODES, FIRSTCHILD, LASTCHILD Пример ниже последовательно выведет дочерние элементы document.body:
- 21. ДЕТИ: CHILDNODES, FIRSTCHILD, LASTCHILD Коллекции — не массивы DOM-коллекции, такие как childNodes и другие, которые мы увидим далее, не являются JavaScript-массивами. В них нет методов массивов, таких как forEach, map, push, pop и других. Именно поэтому childNodes и называют «коллекция» или «псевдомассив».
- 22. СДЕЛАТЬ ИЗ КОЛЛЕКЦИИ МАССИВ 1. Применить метод массива через call/apply: 2. При помощи Array.prototype.slice сделать из коллекции массив. Обычно вызов arr.slice(a, b) делает новый массив и копирует туда элементы arr с индексами от a до b-1 включительно. Если же вызвать его без аргументов arr.slice(), то он делает новый массив и копирует туда все элементы arr.
- 23. СОСЕДИ И РОДИТЕЛЬ Доступ к элементам слева и справа данного можно получить по ссылкам previousSibling / nextSibling. Родитель доступен через parentNode. Если долго идти от одного элемента к другому, то рано или поздно дойдёшь до корня DOM, то есть до document.documentElement, а затем и document.
- 24. НАВИГАЦИЯ ТОЛЬКО ПО ЭЛЕМЕНТАМ Навигационные ссылки, описанные выше, равно касаются всех узлов в документе. В частности, в childNodes сосуществуют и текстовые узлы и узлы- элементы и узлы-комментарии, если есть. Но для большинства задач текстовые узлы нам не интересны. Поэтому посмотрим на дополнительный набор ссылок, которые их не учитывают:
- 25. НАВИГАЦИЯ ТОЛЬКО ПО ЭЛЕМЕНТАМ Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element: • children — только дочерние узлы-элементы, то есть соответствующие тегам. • firstElementChild, lastElementChild — соответственно, первый и последний дети-элементы. • previousElementSibling, nextElementSibling — соседи-элементы. • parentElement — родитель-элемент.
- 26. ПОИСК: ЭЛЕМЕНТОВ document.getElementById или просто id Если элементу назначен специальный атрибут id, то можно получить его прямо по переменной с именем из значения id. Более правильной и общепринятой практикой является доступ к элементу вызовом document.getElementById("идентификатор").
- 27. ПОИСК: ЭЛЕМЕНТОВ getElementsByTagName Метод elem.getElementsByTagName(tag) ищет все элементы с заданным тегом tag внутри элемента elem и возвращает их в виде списка. Регистр тега не имеет значения. Обратим внимание: в отличие от getElementById, который существует только в контексте document, метод getElementsByTagName может искать внутри любого элемента. Можно получить всех потомков, передав звездочку '*' вместо тега:
- 28. ПОИСК: ЭЛЕМЕНТОВ getElementsByName Вызов document.getElementsByName(name) позволяет получить все элементы с данным атрибутом name. getElementsByClassName Вызов elem.getElementsByClassName(className) возвращает коллекцию элементов с классом className. Находит элемент и в том случае, если у него несколько классов, а искомый – один из них. Поддерживается всеми современными браузерами, кроме IE8-.
- 29. ПОИСК: ЭЛЕМЕНТОВ querySelectorAll Вызов elem.querySelectorAll(css) возвращает все элементы внутри elem, удовлетворяющие CSS-селектору css. Это один из самых часто используемых и полезных методов при работе с DOM. Он есть во всех современных браузерах, включая IE8+ (в режиме соответствия стандарту). Следующий запрос получает все элементы LI, которые являются последними потомками в UL:
- 30. ПОИСК: ЭЛЕМЕНТОВ querySelector Вызов elem.querySelector(css) возвращает не все, а только первый элемент, соответствующий CSS-селектору css. Иначе говоря, результат — такой же, как и при elem.querySelectorAll(css)[0], но в последнем вызове сначала ищутся все элементы, а потом берётся первый, а в elem.querySelector(css) ищется только первый, то есть он эффективнее. Этот метод часто используется, когда мы заведомо знаем, что подходящий элемент только один, и хотим получить в переменную сразу его.
- 31. ПОИСК: ЭЛЕМЕНТОВ matches Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem селектору css. Он возвращает true либо false. Не поддерживается в IE8-. Этот метод бывает полезным, когда мы перебираем элементы (в массиве или по обычным навигационным ссылкам) и пытаемся отфильтровать те из них, которые нам интересны. Ранее в спецификации он назывался matchesSelector, и большинство браузеров поддерживают его под этим старым именем, либо с префиксами ms/moz/webkit.
- 32. СВОЙСТВА УЗЛОВ: ТИП, ТЕГ И СОДЕРЖИМОЕ Классы, иерархия DOM Самое главное различие между DOM-узлами — разные узлы являются объектами различных классов. Поэтому, к примеру, у узла, соответствующего тегу <td> — одни свойства, у <form> — другие, у <a> — третьи.
- 33. ТИП: NODETYPE Как правило, мы работаем всего с двумя типами узлов: • Элемент. • Текстовый узел. На самом деле типов узлов гораздо больше. Строго говоря, их 12, и они описаны в спецификации с древнейших времён, см. DOM Уровень 1: Тип узла можно только читать, изменить его невозможно.
- 34. ТЕГ: NODENAME И TAGNAME Название HTML-тега всегда находится в верхнем регистре. Например, для document.body: Какая разница между tagName и nodeName ? • Свойство tagName есть только у элементов Element (в IE8- также у комментариев, но это ошибка в браузере). • Свойство nodeName определено для любых узлов Node, для элементов оно равно tagName, а для не-элементов обычно содержит строку с типом узла.
- 35. INNERHTML: СОДЕРЖИМОЕ ЭЛЕМЕНТА Позволяет получить HTML-содержимое элемента в виде строки. В innerHTML можно и читать и писать
- 36. OUTERHTML: HTML ЭЛЕМЕНТА ЦЕЛИКОМ Свойство outerHTML содержит HTML элемента целиком. Изменить outerHTML элемента невозможно.
- 37. NODEVALUE/DATA: СОДЕРЖИМОЕ ТЕКСТОВОГО УЗЛА Свойство innerHTML есть только у узлов-элементов. Содержимое других узлов, например, текстовых или комментариев, доступно на чтение и запись через свойство data.
- 38. ТЕКСТ: TEXTCONTENT Свойство textContent содержит только текст внутри элемента, за вычетом всех <тегов>. Оно поддерживается везде, кроме IE8-. возвращается в точности весь текст, включая переводы строк и пробелы, но без тегов.Гораздо полезнее возможность записать текст в элемент, причём именно как текст!
- 39. ДОБАВЛЕНИЕ И УДАЛЕНИЕ УЗЛОВ Изменение DOM — ключ к созданию «живых» страниц. Создание элемента document.createElement(tag) document.createTextNode(text) Создание сообщения После этого кода у нас есть готовый DOM-элемент. Пока что он присвоен в переменную div, но не виден, так как никак не связан со страницей.
- 40. ДОБАВЛЕНИЕ ЭЛЕМЕНТА: APPENDCHILD, INSERTBEFORE parentElem.appendChild(elem) Добавляет elem в конец дочерних элементов parentElem. parentElem.insertBefore(elem, nextSibling) Вставляет elem в коллекцию детей parentElem, перед элементом nextSibling.
- 41. КЛОНИРОВАНИЕ УЗЛОВ: CLONENODE Вызов elem.cloneNode(true) создаст «глубокую» копию элемента — вместе с атрибутами, включая подэлементы. Если же вызвать с аргументом false, то копия будет сделана без дочерних элементов. Это нужно гораздо реже.
- 42. УДАЛЕНИЕ УЗЛОВ: REMOVECHILD parentElem.removeChild(elem) Удаляет elem из списка детей parentElem. parentElem.replaceChild(newElem, elem) Среди детей parentElem удаляет elem и вставляет на его место newElem.