В 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.