{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что HTML-страница – это большой дом, в котором много комнат (элементов). У каждой комнаты может быть свое имя (ID), свой стиль оформления (класс), а также каждая комната может быть определенного типа, например, спальня, кухня, ванная (тег).","type":"unstyled","key":"f932m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":186,"style":"ITALIC"}],"text":"document.querySelector() – это как опытный поисковик, которого вы отправляете в этот дом, чтобы найти конкретную комнату. Вы даете ему описание этой комнаты (CSS-селектор), и он находит первую комнату, которая соответствует описанию.","type":"unstyled","key":"8i7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Разберем подробнее:","type":"unstyled","key":"ek8b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"document: Это как карта всего дома. Она содержит информацию о каждой комнате и о том, как они связаны между собой.","type":"unordered-list-item","key":"a5vrk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"querySelector(): Это сам поисковик. Вы ему говорите: “Найди мне…”","type":"unordered-list-item","key":"5lb3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"selector (описание комнаты): Это как инструкция, которую вы даете поисковику, чтобы он мог найти нужную комнату. Эта инструкция написана на специальном языке – CSS-селекторах.","type":"unordered-list-item","key":"4s9cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Примеры “инструкций” (CSS-селекторов):","type":"unstyled","key":"e7vjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"\"#кухня\": Найди комнату с именем “кухня” (ID). # используется для обозначения ID. Это как сказать: “Найди комнату, на которой написано ‘кухня’”.","type":"unordered-list-item","key":"55m63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"\".красивая-спальня\": Найди комнату, оформленную в стиле “красивая спальня” (класс). . используется для обозначения класса. Это как сказать: “Найди комнату, которая оформлена в стиле, который называется ‘красивая-спальня’”.","type":"unordered-list-item","key":"8pujo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"\"спальня\": Найди любую комнату, которая является спальней (тег). Просто указываем название комнаты. Это как сказать: “Найди любую комнату, которая называется ‘спальня’”.","type":"unordered-list-item","key":"5rl0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":6,"offset":49,"style":"ITALIC"}],"text":"\"div > p\": Найди абзац (

), который находится внутри другой комнаты, которая является div (прямой потомок). Это как сказать: “Найди абзац, который находится прямо в комнате типа ‘div’”.","type":"unordered-list-item","key":"d9o52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Что происходит, когда поисковик находит комнату?","type":"unstyled","key":"3orrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":18,"style":"ITALIC"}],"text":"Он возвращает вам ссылку на эту комнату. Теперь вы можете “войти” в эту комнату и что-то с ней сделать: изменить ее цвет, добавить в нее мебель и т.д. (изменить свойства элемента, его содержимое, стили и т.д.).","type":"unordered-list-item","key":"cj2d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Что происходит, если поисковик не находит комнату?","type":"unstyled","key":"8bhno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он возвращает вам null (ничего). Это значит, что ни одна комната в доме не соответствует вашему описанию.","type":"unordered-list-item","key":"32cuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Пример кода:","type":"unstyled","key":"v01f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c0olf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9gcbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ap360"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мой дом","type":"unstyled","key":"c3sov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e5fmp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2hucm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Добро пожаловать!

","type":"unstyled","key":"28udm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это текст в гостиной.

","type":"unstyled","key":"3jut0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ckcmm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2lf6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d3m8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"В этом примере:","type":"unstyled","key":"33rri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector(\"#главная-гостиная\") ищет элемент с id=\"главная-гостиная\" (заголовок

). Затем мы меняем его текст.","type":"ordered-list-item","key":"ebmhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector(\".текст-в-гостиной\") ищет элемент с class=\"текст-в-гостиной\" (абзац
). Затем мы меняем цвет текста в этом абзаце.","type":"ordered-list-item","key":"2tauj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"В заключение:","type":"unstyled","key":"9rhig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector() – это ваш верный помощник для поиска элементов на веб-странице. Используйте его, чтобы находить нужные элементы и управлять ими! Чем лучше вы освоите CSS-селекторы, тем точнее и эффективнее сможете “искать комнаты” в своем “доме” (HTML-документе).\n____________________________________________________________\n_\nА теперь, после того как более менее стало понятно, более подробное объяснение; \n\ndocument.querySelector() — это один из основных и наиболее часто используемых методов в JavaScript для поиска элементов на веб-странице (в HTML-документе). Он является частью интерфейса Document и позволяет выбирать элементы DOM (Document Object Model) на основе CSS-селекторов.","type":"unstyled","key":"44eaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Что делает document.querySelector()?","type":"unstyled","key":"9b274"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector() принимает один аргумент: строку, представляющую собой CSS-селектор. Этот селектор определяет, какой элемент или элементы вы хотите найти в документе. Метод ищет в документе первый элемент, который соответствует указанному селектору. Если элемент найден, метод возвращает этот элемент. Если ни один элемент не соответствует селектору, метод возвращает null.","type":"unstyled","key":"39huk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Синтаксис:","type":"unstyled","key":"98o1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":13,"offset":23,"style":"BOLD"}],"text":"let element = document.querySelector(selector);","type":"unstyled","key":"88ueg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"element: Переменная, в которую будет сохранен найденный элемент (или null, если ничего не найдено).","type":"unordered-list-item","key":"6agug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document: Объект, представляющий весь HTML-документ.","type":"unordered-list-item","key":"e4u9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"querySelector(selector): Метод querySelector(), вызываемый на объекте document.","type":"unordered-list-item","key":"2hqgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"selector: Строка, содержащая CSS-селектор. Это может быть:\nИмя тега (например, \"p\" для абзаца).\nID элемента (например, \"#myElement\" для элемента с id=\"myElement\").\nИмя класса (например, \".myClass\" для элемента с class=\"myClass\").\nАтрибут элемента (например, \"[type='text']\" для элемента с атрибутом type=\"text\").\nЛюбая комбинация CSS-селекторов (например, \"div > p.highlight\" для абзаца с классом highlight, который является прямым потомком div).\n","type":"unordered-list-item","key":"cufis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Примеры:","type":"unstyled","key":"e2or2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"1. Выбор элемента по ID:","type":"unstyled","key":"edvi3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Этот текст находится в div с id=\"myDiv\".
","type":"unstyled","key":"6mbko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1fbgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"2. Выбор элемента по классу:","type":"unstyled","key":"fu0ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Этот абзац имеет класс highlight.
","type":"unstyled","key":"avkeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Этот абзац не имеет класса highlight.
","type":"unstyled","key":"71ehk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dj8k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"3. Выбор элемента по имени тега:","type":"unstyled","key":"995fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок

","type":"unstyled","key":"dtj5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это абзац текста.

","type":"unstyled","key":"f56km"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b70sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"4. Выбор элемента с использованием сложных селекторов:","type":"unstyled","key":"79fom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"75rct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Этот абзац находится внутри div.

","type":"unstyled","key":"1ueeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Этот абзац тоже находится внутри div.

","type":"unstyled","key":"dkq6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"23ddb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Этот абзац находится вне div.

","type":"unstyled","key":"5hok9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eqtih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"5. Если элемент не найден:","type":"unstyled","key":"9vfve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Абзац текста

","type":"unstyled","key":"ehgvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2frp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Важные моменты:","type":"unstyled","key":"742eo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":36,"style":"BOLD"},{"length":3,"offset":109,"style":"ITALIC"}],"text":"document.querySelector() возвращает только первый элемент, соответствующий селектору. Если вам нужно выбрать все элементы, используйте document.querySelectorAll().","type":"unordered-list-item","key":"e2nqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"querySelector() использует синтаксис CSS-селекторов, поэтому вы можете использовать любые селекторы, поддерживаемые CSS (например, селекторы атрибутов, псевдоклассы и т.д.).","type":"unordered-list-item","key":"89npq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если селектор содержит переменные, убедитесь, что вы правильно формируете строку селектора. Например, используйте шаблонные литералы (template literals):","type":"unordered-list-item","key":"4kv8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":3,"offset":29,"style":"BOLD"},{"length":13,"offset":52,"style":"BOLD"}],"text":"let className = \"highlight\";\nlet element = document.querySelector(`.${className}`);","type":"unstyled","key":"cauge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fa6go"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Когда использовать document.querySelector()?","type":"unstyled","key":"4o9rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вам нужно выбрать один конкретный элемент на основе CSS-селектора.","type":"unordered-list-item","key":"1ts5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вам нужно получить доступ к элементу для изменения его свойств, содержимого, стилей или для добавления обработчиков событий.","type":"unordered-list-item","key":"29p1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вам нужно взаимодействовать с определенными элементами на странице в вашем JavaScript-коде.","type":"unordered-list-item","key":"a39j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":73,"offset":0,"style":"BOLD"}],"text":"Отличие от document.getElementById() и document.getElementsByClassName():","type":"unstyled","key":"86o1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById() выбирает элемент только по его id. Он быстрее, чем querySelector(), но менее гибок.","type":"unordered-list-item","key":"a0msb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":45,"style":"ITALIC"},{"length":6,"offset":120,"style":"ITALIC"}],"text":"document.getElementsByClassName() возвращает коллекцию элементов с указанным классом. querySelector() возвращает только первый элемент.","type":"unordered-list-item","key":"4l6c6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"В заключение:","type":"unstyled","key":"e1di4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector() — это мощный и гибкий инструмент для выбора элементов DOM в JavaScript. Понимание того, как использовать CSS-селекторы, позволяет вам эффективно находить и манипулировать элементами на веб-странице. Это необходимый навык для любого веб-разработчика.","type":"unstyled","key":"7itj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"iJJBN5x3xAiPQC02YUOI"}],"entityMap":{}},"mentions":[]}