Статья связана с репозиторием на GitHub.
Разобравшись с объектами, а также простой математикой и логикой в JS (пока что в консоли), стоило бы перейти к разбору того, что называют циклами. Но тогда поговорить предметно не очень получится: не писать же постоянно нелепые массивы и объёкты? Потому имеет смысл отдельно поговорить о том, что является объектами в этом языке программирования, чтобы потом работать с реальными данными.
Существует такой термин - DOM. Это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода. То есть когда вы создаете HTML-документ, вы пишите "текст кода". Когда браузер получает его, он строит объектную модель по инструкциям в вашем файле. Объектная модель состоит из "вложенных друг в друга" объектов.
Самый простой способ увидеть объект в консоли - набрать window. Полное описание можно найти в соответствующей документации.
Этот объект является самым-самым главным в DOM и содержит в себе практически всю вашу страницу со всеми свойствами и имеющий массу различных методов.
Как видим, тут много всякого написано, но сходу можно определить свойства и методы. Смотреть нужно на прописную букву f после двоеточия. Это сокращение от английского слова function (функция). Это и есть методы: мы можем их вызвать и инициировать таким образом какое-то действие.
Если f нет, значит мы смотрим на свойство.
Как же обратиться к свойствам и методам?
в JavaScript обращение происходит посредством точки:
Объект.Свойство
Объект.Метод()
При вызове методов в конце ставится (). Поясню почему: при вызове методов, они могут ожидать неких данных для запуска процесса. Каких именно - зависит от вызываемого метода. Их, к слову, может и не быть, но () ставится обязательно!
В предыдущих статьях мы уже использовали метод объекта:
console.log('...');
Вызов методов у объекта window происходит точно также. К примеру уже упоминался alert('!!!'), выводящий на экран окно с текстом:
window.alert('!!!');
Это то же самое, но вызванное через метод объекта window. Дело в том, что ряд свойств window имеют прямые вызовы:
window.alert() => alert()
window.console => console
и т.д.
Но сейчас интересует document (window.document), содержащий непосредственно DOM.
Фактически, тут мы увидим весь наш HTML-код. Но с одним неявным отличием от редактора: тут это не текст, а объект, имеющий свои свойства и методы. Полное описание можно найти в соответствующей документации.
Селекторы
Для демонстрации, создам простую страницу с несколькими элементами:
Наиболее частыми по использованию методами у него являются методы получения элементов.
document.getElementById(<id объекта>)
Возвращает объект с id, указанном в скобках. Это единственный из этой группы методов, получающих один элемент!
document.getElementsByName(<имя объекта>)
Получает массив объектов, у которых аттрибут name будет соответствовать переданному в методе.
document.getElementsByClassName(<имя класса>)
Получает массив объектов, у которых имя класса будет соответствовать переданному в методе.
document.getElementsByTagName(<название тэга>)
Получает массив объектов, у которых имя тэга будет соответствовать переданному в методе.
И еще два метода, которые очень полезны:
document.querySelector(<селектор>)
document.querySelectorAll(<селектор>)
Различие между ними в том, что первый возвращает только первый элемент, а второй возвращает массив объектов, подходящий под переданный в метод запрос.
Логичный вопрос о селекторах. На самом деле всё предельно просто. Это точно такой же формат, как описывается в CSS-файлах.
Это был так называемый "нативный" код.
Теперь добавлю в HTML-файл JS-код с выводом в консоль всех вариантов, которые сейчас рассматривал.
<script language="JavaScript">
...
</script>
Все статьи попадают в "Оглавление канала". Не пропускаем новости!