В JavaScript есть экспериментальная технология. Вы можете прочитать на MDN. Я покажу класс DOMParser. Этот класс может манипулировать строками как элементами DOM. Например, вы отправили запрос ajax. После этого вы получили ответ, который включает html. Допустим, мы хотим использовать событие с этим элементом кода. Форма комментариев должна быть лучшим примером.
My Comment \ save_comment.php / ... html codes
Как видите, мы получили html-код после комментария. Итак, мы хотим использовать эту строку как DOM.
Класс DOMParser
Вам не нужен jQuery. Потому что есть класс DOMParser. HTML-код нашего первого примера вернулся следующим образом:
var html = ` <div id="general"> <div class="test"> test234 </div> </div> `
После этого нам нужно инициализировать класс DOMParser. Например:
var parser = new DOMParser();
Мы будем использовать метод parseFromString DOMParser. Например:
var parsed = parser.parseFromString(html, "text/html") console.log(parsed.querySelector("#general > .test").textContent)
Да :) Обычно нам нужно «документировать». Но в этом примере нам не нужно документировать.
Что, если я попробую без класса DOMParser?
да. Я задал этот вопрос себе. Попробуем на примере.
var t = `<html><head><title>Ali GOREN</title></head><body><span>test234</span></body></html>`; var doc = t.querySelector("span"); We'll get error because of querySelector metod only works with elements. We'll see this error: Uncaught TypeError: t.querySelector is not a function at <anonymous>:1:13 I almost forgot. The parseFromString method needs to two argument. For example you didn't use second argument, you'll see an error like this: VM212:1 Uncaught TypeError: Failed to execute 'parseFromString' on 'DOMParser': 2 arguments required, but only 1 present. at <anonymous>:1:8 Second argument must be one of the mime types as string. So if you use wrong mime types you'll get error. For example I used "html/text" instead of "text/html" and I got error: VM221:1 Uncaught TypeError: Failed to execute 'parseFromString' on 'DOMParser': The provided value 'html/text' is not a valid enum value of type SupportedType. at <anonymous>:1:8 XML Parsing: If you want to parse xml. You can use DOMParser class. Let's suppose we have xml like this: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> We need to change mime type like this: var parsed = parser.parseFromString(OUR_XML_STRING, "application/xml"); After that we can use like dom element when we try to select nodes. parsed.querySelector("note > to").textContent Above code is important because we can modify XML content. For example I tried like this: parsed.querySelector("note > to").textContent = "text123" Our XML structure changed thanks to DOMParser. New structure should be like this: <note> <to>text123</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> Live Example https://codepen.io/aligoren/pen/KygQEV That's all. If you have a question please leave a comment.