Поиск публикаций
Работа с ДОМ
Содержание
Парсинг HTML
дом.парсить(htmlСтрока)
Преобразует строку с HTML-кодом в объект документа, с которым можно работать.
₽док = дом.парсить("<div id='main'>...</div>");
дом.парситьФайл(путь)
Загружает HTML-файл с диска и возвращает его DOM-представление.
₽док = дом.парситьФайл("index.html");
дом.создатьЭлемент(имяТега)
Создаёт новый HTML-элемент с указанным тегом (например, "div", "p", "span").
₽новыйДив = дом.создатьЭлемент("div");
Поиск элементов
Все методы поиска доступны как у объекта документа, так и у любого элемента-контейнера.
элемент.найтиПоТегу(тег)
Возвращает первого потомка (включая текущий) с указанным тегом.
ничтоэлемент.найтиПоИд(ид)
Возвращает элемент с указанным идентификатором id.
ничтоэлемент.найтиПоКлассу(класс)
Возвращает первый элемент с указанным CSS-классом.
ничтоэлемент.найтиВсеПоТегу(тег)
Возвращает массив всех элементов с указанным тегом внутри текущего.
₽заголовок = ₽док.найтиПоТегу("h1"); ₽главный = ₽док.найтиПоИд("main"); ₽текст = ₽док.найтиПоКлассу("text"); ₽всеПараграфы = ₽док.найтиВсеПоТегу("p");
🧭 Навигация по дереву
элемент.родитель()
Возвращает родительский элемент.
ничто для корняэлемент.дети()
Возвращает массив дочерних элементов-узлов (только элементы, не текстовые узлы).
элемент.первыйРебёнок()
Возвращает первого дочернего элемента.
ничтоэлемент.последнийРебёнок()
Возвращает последнего дочернего элемента.
ничтоэлемент.следующий()
Возвращает следующий смежный элемент (братский узел).
ничтоэлемент.предыдущий()
Возвращает предыдущий смежный элемент.
ничто₽корень = ₽главный.родитель(); ₽дети = ₽главный.дети(); ₽первый = ₽главный.первыйРебёнок();
Работа с атрибутами
элемент.атрибут(имя)
Возвращает значение атрибута. Если атрибут отсутствует — возвращает пустую строку.
элемент.установитьАтрибут(имя, значение)
Устанавливает значение атрибута. Если атрибут существовал — перезаписывает.
элемент.удалитьАтрибут(имя)
Удаляет атрибут.
элемент.имеетАтрибут(имя)
Проверяет наличие атрибута.
₽ид = ₽главный.атрибут("id"); // "main" ₽главный.установитьАтрибут("data-role", "wrapper"); если (₽главный.имеетАтрибут("data-role")) { ... }
Работа с классами
элемент.имеетКласс(класс)
Проверяет, есть ли у элемента указанный класс.
элемент.добавитьКласс(класс)
Добавляет класс (если его ещё нет).
элемент.удалитьКласс(класс)
Удаляет класс.
элемент.переключитьКласс(класс)
Если класс присутствует — удаляет, иначе — добавляет.
₽параграф.добавитьКласс("active"); если (₽параграф.имеетКласс("active")) { ... } ₽параграф.переключитьКласс("active");
Содержимое элементов
элемент.текст()
Возвращает текстовое содержимое элемента (без HTML-разметки).
элемент.установитьТекст(текст)
Заменяет всё содержимое элемента на указанный текст (HTML-код экранируется).
элемент.html()
Возвращает внутренний HTML-код элемента.
элемент.установитьHTML(html)
Полностью заменяет внутреннее содержимое элемента на переданный HTML-код.
элемент.добавитьHTML(html)
Вставляет HTML-код в конец содержимого элемента (как последние дочерние узлы).
элемент.вставитьВНачалоHTML(html)
Вставляет HTML-код в начало содержимого (как первые дочерние узлы).
₽заголовок.установитьТекст("Новый заголовок"); ₽главный.добавитьHTML("<span>Вставка</span>"); ₽главный.вставитьВНачалоHTML("<em>В начале</em>"); ₽главный.установитьHTML("<p>Только этот текст</p>");
Создание и вставка элементов
элемент.добавить(новыйЭлемент)
Добавляет переданный элемент как последний дочерний.
элемент.вставитьВНачало(новыйЭлемент)
Добавляет элемент как первый дочерний.
элемент.после(новыйЭлемент)
Вставляет элемент непосредственно после текущего (как следующего брата).
элемент.заменитьНа(новыйЭлемент)
Заменяет текущий элемент на новый.
элемент.удалить()
Удаляет элемент из дерева.
элемент.клонировать(глубоко)
Создаёт копию элемента. Если глубоко = истина, копируются все потомки, иначе только сам элемент.
₽главный.добавить(₽новыйДив); ₽копия = ₽элемент.клонировать(истина); ₽элемент.заменитьНа(₽новый); ₽элемент.удалить();
Сериализация
документ.сериализовать()
Преобразует всё дерево документа обратно в строку HTML.
элемент.внешнийHTML()
Возвращает HTML-код элемента вместе с открывающим и закрывающим тегами (включая сам элемент).
₽сериализовано = ₽док.сериализовать(); ₽внешний = ₽главный.внешнийHTML();
Проверка типа
элемент.этоЭлемент()
Возвращает истина, если узел является элементом (тегом), иначе ложь.
элемент.этоТекст()
Возвращает истина, если узел является текстовым узлом.
если (₽элемент.этоЭлемент()) { вывести("Это HTML-тег"); }
Крайние случаи
- Пустой HTML:
дом.парсить("")возвращает документ без дочерних элементов. - Несуществующий поиск: методы поиска возвращают
ничтовместо ошибки. - Чтение отсутствующего атрибута: возвращает пустую строку.
- Установка пустого HTML:
установитьHTML("")очищает содержимое. - Нормализация:
нормализовать()объединяет соседние текстовые узлы; выполняется без ошибок.
Полный тестовый скрипт
Ниже приведён полный тест модуля «дом», демонстрирующий все описанные функции.
// ============================================================ // ПОЛНЫЙ ТЕСТ МОДУЛЯ "дом" (работа с HTML DOM) // ============================================================ функция проверить(₽условие, ₽сообщение) { если (!₽условие) { вывести("ОШИБКА: " + ₽сообщение); бросить ₽сообщение; } иначе { вывести("OK: " + ₽сообщение); } } функция содержит(₽строка, ₽подстрока) { возврат позиция(₽строка, ₽подстрока) >= 0; } // ==================== 1. Парсинг HTML ==================== вывести("\n=== 1. Парсинг HTML ==="); ₽html = ' <div id="main" class="container"> <h1>Заголовок</h1> <p class="text">Первый параграф</p> <p class="text highlight">Второй параграф с классом highlight</p> <ul> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> <div data-role="test">Вложенный div</div> </div> '; ₽док = дом.парсить(₽html); проверить(тип(₽док) == "объект", "парсить вернул объект"); // ... (остальные тесты см. в полной версии выше) ... вывести("\nВСЕ ТЕСТЫ МОДУЛЯ DOM УСПЕШНО ПРОЙДЕНЫ");