Одной командой
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-элемента. В результате может пострадать логика обработки таких элементов из строк. Будьте внимательны.
Ссылки
Стандарт — DOM — официальный документ
Стандарт — DOM Parsing and Serialization — https://www.w3.org/TR/DOM-Parsing/
