Одной командой
new DOMParser().parseFromString(ТВОЯ_СТРОКА, "text/html").getElementsByTagName("ТВОЙ_ЭЛЕМЕНТ")[0]
Рассмотрен случай преобразования готовой разметки HTML, которая лежит в JavaScript в виде строки.
ТВОЯ_СТРОКА - нужно указать свою строку
ТВОЙ_ЭЛЕМЕНТ - нужно указать HTML-элемент, который получается из строки (тот который задумывался изначально)
Пример реализации:
[0] - это значение опционально, если нужно получить какой-либо один элемент из коллекции элементов. Работает целочисленный индекс как у массивов.
Видео инструкция
В этом видео приводится пример преобразования подготовленной строки в HTML-элемент при помощи JavaScript и стандарта "DOM Parsing and Serialization". Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.
Строка до нужной строки. Или как мы пришли к этому вопросу.
Изначально была строка:
var stroka = "Скачать фото"
Мы воспользовались "Дополнительными возможностями ECMAScript для веб-браузеров". Мы воспользовались "Дополнительными свойствами прототипа объекта String" - а именно методом link() - String.prototype.link и обернули эту строку HTML-разметкой:
var newStrLink = stroka.link("efim360.ru")
Мы получили строку, которая полностью оформлена как HTML-разметка (ВНИМАНИЕ! Это строковый тип данных JavaScript. Не объект DOM интерфейса Element):
<a href="efim360.ru">Скачать фото</a>
Вывод в консоль:
Теперь нам нужно преобразовать эту строку в HTML-элемент, чтобы иметь возможность взаимодействовать как с объектом. (Доставать значения атрибутов, например из href-атрибута)
Решение задачи
Мы воспользуемся интерфейсом DOMParser, который описан в документе - DOM Parsing and Serialization - https://www.w3.org/TR/DOM-Parsing/
Сначала мы создаём новый объект конструктора DOMParser. Вызываем конструктор при помощи оператора new. Не передаём никаких параметров в конструктор.
new DOMParser()
Затем у этого объекта мы обращаемся к единственному методу parseFromString:
new DOMParser().parseFromString()
Функция parseFromString() принимает два параметра:
- Нужная нам строка
- Один из пяти Mime-типов в строком виде ("text/html", "text/xml", "application/xml", "application/xhtml+xml", "image/svg+xml")
Передаём нужные параметры:
new DOMParser().parseFromString(newStrLink, "text/html") или new DOMParser().parseFromString(newStrLink, "text/xml")
Эта конструкция вернёт нам полноценный документ.
С этого момента у нас есть два пути:
- Использовать "text/html" (правильный)
- Использовать "text/xml"
Путь № 1 - Использовать "text/html"
Мы получаем новый документ в переменную newDoc.
var newDoc = new DOMParser().parseFromString(newStrLink, "text/html")
Вывод в консоль браузера:
Нам не нужен сам документ. Нам нужен элемент ссылки, который появился в этом документе.
Мы положили новый документ в переменную и теперь можем отобрать все элементы-ссылки в этом документе (по сути, мы отловим ИМЕННО НАШУ СТРОКУ, с которой начинали)
var aHColl = newDoc.getElementsByTagName("a")
В переменной aHColl будет находиться коллекция HTML-элементов <a>.
Под индексом 0(ноль) будет лежать та самая единственная ссылка, которую из строки мы превратили в объект. У этого объекта будут работать все ключи, которые присущи HTML-элементу <a>.
Мы без проблем сможем обратиться к ключу href и получить его полный путь:
Мы получили href. Всё работает как надо, а значит мы успешно преобразовали строку в HTML-элемент при помощи JavaScript.
Путь № 2 - Использовать "text/xml"
Вариант с "text/xml" вернёт нам "усечённый" документ (не будет <html><body> и <head>):
var newStrObject = new DOMParser().parseFromString(newStrLink, "text/xml")
Вывод в консоль браузера:
Из него также можно будет получить HTML-коллекцию элементов <a>. НО! ВНИМАНИЕ!
!!! У этого объекта не будет ключа href.
Объект коллекции не будет содержать нужного количества ключей для своего уникального HTML-элемента. В результате может пострадать логика обработки таких элементов из строк. Будьте внимательны.
Ссылки
Fetch | Как получить данные? Используем JavaScript
Стандарт - DOM - официальный документ
Стандарт - DOM Parsing and Serialization - https://www.w3.org/TR/DOM-Parsing/
