{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый сайт в интернете можно просмотреть не только в виде оформленной страницы с картинками, но и в текстовом виде HTML. Именно из этого кода мы будем извлекать необходимую информацию.","type":"unstyled","key":"bvorm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bvgo9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первое, что вам следует знать, — это DOM (Document Object Model) — набор правил, согласно которым формируется каждая веб-страница с использованием языка разметки HTML. DOM хранит структуру сайта в виде дерева и информацию, заключённую в тегах.","type":"unstyled","key":"3m1le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый элемент этого дерева называется узлом. Как вы скоро увидите на практике, узлы могут иметь неограниченную вложенность. Однако не рекомендуется делать эту вложенность слишком глубокой: чем больше уровней, тем сложнее ориентироваться в коде и тем медленнее работает страница.","type":"unstyled","key":"7jd7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вложенность тегов HTML можно сравнить с вложенностью обычных папок на вашем компьютере. Отличие заключается в том, что каждый узел DOM имеет своё название, атрибуты и специфическую функцию. Например, тег указывает браузеру, какое название должно быть у вашей страницы на вкладке браузера, как его следует обработать и какие могут быть у него атрибуты.","type":"unstyled","key":"f5pjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример структуры HTML страницы:","type":"unstyled","key":"dvopk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ekauo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f5vso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dqplu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2lrdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интернет-магазин","type":"blockquote","key":"bbr56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"30aef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"36ifp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1ua82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Каталог товаров

","type":"blockquote","key":"jcsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"21pdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"33qlk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Название товара

","type":"blockquote","key":"aouq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Изображение$ ","type":"blockquote","key":"1beoe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Описание товара, которое подробно расскажет о его характеристиках.

","type":"blockquote","key":"f5kad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Цена: 1000 руб.

","type":"blockquote","key":"2mslh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4qg1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"akjlr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8ov06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ulc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"da7ud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном примере:","type":"unstyled","key":"4h0m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" задаёт название веб-страницы, отображаемое в вкладке браузера.","type":"unordered-list-item","key":"59mrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В разделе <style> прописаны CSS-правила для оформления карточки товара, но чаще всего они стили располагаются в отдельном файле.","type":"unordered-list-item","key":"bdpld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карточка товара оформлена в теге <div> с классом product-card и уникальным идентификатором id=\"product-1\".","type":"unordered-list-item","key":"8dksc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h2> используется для указания названия товара, и этому тегу присвоен класс product-title.","type":"unordered-list-item","key":"cu1jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег <img> отображает изображение товара. Атрибуты src и alt задают путь к изображению и альтернативный текст соответственно.","type":"unordered-list-item","key":"3bte4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<p> с классом product-description и product-price используются для отображения описания и цены товара.","type":"unordered-list-item","key":"1cmjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка \"Добавить в корзину\" реализована с помощью тега <button>, атрибут onclick которого запускает JavaScript-функцию addToCart.","type":"unordered-list-item","key":"9669j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый тег в этом примере — это узел в DOM-дереве. Узлы могут иметь любые атрибуты (например, src=\"product-image.jpg\" для тега <img>) и вложенные узлы (например, <h2> вложен в <body>).","type":"unstyled","key":"1toof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дерево DOM служит нам инструментом для поиска нужного элемента на странице и взаимодействия с ним.","type":"unstyled","key":"f3jv8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При создании парсеров вам не требуется выполнять какие-то изменения в узлах DOM. Главное — понимать структуру DOM и знать, как получить доступ к определённому узлу и информации в нём, об этом мы будем говорить в следующих уроках.","type":"unstyled","key":"5ugf7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dv61i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dg38o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"53qtl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"1F2aMC1ob25CtJJsV7BO"}],"entityMap":{}},"mentions":[]}</article></body></html>