Объект DOMParser можно использовать для анализа строки HTML и преобразования ее в объект документа, которым можно манипулировать с помощью DOM API. Вот пример того, как использовать его для анализа строки HTML:
// Create a new DOMParser object
var parser = new DOMParser();
// Parse an HTML string
var htmlString = "<html><body><h1>Hello World!</h1></body></html>";
var doc = parser.parseFromString(htmlString, "text/html");
// Get the first h1 element
var h1 = doc.querySelector("h1");
console.log(h1.textContent); // Output: "Hello World!"
Вы можете использовать методы querySelector и querySelectorAll для выбора элементов из проанализированного HTML и свойство textContent для получения текстового содержимого элемента.
Вот пример расширенного использования, когда вы можете проанализировать строку html и использовать ее для обновления содержимого определенного элемента на текущей странице.
// create a parser
var parser = new DOMParser();
// parse the string
var htmlString = "<p>This is some new content.</p>";
var doc = parser.parseFromString(htmlString, "text/html");
// get the element you want to update
var target = document.querySelector("#target");
// update the element
target.innerHTML = doc.body.innerHTML;
Вы также можете использовать DOMParser для анализа строк XML аналогичным образом, передав «text/xml» в качестве второго аргумента методу parseFromString.
Пример 1:
// parse an HTML string and get all the links
var htmlString = "<html><body><a href='https://example.com'>Example</a></body></html>";
var doc = new DOMParser().parseFromString(htmlString, "text/html");
var links = doc.querySelectorAll("a");
console.log(links[0].href); // Output: "https://example.com"
Пример 2:
// parse an XML string and get the value of a specific attribute
var xmlString = "<root><element attribute='value'></element></root>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
var element = doc.querySelector("element");
console.log(element.getAttribute("attribute")); // Output: "value"
Пример 3:
// parsing an HTML string and adding an element to the parsed document
var htmlString = "<html><body></body></html>";
var doc = new DOMParser().parseFromString(htmlString, "text/html");
var newElement = doc.createElement("div");
newElement.innerHTML = "This is a new element";
doc.body.appendChild(newElement);
console.log(doc.body.innerHTML); // Output: "<div>This is a new element</div>"
Стоит отметить, что DOMParser API поддерживается не во всех браузерах, поэтому вы можете включить обнаружение функций или запасной вариант для старых браузеров.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
