DOM (Document Object Model) nos permite acceder y manipular dinámicamente los datos HTML. Todos los datos de texto de un archivo HTML también se pueden extraer usando DOMParser. El analizador DOM devuelve un objeto HTML/XML/SVG. Se puede acceder a todos los objetos usando el operador [] en javascript.
El árbol HTML DOM de objetos:
Pasos para obtener todo el texto de un documento HTML usando DOMParser:
- Declara una instancia de DOMParser.
Sintaxis:
const parser = new DOMParser();
- Analice el documento usando la función .parseFromString(). Toma dos argumentos, la string a analizar y el tipo de documento.
Sintaxis:
const parsedDocument = parser.parseFromString(
htmlInput, "text/html");
- Use el elemento doc.all para acceder a toda la página HTML, ahora obtenga su elemento raíz que se almacena en el índice 0 . También podemos usar getElementByID() para obtener el contenido de un elemento específico.
Sintaxis:
var allText = parsedDocument.all[0].textContent;
Finalmente, usaremos el atributo textContent de doc.all[0] para obtener el texto de todos los elementos HTML.
Ejemplo:
html
<title>This is the title</title> <div> <span>Geeks for geeks</span> <p>Content to be parsed </p> </div>
Producción:
This is the title Geeks for geeks Content to be parsed
Código:
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>
Dom Parser Inner Content
</title>
</head>
<body>
<h2>
DomParser to get
all HTML content
</h2>
<p>
Click on the button Below
to parse the HTML document
</p>
<!-- Paragraph element to
show the output -->
<p id="output"> </p>
<!-- Button to call the
parsing function -->
<button onclick="printOutput()">
Parse now
</button>
<script>
// Input HTML string to be parsed
var htmlInput = `
<title> This is the title </title>
<div>
<span>Geeks for geeks</span>
<p> Content to be parsed </p>
</div>
`;
// Created instance
const parser = new DOMParser();
// Parsing
const parsedDocument =
parser.parseFromString(
htmlInput, "text/html");
// Getting text
function printOutput() {
var allText = parsedDocument
.all[0].textContent;
// Printing on page and console
document.getElementById("output")
.innerHTML = allText;
console.log(parsedDocument
.all[0].textContent);
}
</script>
</body>
</html>
Salida:
Antes de pulsar el botón:
Después de presionar el botón:
El contenido de texto de los componentes individuales también se puede recuperar utilizando getElementsByClassName(‘className’) y getElementById(‘IDName’).
Función Javascript que toma el documento a analizar como una string e imprime el resultado.
javascript
function parse(htmlInput) {
// Creating Parser instance
const parser = new DOMParser();
// Parsing the document using DOM Parser
// and storing the returned HTML object in
// a variable
const parsedDocument = parser
.parseFromString(htmlInput, "text/html");
// Retrieve all text content from DOM object
var allText = parsedDocument.all[0].textContent;
// Printing the output to webpage and
console.log(parsedDocument.all[0].textContent);
}
Publicación traducida automáticamente
Artículo escrito por Aadhar Tyagi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA